顺序加载图片方法

普通图片加载
// 普通图片加载
var imglist = [‘https://avatars3.githubusercontent.com/u/34082804?s=460&v=4′,’./img/2.jpg’,’https://avatars3.githubusercontent.com/u/34082804?s=460&v=4′,’https://github.githubassets.com/images/search-key-slash.svg’,’./img/2.jpg’,’https://avatars3.githubusercontent.com/u/34082804?s=460&v=4′];
loadImg(imglist);

function loadImg(imglist){
var imgarr = [];
var curimg = 0;
var body = document.getElementsByTagName(‘body’);

for(var i =0;i<imglist.length;i++){

var img = new Image();
img.src = imglist[i];
img.style.width = ‘200px’;
img.id = i;
img.onload = function(){
console.log(‘show ‘+this.id)
}
imgarr.push(img);
body[0].appendChild(img);
}
}

顺序加载图片方法 1
// 顺序加载图片方法 1、
function loadImg(imglist){
var imgarr = [];
var curimg = 0;
var body = document.getElementsByTagName(‘body’);

for(var i =0;i<imglist.length;i++){

var img = new Image();
img.src = imglist[i];
img.style.width = ‘200px’;
img.onload = function(){
curimg +=1;
if(curimg < imgarr.length){
body[0].appendChild(imgarr[curimg]);
console.log(‘show ‘+curimg)
}

}
imgarr.push(img);
}
body[0].appendChild(imgarr[0]);
}

promise 方法

//promise 方法

var imglist = [‘https://avatars3.githubusercontent.com/u/34082804?s=460&v=4′,’./img/2.jpg’,’https://avatars3.githubusercontent.com/u/34082804?s=460&v=4′,’https://github.githubassets.com/images/search-key-slash.svg’,’./img/2.jpg’,’https://avatars3.githubusercontent.com/u/34082804?s=460&v=4′];

var body = document.getElementsByTagName(‘body’);

function loadimg(i){
var img = new Image();
img.src = imglist[i];
img.style.width = ‘200px’;
img.id = i;
body[0].appendChild(img);
return new Promise(function(resolve,reject){
img.onload = function(){
console.log(‘show ‘+this.id)
resolve(i+1)
};
})
}

var a = Promise.resolve(0);

var i=0;
while(i<imglist.length-1){
a = a.then(function(i){
console.log(‘load ‘+i)
return loadimg(i)
});
i++;
}

async 方法
//async 方法
async function loadImages(imglist){
for(var i =0; i<imglist.length; i++){
console.log(‘load ‘+i)
await loadImg(i); // 执行完成之后才走下一步；
console.log(‘finish ‘+i);
}
}

async function loadImg(i){
var img = new Image();
img.src = imglist[i];
img.style.width = ‘200px’;
img.id = i;
body[0].appendChild(img);
return new Promise(function(resolve,reject){
img.onload = function(){
console.log(‘show ‘+this.id)
resolve(i+1);
}
})
}