在前端设计时，为了让某县页面的图片即使缓存到浏览器中，一般使用预加载技术，但更为确切的应该称为异步加载，因为对线程不会造成阻塞。

图片是网站开发部分中的静态资源，当浏览器网络请求到图片时会首先缓存，然后根据url hash值载入到<img>中

相关链接 

核心代码

    
     		function loadImage(id,src,callback){var imgloader= new window.Image();	//当图片成功加载到浏览器缓存imgloader.onload =function(evt)  {    if(typeof(imgloader.readyState)=='undefined')    {       imgloader.readyState = 'undefined';    }    		//在IE8以及以下版本中需要判断readyState而不是complete    if ((imgloader.readyState=='complete'||imgloader.readyState=="loaded")||imgloader.complete)     {      callback({'msg':'ok','src':src,'id':id});    }else{      imgloader.onreadystatechange(evt);    }};//当加载出错或者图片不存在imgloader.onerror = function(evt){  callback({'msg':'error','id':id});}//当加载状态改变                       imgloader.onreadystatechange = function(e){     //此方法只有IE8以及一下版本会调用		} imgloader.src=src;   }
    

深情的测试一下吧。

  
        
    		 
    
     
      		function loadImage(id,src,callback){   var imgloader= new window.Image();	//当图片成功加载到浏览器缓存  imgloader.onload =function(evt)    {    if(typeof(imgloader.readyState)=='undefined')     {	 imgloader.readyState = 'undefined';     }	//在IE8以及以下版本中需要判断readyState而不是complete   if ((imgloader.readyState=='complete'||imgloader.readyState=="loaded")||imgloader.complete)      {       //console.log('width='+imgloader.width+',height='+imageloader.height);//读取原始图片大小      callback({'msg':'ok','src':src,'id':id});   }else{     imgloader.onreadystatechange(evt);   }};imgloader.onerror = function(evt){   callback({'msg':'error','id':id});};                        imgloader.onreadystatechange = function(e) {  //此方法只有IE8以及一下版本会调用		 }; imgloader.src=src;}var loadResult = function(data){   data =   data ||{} ;   if(typeof(data.msg)!='undefined')   {	if(data.msg=='ok')	{             //这里使用了id获取元素，有点死板，建议读者自行扩展为css 选择符             document.getElementById(''+data.id).src=data.src;                   }else{	    //这里图片加载失败，我们可以显示其他图片，防止大红叉	    document.getElementById(''+data.id).src='unload.png';	}   }}var surl = 'http://web.2008php.com/2014_Website_appreciate/2014-10-31/20141031133134.jpg'; loadImage('display_images',surl,loadResult);	
     
    

注意：这种用法过于简单，没有发挥出性能，请读者自行改造后，预加载20张1024*780图片，然后自动播放。如果是预加载的，播放时看不见卡顿或显示不完全的现象。

--------------------------------------------------------------------------------

目前，很多主流的图片展示库如 lightbox.js,facybox.js等底层就是依据这种原理实现的，有兴趣的读者可以使用一下这些第三方框架。

try doing it.