完善函数,实现图片的加载
function createImg(url){
createImg(url).then((value)=>{
document.body.appendChild(value);
})
};
实现方式一:
function createImg(url){
return new Promise((resolve,reject)=>{
if(url){
let imgEle=document.createElement("img");
ImgEle.src=url;
resolve(ImgEle);
}else{
reject("url is not right");
}
});
}
createImg(
"https://baibai.com/img.jpg"
).then((value)=>{
document.body.appendChild(value);
})
实现方式二:
function createImg(url){
return new Promise((resolve)=>{
const img=new Image();
img.src=url;
setTimeout(()=>{
resolve(img);
},1000);
});
}
createImg("1.jpg")
.then(function(value){
document.body.appendChild(value);
return createImg("2.jpg");
})
.then(function(value){
document.body.appendChild(value);
return createImg("3.jpg");
})
.then(function(value){
document.body.appendChild(value);
})
这个函数的作用应该是让图片有个延迟,依次加载图片的功能。但是其实还可以有如下优化。
function createImg(url,delay){
return new Promise((resolve)=>{
const img=new Image();
img.src=url;
setTimeout(()=>{
document.body.appendChild(img);
resolve();
},delay);
});
}
createImg("1.jpg",1000)
.then(function(){
return createImg("2.jpg",2000);
})
.then(function(){
return createImg("3.jpg",3000);
})
.then(function(){});