使用jquery計算加載圖像列表的寬度

Question

我使用jQuery創建幻燈片，使用AJAX加載圖像，並使用append將其放入列表中。所有圖像加載後，我想獲得列表寬度。

我用下面這段代碼，但問題是，這logos_counter應該包含所有圖像的寬度總是等於0

var logos_counter = 0; 
var img = new Image(); 
$.each(data.images, function (index, photo) { 
    url = 'img/logos/' + photo; 
    $('.logos ul').append($('<li>').append($('<img/>').attr('src',url).addClass('slide'))); 
    img.src = url; 
    logos_counter = logos_counter + img.width; 
}); 
$('.logos ul').css({width: logos_counter + 'px'}); 

Answer 1

試試這個 -

$.each(data.images, function (index, photo) { 
    url = 'img/logos/' + photo; 
    $('.logos ul').append($('<li>').append($('<img/>').attr('src',url).addClass('slide'))); 
    img.src = url; 
    $(img).load(function(){ 
     logos_counter = logos_counter + $(this).width; 
     $('.logos ul').css({width: logos_counter + 'px'}); 
    }); 

});