Question

我尝试使用image.onload并遇到一些异步问题。图像数组将获得不一致的数组顺序。我检查了我的数据库它不会导致错误，然后我意识到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);

  }
})

Answer 1

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

即：将images.push(albumPhoto)更改为images[i] = albumPhoto

这是有效的，因为在实例化空数组（images = []）之后，您可以将任何索引设置为值。其他指数仍未设置。

这是一个显示它的样子的示例（在vanilla js中，超时而不是图像加载）

＆＃13;

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);
});

＆＃13;

Answer 2

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

＆＃13;

$(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);

  }
});

＆＃13;

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

2 个答案: