js图片预加载

打开网页时，最慢最耗时的就是加载图片。而根据图片大小的不同，加载的时间也不一样。这是就会出现图片一部分加载呈现出来而另一部分还是空白的情况。从整体的体验来讲，这使得用户体验大大的降低了。

而图片的预加载能很好的解决这一问题。

这时，一般都会用到js里边的Image对象。
function preLoadImg(url) {
 var oImg = new Image();
 oImg.src = url;
}

window.onload=function (){

　　var oDiv=document.getElementById("div1");
　　var loading=document.getElementById("loading");       //一个loading页面

　　var arrImg=[];
　　for (var i=0; i<图片数量; i++){

　　　　preLoadImg(url);

　　　　oImg.onload=function (){

　　　　　　arrImg.push(this);                                       //已经加载的就推入数组
　　　　　　loading.innerHTML="已加载"+arrImg.length+"/"+图片数量;                      //计算预加载了百分之多少
　　　　　　if (arrImg.length==arr.length){                  //加载百分百
　　　　　　　　loading.style.display="none";                 //loading也隐藏
　　　　　　　　for (var i=0; i<arrImg.length;i++){

　　　　　　　　　　oDiv.appendChild(arrImg[i]);          //用DOM将图片插入页面中
　　　　　　　　}
　　　　　　}
　　　　}
　　}
}

 

总结：整个预加载过程中图片早已经被加载完成，最后由DOM一起插入页面中显示出来，改善页面的用户体验。