今天看到一个面试题是关于加载img图片的，所以需要记录一下。 其实只要知道图片什么时候加载就可以解决这个问题。
通过事件判断Img标签加载完成
实现逻辑：新建一个Image对象实例，为实例对象设置src属性等，将此实例对象添加到事件中的父元素中，然后移除图像地址数组中的第一个元素，继续调用此方法，直到图像地址被存储。 数组为空。
代码
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();
cript>达到效果
添加后，效果更加明显。 我这里加了500毫秒的延迟（录屏软件只支持录制8秒……）
其实我在网上也看到了一个答案，就是通过事件来实现监控，于是我在本地调试了一下，发现无法实现。 img实例对象上没有这样的属性方法。 检查MDN后发现，目前只有对象和对象中存在属性，但其他元素不存在此属性。
因此，对于其他元素，需要谨慎使用事件。
不过，目前我的电脑上只有两个浏览器，测试覆盖率并不完整，所以我的上述结论可能还需要进一步验证。 有兴趣的小伙伴可以调试一下~
延伸知识：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 = ``;
const dom = document.createElement('div');
dom.innerHtml = img;答：会问。 如图所示：
是否可以通过设置css属性来禁止发送图片请求资源？ 设置img标签的样式：none或：隐藏img标签并阻止发送请求。
或者
将图像设置为元素的背景图像，但该元素不存在，会阻止发送请求。
'en'>
ta charset='UTF-8'>
.test {
height: 200px;
background-image: url('http://eb118-file.cdn.bcebos.com/upload/39148b2a545b48bf9b4ee95fd1b7f1eb_1515564089.png?');
}
当DOM文档中不存在测试元素时，即使设置了背景图片，也不会发送请求。 仅当测试元素存在时才会发送请求。
另外，这个例子其实有点不恰当。 img标签和-image有本质的区别。 一种属于HTML标签，另一种属于CSS样式，加载机制和解析顺序也不同。
一个完整的页面是由js、html、css组成的。 根据解析机制，首先会解析html元素。 虽然css样式放在head标签中，但并不代表会先加载。 它只会等到html文档加载完成后才会执行。 img 标签属于网页内容，因此在解析和渲染网页时，img 标签将先于 css 样式表加载。
