jquery - 将图像标题推入数组，然后显示它们

Question

我有以下问题。我的 index.html 中有三张图片：

<div class = "someclass">
<img src = "1.jpg" title="jeeden"/>
<img src = "2.jpg" title="dwa"/>
<img src = "3.jpg" title="trzy"/>
</div>

我希望他们加载，并在加载时 - 将他们的标题推送到我在 jquery 中的数组，这里是代码：

var titletable = [];

$(document).ready(function() {

$("img").load(function(event){
titletable.push($(this).attr('atrybut1'));
});


$.each(titletable, function(i, v) {
$('.someclass').append("<li>" + i + ": " + v + "</li>");
}); 

当我将$.each迭代移动到.load函数中时，它会显示数组元素，但是以错误的方式，它会在每次加载图像时显示数组的状态。我想显示titletable所有三个图像何时加载的内容。我怎样才能做到这一点？

Answer 1

您在 .load 之外运行 .each ，并且加载通常会在以后发生

var titletable = [];

$(document).ready(function() {
   var totalImages = $("img").length;
   var loadedImages = 0;

   $("img").load(function(event){
       titletable .push($(this).attr('title'));
       loadedImages++; 

       if (loadedImages == totalImages)
           $.each(titletable, function(i, v) {
              $('.someclass').append("<li>" + i + ": " + v + "</li>");
           }); 
});

我保留当前加载图像的数量，当所有图像都加载完毕时，我正在使用数组。