首页 > 代码库 > js图片预加载

js图片预加载

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

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

这时,一般都会用到js里边的Image对象。
function preLoadImg(url) {
 var img = new Image();
 img.src = http://www.mamicode.com/url;
}

window.onload=function (){

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

  var arrImg=[];
  for (var i=0; i<arr.length; i++){

    var oImg=new Image();
    oImg.src=http://www.mamicode.com/arr[i];

    oImg.onload=function (){

      arrImg.push(this);                                       //已经加载的就推入数组
      loading.innerHTML="已加载"+arrImg.length+"/"+arr.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一起插入页面中显示出来,改善页面的用户体验。

js图片预加载