今天看到一个面试题，是关于img图片加载方面的，有必要记录一下。其实关于这个问题，只要知道图片什么时候加载完成就能解决了。
通过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测试的覆盖面不全，所以我上面的结论可能还需要进一步验证才行，感兴趣的掘友可以调试一下~。
扩展知识
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标签，无法做到禁止发送请求。
<img src="http://xxx.com/x/sdf.png" style="display: none;">或者<img src="http://xxx.com/x/sdf.png" style="visibility: hidden;">
- 将图片设置为元素的背景图片，但此元素不存在，可以做到禁止发送请求。
<!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></body></html>
dom文档中不存在test元素时，即使设置了背景图片，也不会发送请求，只有test元素存在时才会发送请求。
另外这个例子其实有点不太贴切，img标签和background-image二者有着本质的区别。一个属于HTML标签，另一个属于css样式，加载机制和解析顺序也不同。
❝一个完整的页面是由js、html、css组成的，按照解析机制，html元素会优先解析，尽管css样式是放在head标签内的，但也不意味着它会优先加载，它只有等到html文档加载完成后才会执行。而img标签属于网页内容，所以img标签会随着网页解析渲染优先于css样式表加载出来。
❞
文章中若有描述不正确的地方，欢迎掘友们纠正~
阅读原文：https://mp.weixin.qq.com/s/3K1tksZfiAFTfRzD9Q6ZyA
该文章在 2025/1/13 10:46:29 编辑过
400 186 1886
