js控制一次只加载一张图片，加载完成后再加载下一张

蓝色海岛
1,298 阅读1分钟

一、浏览器是什么时候发送图片资源请求的

  1. 解析html文档，当遇到img标签的src属性时，浏览器就会开启一个线程去请求图片资源

    image.png

    image.png

  2. 动态创建img标签，设置src属性时，即使这个元素没有添加到DOM中，也会发送请求

    const img = new Image()
    img.src = 'https://www.promoplace.com/ws/ws.dll/QPic?SN=60064&P=317667168&RS=1800&I=10'

image.png

那如果创建一个div元素，将img插入div中，而此时的div并不在DOM文档中，浏览器还会发送请求吗？

    const img = "<img width='200' src='https://www.promoplace.com/ws/ws.dll/QPic?SN=60064&P=317667168&RS=1800&I=10' />"
    const div = document.createElement('div')
    div.innerHTML = img

image.png

二、通过onload事件判断img标签加载完成

效果：

动画.gif

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #content {
      background-color: darkcyan;
      padding: 10px 10px 0;
      font-size: 0;
    }

    #content img {
      width: 50px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div id="content"></div>
  <script>
    const imgList = [
      'https://www.promoplace.com/ws/ws.dll/QPic?SN=60064&P=317667168&RS=1800&I=1',
      'https://www.promoplace.com/ws/ws.dll/QPic?SN=60064&P=317667168&RS=1800&I=2',
      'https://www.promoplace.com/ws/ws.dll/QPic?SN=60064&P=317667168&RS=1800&I=3',
      'https://www.promoplace.com/ws/ws.dll/QPic?SN=60064&P=317667168&RS=1800&I=4',
      'https://www.promoplace.com/ws/ws.dll/QPic?SN=60064&P=317667168&RS=1800&I=5',
      'https://www.promoplace.com/ws/ws.dll/QPic?SN=60064&P=317667168&RS=1800&I=6',
      'https://www.promoplace.com/ws/ws.dll/QPic?SN=60064&P=317667168&RS=1800&I=10',
    ];
    const content = document.getElementById('content');
    const loadImg = () => {
      if (!imgList.length) return;
      const img = new Image();
      img.src = imgList[0];
      img.onload = () => {
        // setTimeout(() => { // 如果图片资源较小，使用setTimeout可以更清晰的看清实现效果
        content.appendChild(img);
        imgList.shift();
        console.log(imgList)
        loadImg();
        // }, 1000);
      }
      img.onerror = () => {}
    }
    loadImg();
  </script>
</body>

</html>

参考：juejin.cn/post/734016…

如果你觉得这篇文章对你有用，可以看看作者封装的库xtt-utils，里面封装了非常实用的js方法。如果你也是vue开发者，那更好了，除了常用的api，还有大量的基于element-ui组件库二次封装的使用方法和自定义指令等，帮你提升开发效率。不定期更新，欢迎交流~

avatar
文章
阅读
粉丝