共计 2081 个字符,预计需要花费 6 分钟才能阅读完成。
普通图片加载
// 普通图片加载
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);
}
})
}