獲取Ajax獲取的圖像的寬度

Question

點擊鏈接後我使用Ajax功能接收圖像，所以我不知道它們的寬度..如果圖像大於650，我想更改圖像的CSS PX。所有的圖像具有相同的類名.popup_pics所以我做：

$(document).ready(function (e) { 
    $('a[class*="popup"]').click(function(){ 
     showPics(current); //Ajax call 

     if ($(".popup_pics").clientWidth > 649) { 
      alert($("img.popup_pics").width()); 
     } 
     else { 
      alert($("img.popup_pics").width()); 
     } 
    } 
} 

但它給了我undefined，所以我認爲這是因爲圖像是沒有加載。 我該怎麼做？ 謝謝

Answer 1

等待圖像加載，然後獲取其寬度。像這樣的東西應該可以工作：

$("img.popup_pics").each(function() { 
    var img = $(this), 
     src = img.attr('src'), 
     image = new Image(); 

    image.onload = function() { 
     // detect width here 
     alert(img.width());    
    }; 

    image.src = src; 
}); 

不要忘記只有在AJAX成功返回並更改HTML後才能執行此代碼。

Answer 2

.WIDTH（http://api.jquery.com/width/）和.height（http://api.jquery.com/height/），沒有性質，但jQuery的功能，所以此代碼的工作：

http://jsfiddle.net/nQvK3/1/

$(".popup_pics").each(function(index, domElement) { 

    if (domElement.clientWidth > 649) { 
     alert(domElement.id + ' is bigger then 649: ' + $("img.popup_pics").width()); 
    } 
    else { 
     alert(domElement.id + ' is smaller then 649: ' + $("img.popup_pics").width()); 
    } 

}); 

我增加了一些更多的代碼，這裏是新小提琴：http://jsfiddle.net/nQvK3/4/

• 首先做你的圖片源的ajax調用（我在小提琴中評論它，因爲我不能做一個ajax調用到源）
• 當AJAX調用成功我們稱之爲showImages函數並傳遞響應對象作爲第一參數
• 此功能使用的jquery每個要經過圖像陣列
• 爲我們創建了一個每個圖像圖像標記，然後將圖像添加到DOM
• 我們最終衡量它的寬度，如果它是更大的，我們應用類，以它來調整其大小

// - 更新的代碼

$(document).ready(function() { 

    /* 
    var request = $.ajax({ 
     url: "images.php?gallery_id=1", 
     type: "GET", 
     data: {id : menuId}, 
     dataType: "json" 
    }); 

    request.done(function(ajaxImagesResultObject) {*/ 

     // this is what ajax returns to you, probably an array of objects 
     // to test it in your code uncomment the ajax call and comment out the following object 
     var ajaxImagesResultObject = { imagesArray: 
      [ 
       { 
        name: 'stackoverflow small', 
        url: 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png' 
       }, 
       { 
        name: 'stackoverflow big', 
        url: 'http://cdn.sstatic.net/stackexchange/img/logos/careers/careers-logo.png' 
       } 
      ] 
     }; 

     console.log(ajaxImagesResultObject); 

     showPics(ajaxImagesResultObject); 

    /*}); 

    request.fail(function(jqXHR, textStatus) { 
     alert("Request failed: " + textStatus); 
    }); 

    */ 

}); 

var showPics = function(ajaxImagesResultObject) { 

    // foreach image that is contained in the result array 
    $.each(ajaxImagesResultObject.imagesArray, function(index, imageData) { 

     var imageElement = $('<img src="' + imageData.url + '" id="' + index+1 + '" title="' + imageData.name + '" />'); 

     // now we add (append) the image inside of the imagesBox element 
     $('#imagesBox').append(imageElement); 

     // now we check its width and if it is bigger then 649 we add a resize class 
     // to save bandwidth images that are too big should get resized on the server not the client 
     if ($('#' + index+1).width() > 649) { 
      $('#' + index+1).addClass('imageResizer'); 
     } else { 
      // do nothing 
     } 

    }); 

};