js如何控制一次只加载一张图片，加载完成后再加载下一张_js 如何做到图片加载完一张立刻显示,剩余的类似-CSDN博客

本文链接：https://blog.csdn.net/cpa0701/article/details/139775493

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>

在这里插入图片描述

拓展

img标签什么时候发送请求

HTML文档渲染解析，如果解析到img标签的src时，浏览器就会立刻开启一个线程去请求图片资源。
动态创建img标签，设置src属性时，即使这个img标签没有添加到dom元素中，也会立即发送一个请求。

// 例1：
const img = new Image();
img.src = 'http://xxxx.com/x/y/z/ccc.png';

上面的代码如果运行起来后，就会发送请求。如图：

再看一个例子：创建了一个div元素，然后将存放img标签元素的变量添加到div元素内，而div元素此时并不在dom文档中，页面不会展示该div元素，那么浏览器会发送请求吗？

// 例2：
const img = `<img src='http://xxxx.com/x/y/z/ccc.png'>`;
const dom = document.createElement('div');
dom.innerHTML = img;

答案：会请求。如图：
在这里插入图片描述

通过设置css属性能否做到禁止发送图片请求？

给img标签设置样式display:none或者visibility: hidden，隐藏img标签，无法做到禁止发送请求。
将图片设置为元素的背景图片，但此元素不存在，可以做到禁止发送请求。

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title></title>
    <style>
        .test {
            height: 200px;
            background-image: url('http://eb118-file.cdn.bcebos.com/upload/39148b2a545b48bf9b4ee95fd1b7f1eb_1515564089.png?');
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>