console
let list = [
"https://s3.jpg.cm/2020/10/28/NgstC.jpg",
"https://s3.jpg.cm/2020/10/28/NgkLR.jpg",
"https://s3.jpg.cm/2020/10/28/Ngr55.jpg",
"https://s3.jpg.cm/2020/10/28/NgE0t.jpg",
"https://s3.jpg.cm/2020/10/28/NgmUz.jpg",
]
let index = 0;
let successful_load= true;
console.log("准备加载资源...");
async function _load() {
for (; index < list.length && successful_load;) {
let loadRes = await imgLoad(list[index]);
if (loadRes) {
console.log(`进度:${++index / list.length * 100}%`);
}else{
successful_load=false;
console.log("加载失败")
}
}
}
function imgLoad(src) {
return new Promise((resolve, reject) => {
let img = document.createElement("img");
img.src = src;
img.addEventListener("load", () => {
resolve(true);
})
img.addEventListener("err", () => {
reject(false);
})
})
}
_load();
<!-- <ul>
<li><img class="lazy" data-src="https://s3.jpg.cm/2020/10/28/NgstC.jpg" alt=""></li>
<li><img class="lazy" data-src="https://s3.jpg.cm/2020/10/28/NgkLR.jpg" alt=""></li>
<li><img class="lazy" data-src="https://s3.jpg.cm/2020/10/28/Ngr55.jpg" alt=""></li>
<li><img class="lazy" data-src="https://s3.jpg.cm/2020/10/28/NgE0t.jpg" alt=""></li>
<li><img class="lazy" data-src="https://s3.jpg.cm/2020/10/28/NgmUz.jpg" alt=""></li>
</ul> -->
*{
margin: 0;
padding: 0;
list-style: 0;
}
li{
width: 50%;
padding-top: 28%;
overflow: hidden;
position: relative;
margin: 50px auto;
background-color: #ccc;
}
img{
position: absolute;
width: 100%;
top: 0;
left: 0;
}