浅谈javascript实现图片预加载

    使用图片预加载可以提高用户体验，特别是要显示一张大图的时候尤其有用，这样一是可以减少请求次数，另一方面还可以加快图片的显示速度，实现的方法就是通过浏览器的缓存原理，如果返回的status code 是200说明客户端请求成功，如果status code是304说明文件已经在浏览器中缓存，服务器告诉客户端，原来缓存的文档还可以继续使用，不会再从服务器发送请求，当然要强制发送请求那也是可以的，一会再说。

   首先来看一段实现图片预加载的代码：

var imgLoad=function(url,callback){
 var img=new Image();
  img.src=url;
  if(img.complete){
    callback(img.width,img.height); }
  else{
    img.onload=function(){
  callback(img.width,img.height)}}
}

function callback(width,height){
console.log("width:"+width,"height:"+height)
};

imgLoad('http://img02.taobaocdn.com/tps/i2/T1iQhUXnxpXXXXXXXX-171-48.png',callback);
// 输出 width:171 height:48

  上面就是一个完整实现图片预加载的代码，随时奉命，只需你一个指令，第二次请求该图片变不会再次发送请求，浏览器会告诉你直接在我这里读取就可以了，这样就能更快速的把图片资源呈现给用户，不过有的时候可能要强制发送请求，一般的做法都是在url后面加上一个时间搓（url+=new Date().getTime()），这样便会清除缓存再次发送请求到服务端。
   上面的代码其实还有一个不进人意的地方，就是我只有当图片全部加载完才能知道图片的实际高宽。然后更多的时候我们是采取先留出图片的高宽再加载以不至于在使用IE浏览器加载图片的时候出现一个大大的红叉，如想更多了解可以参考博客http://www.oschina.net/question/54371_35740里面说的比较全。

我所写的博客均是个人理解，对与不对，全与不全，都希望批评指正，互相学习，共同进步。