img的lowsrc及图片预载思考

img的lowsrc是指当网速比较慢时，先加载一个小的图片，等大图加载完了再显示大图。

虽然现有的网速已经很快了，但是lowsrc的思想在提高用户体验上还是有很大好处，尤其是图片比较大的时候。

当然img的lowsrc没有出现在Web标准里面，那么如何去模拟呢？

主要有两种形式：

一、给img一个背景色或背景图片，这样也能达到类似的效果，虽然不是最理想的；

二、使用JS，实现上应该还是是比较容易的，以下是我的一种写法（当然不同的需求有不同的写法）：

 
 

  
  

   
   

    
    Code   
    
    View
    
    Print
    
    
   
   
  
  
  
  
<script type="text/javascript">  
function load_img(url,url_s,o) {  
    var img = new Image();  
    img.src = url;  
    o.src=url_s;  
   if (img.complete) {  
        o.src=img.src;  
        return;  
    }  
    img.onload = function () {  
        o.src=img.src;  
    };  
};  
</script>  
<input type="button" value="开始加载" onclick="load_img('http://blog.xhlv.com/wp-content/uploads/2008/09/20080927_02.jpg','http://blog.xhlv.com/wp-content/uploads/2008/09/20080927_01.jpg',document.getElementById('img'))" />  
<div><img src="" width="500" height="321" id="img"/></div>  
 
 
 
 
http://blog.xhlv.com/index.php/2008/09/27/img-preload-lowsrc/