创建图像对象时,可以使用"完整"属性或"onload"方法知道何时完全加载,然后,此图像已使用一段时间处理(例如调整大小),在大文件中可能需要几秒钟.
如何知道浏览器何时完成加载后处理图像？
编辑:在示例中可以看到"完整"消息和图像外观之间的滞后,我想避免这种情况.
使用"onload"方法的示例:
var BIGimage;
putBIGimage();
function putBIGimage(){
BIGimage=document.createElement("IMG");
BIGimage.height=200;
BIGimage.src="http://orig09.deviantart.net/5e53/f/2013/347/f/d/i_don_t_want_to_ever_leave_the_lake_district_by_martinkantauskas-d6xrdch.jpg";
BIGimage.onload=function(){waitBIGimage();};
}
function waitBIGimage(){
console.log("Complete.");
document.body.appendChild(BIGimage);
}使用"完整"属性的示例:
var BIGimage;
putBIGimage();
function putBIGimage(){
BIGimage=document.createElement("IMG");
BIGimage.height=200;
BIGimage.src="http://orig09.deviantart.net/5e53/f/2013/347/f/d/i_don_t_want_to_ever_leave_the_lake_district_by_martinkantauskas-d6xrdch.jpg";
waitBIGimage();
}
function waitBIGimage(){
if (!BIGimage.complete){
console.log("Loading...");
setTimeout(function(){
waitBIGimage();
},16);
} else {
console.log("Complete.");
document.body.appendChild(BIGimage);
}
}编辑:谢谢@Kaiido的回应我做了这个sollution等待图像处理.
var imagesList=["https://omastewitkowski.files.wordpress.com/2013/07/howard-prairie-lake-oregon-omaste-witkowski-owfotografik-com-2-2.jpg",
"http://orig03.deviantart.net/7b8d/f/2015/289/0/f/0ffd635880709fb39c2b69f782de9663-d9d9w6l.jpg",
"http://www.livandiz.com/dpr/Crater%20Lake%20Pano%2016799x5507.JPG"];
var BIGimages=loadImages(imagesList);
onLoadImages(BIGimages,showImages);
function loadImages(listImages){
var image;
var list=[];
for (var i=0;i<listImages.length;i++){
image=document.createElement("IMG");
image.height=200;
image.src=listImages[i]+"?"+Math.random();
list.push(image);
}
return list;
}
function showImages(){
loading.style.display="none";
for (var i=0; i<BIGimages.length;i++){ …javascript ×1