Javascript JS动态加载响应图像，并查看它们何时加载

背景：

有一个有很多很多图片的网站。 然而，用户只需要立即接收前15幅图像

document.addEventListener（“DOMContentLoaded”，function（））
{
函数加载_3（）
{
document.getElementById（“左”）.innerHTML+=“

全部完成：）

”；
}
函数加载_2（）
{
document.getElementById（“左”）.innerHTML+=“

确定-图像16-30也已成功加载！
现在加载剩余的5个图像！
”；
var last_divs=Array.prototype.slice.call（document.querySelectorAll（“[data last id]”）；
最后一个分区forEach（函数（元素）
{
element.setAttribute（'id'，element.getAttribute（'data-last-id'）；
document.getElementById（“左”）.innerHTML++=“id=””+element.getAttribute（'data-last-id'）++“已成功设置！
”；
});
移除EventListener（“加载”，加载2）；
window.addEventListener（“加载”，加载3）；
}
函数加载_1（）
{
document.getElementById（“左”）.innerHTML+=“正常-图像1-15已成功加载！

”；
var divs=Array.prototype.slice.call（document.querySelectorAll（'[dataid]'）；
divs.forEach（函数（元素）
{
element.setAttribute（'id'，element.getAttribute（'data-id'）；
document.getElementById（“左”）.innerHTML+='id=“'+element.getAttribute（'data-id'）++'”已成功设置！
'；
});
window.removeEventListener（“加载”，加载1）；
window.addEventListener（“加载”，加载2）；
}
window.addEventListener（“加载”，加载1）；
});
*
{
填充：0px；
边际：0px；
边框样式：无；
框大小：边框框；
}
html，正文
{
宽度：100%；
身高：100%；
}
#左
{
位置：绝对位置；
宽度：400px；
左：0px；
顶部：0px；
底部：0px；
背景色：#ffcc00；
填充：20px；
}
#对
{
位置：绝对位置；
左：400px；
顶部：0px；
右：0px；
底部：0px；
背景色：#eeeeee；
填充：20px；
}
#一个{背景图像：url(https://placehold.it/999x999/ffcc00/cc33ff); }
#两个{背景图像：url(https://placehold.it/999x999/ff0000/000000); }
#三{背景图片：url(https://placehold.it/999x999/00cc00/33cccc); }
#四{背景图片：url(https://placehold.it/999x999/330033/ff33ff); }
#五{背景图片：url(https://placehold.it/999x999/ffcccc/0033ff); }
#六{背景图片：url(https://placehold.it/999x999/bbcc11/dddd00); }
#七{背景图片：url(https://placehold.it/999x999/0033bb/222bbb); }
#八{背景图片：url(https://placehold.it/999x999/2211bb/00bb11); }
#九{背景图片：url(https://placehold.it/999x999/ffcc00/22ccff); }
#十{背景图片：url(https://placehold.it/999x999/ffcc00/33ccff); }
#十一{背景图片：url(https://placehold.it/999x999/f0cc00/333333); }
#十二{背景图片：url(https://placehold.it/999x999/f1c20b/c13bf2); }
#十三{背景图片：url(https://placehold.it/999x999/f0cd00/cf33f0); }
#十四{背景图片：url(https://placehold.it/999x999/ff0b01/0001ff); }
#十五{背景图片：url(https://placehold.it/999x999/ffbb00/dd31ff); }
#十六{背景图片：url(https://placehold.it/999x999/ffd100/cc33ff); }
#十七{背景图片：url(https://placehold.it/999x999/ffec10/000000); }
#十八{背景图片：url(https://placehold.it/999x999/fbccfd/ff33ff); }
#十九{背景图片：url(https://placehold.it/999x999/ccccff/cf33f0); }
#二十{背景图片：url(https://placehold.it/999x999/00ccee/cc33ff); }
#二十一{背景图片：url(https://placehold.it/999x999/ddccee/dddd00); }
#二十二{背景图片：url(https://placehold.it/999x999/bbee00/cc33ff); }
#二十三{背景图片：url(https://placehold.it/999x999/11c000/c13bf2); }
#二十四{背景图片：url(https://placehold.it/999x999/44c200/00bb11); }
#二十五{背景图片：url(https://placehold.it/999x999/22ca00/33cccc); }
#二十六{背景图片：url(https://placehold.it/999x999/bbcf00/cc33ff); }
#二十七{背景图片：url(https://placehold.it/999x999/ffbb00/00bb11); }
#二十八{背景图片：url(https://placehold.it/999x999/eedd00/cc33ff); }
#二十九{背景图片：url(https://placehold.it/999x999/00ff00/33ccff); }
#三十{背景图片：url(https://placehold.it/999x999/220000/c13bf2); }
.testdiv
{
宽度：30px；
高度：30px；
溢出：隐藏；
保证金：5px；
显示：内联块；
字体大小：粗体；
字体大小：30px；
颜色：#ffffff；
文本对齐：居中；
线高：30px；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
到目前为止，我就是这么做的：


console.clear（）；
checkBackgroundLoad（）；
var imgSrc=[]；
document.body.addEventListener（'domsubtremodified'，function（）{
var imgs=document.getElementsByTagName（“IMG”）；
//控制台日志（imgs）；
对于（变量i=0；i-1）返回；
imgSrc.push（src）；
如果（imgs[i].complete）继续；
imgs[i].onload=function（）{console.log（“加载的映像”）；}
imgs[i].onerror=function（）{console.log（“加载映像失败”）；}
}
checkBackgroundLoad（）；
}，假）；
函数checkBackgroundLoad（）{
var all=document.getElementsByTagName（“*”）；
对于（变量i=0；i