@Js如何控制一次只加载一张图片，加载完成后再加载下一张 - 掘金

通过onload事件判断Img标签加载完成

实现逻辑：新建一个Image对象实例，为实例对象设置src属性等，在onload事件中添加此实例对象到父元素中，然后将图片地址数组中的第一个元素剔除，继续调用此方法直到存储图片地址的数组为空。

代码

const imgArrs = [...]; // 图片地址
const content = document.getElementById('content');
const loadImg = () => {
  if (!imgArrs.length)  return;
  const img = new Image(); // 新建一个Image对象
  img.src = imgArrs[0];
  img.setAttribute('class', 'img-item');
  img.onload = () => { // 监听onload事件
    // setTimeout(() => { // 使用setTimeout可以更清晰的看清实现效果
      content.appendChild(img);
        imgArrs.shift();
        loadImg();
    // }, 1000);
  }
  img.onerror = () => {
    // do something here
  }
}
  loadImg();
 
</script>

实现效果

加上setTimeout后，看到的效果更加明显,我这里加了500毫秒的延迟(录屏软件只支持录制8秒的时间…)

其实我在网上还看到了一种答案，通过onreadystatechange事件实现监听，于是在我本地调试了一下，发现并不能实现，img实例对象上并没有这个属性方法。查了查MDN，发现目前仅有XmlHttpRequest对象和Document对象中存在onreadystatechange属性，而对于其它元素onreadystatechange此属性并不存在。

因此对于其它元素需要慎用onreadystatechange事件。

不过我电脑上目前只有Chorme和Safari两种浏览器，对于onreadystatechange测试的覆盖面不全，所以我上面的结论可能还需要进一步验证才行，感兴趣的掘友可以调试一下~。