SOURCE

console 命令行工具 X clear

                    
>
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", () => {
            //    console.log(`进度:${++index/list.length*100}%`);
            resolve(true);
        })
        img.addEventListener("err", () => {
            // console.log(`加载失败`);
            reject(false);
        })
        // setTimeout(()=>{
        //      reject(false);
        // },5000)
    })
}

_load();



// list.forEach(item=>{
//     let img = document.createElement("img");
//     img.src = item;
//     img.addEventListener("load",()=>{
//         console.log(`进度:${++index/list.length*100}%`);
//     })
//     img.addEventListener("err",()=>{
//         console.log(`加载失败`);
//     })
// })
<!-- <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;
}