jquery - 使用 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'});
   });

});