使用each和image.onload保持数组的顺序

retain order of array using each and image.onload

本文关键字：数组 顺序 onload each image 使用      更新时间：2023-09-26

我尝试使用image。加载和有一些异步问题。图像数组将得到不一致的数组顺序。我检查了我的数据库，它不会导致错误，然后我意识到这个异步问题与image.onload。有人有处理这种情况的经验吗?

$(data).each(function(i, val) {
  var albumPhoto = '';
  albumPhoto = 'https://example.com/' + this.photo;
  var temp_img = new Image(),
    temp_img.src = albumPhoto;
  temp_img.onload = function() {
    images.push(albumPhoto);
  }
})

不要使用push来填充您的images数组，而是使用jQuery提供的索引(i)。

。: change images.push(albumPhoto) to images[i] = albumPhoto

这是有效的，因为在实例化一个空数组(images = [])之后，您可以将任何索引设置为一个值。其他索引保持不设置。

下面是一个示例，显示了它看起来像什么(在香草js中，使用超时而不是图像加载)

var target = [],
    source = [1,2,3,4,5];
source.forEach(function(nr, index) {
  setTimeout(function() {
    target[index] = nr * 5;
    console.log(JSON.stringify(target));
  }, Math.random() * 500);
});

将所有图像放入数组中，然后在出现错误时将其删除。

$(data).each(function(i, val) {
  var albumPhoto = 'https://example.com/' + val.photo;
  var temp_img = new Image();
  temp_img.src = albumPhoto;
  images.push(albumPhoto);
  temp_img.onerror = function() {
    var src = this.src;
    var index = images.indexOf(src);
    images.splice(index, 1);
  }
});

相关文章：