图片预加载的三种方法

lazyload插件

lazyload是jquer下的一个实现预加载的插件，cdn为：

http://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.js

jquery的cdn：

http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

先引入文件

操作如下

 $(function (){  $("img").lazyload({  placeholder:"./loading.gif",  effect:"fadeIn",  event:"mouseover"  })  })

placeholder是设置加载时的的loading图片

 effect是设置加载时的渐入效果

 event是采用什么事件触发加载，常用的是scroll mouseover click 等

 关于lazyload的更多知识，可以上官网查看  Lazy Load Remastered

原生js

　　其中传入参数必须为一个数组，数组里面存放的是图片的src

 function preimg(arr){  var img=[],  for(var i=0;i<arr.length;i++){  img[i]=new Image();  img[i].src=arr[i];  }

preimg(["http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg","http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg","http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg"])

 Image对象有两个常用的事件句柄，onload与onerror

ajax

 ajax预加载的原理就是，先加载图片文件的js和css，再给Image对象添加src，一共三个文件pre2.html preimgjs.js preimgcss.css

 pre2.html

  window.onload=function(){  setTimeout(function (){  var xhr=new XMLHttpRequest();  //js  xhr.open("GET","./preimgjs.js");  xhr.send(null);  //css  var xhr2=new XMLHttpRequest();  xhr2.open("GET","./preimgcss.css");  xhr2.send(null);  //img  new Image().src = "http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg";  },1000);   }  " _ue_custom_node_="true">  　　 　　　

 preimgjs.js

 setTimeout(function (){   setTimeout({  var oHead=document.getElementsByTagName('head');   var oCss=document.createElement("link");  oCss.rel="stylesheet";  oCss.href="./preimgcss.css";   var oJs=document.createElement("script");  oJs.src="./preimgjs.js";   oHead.appendChild(oCss);  oHead.appendChild(oJs);   new Image().src="http://ubmcmm.baidustatic.com/media/v1/0f000KLR1mFt_P41d9V_j0.jpg"   },1000)  },1000)

preimgcss.css只是设定img的样式就不上传了

 为什么在html文件中使用ajax加载js和css，js和css的加载不会影响当前预加载页面。

总结

 本质上后两种方法都是一样的，都是先建立一个Image对象，给img对象依次赋地址， 达到预加载的情况