jquery延迟加载

jquery实现图片延时加载，实现原理：不设置img的src地址，把地址存在img的alt中，当img标签出现在可视区域，alt值传给src。为避免看到替换文本alt，把字体的颜色设置为背景的颜色，如果背景不是单一色就给个相近色吧，我把值存在alt里是想兼容IE等浏览器。

如果各位有更好的办法，欢迎留言！

html代码如下：

 

 <!doctype html>
 <html>
 <head>
 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 <script type="text/javascript">

 $(document).ready(function(){
 var body = $("body");
 var offset = null;
 var src = null;
 //获取当前窗口的可见高度
 var windowHeigth = $(window).height();
 //获取当前窗口的可见宽度
 var windowWidth = $(window).width();
     body.find("img").each(function(){
         //获取图片的src属性
         src = $(this).attr("alt");
         //获取图片的绝对位置
         offset = $(this).offset();
         if(offset.left >= $(window).scrollLeft() && offset.top >= $(window).scrollTop() && offset.left <= ($(window).scrollLeft() + windowWidth) && offset.top <= ($(window).scrollTop() + windowHeigth)){
             //先隐藏 再淡入
             $(this).css("display","none");
             $(this).attr("src",src).removeAttr("alt").fadeIn("slow");
         }
     });

 });

 $(window).on("scroll",function(){
 var body = $("body");
 var offset = null;
 var src = null;
 //获取当前窗口的可见高度
 var windowHeigth = $(window).height();
 //获取当前窗口的可见宽度
 var windowWidth = $(window).width();
     body.find("img").each(function(){
     //获取图片的src2属性
     src = $(this).attr("alt");
         if(src){
         //获取图片的绝对位置
         offset = $(this).offset();
         if(offset.left >= $(window).scrollLeft() && offset.top >= $(window).scrollTop() && offset.left <= ($(window).scrollLeft() + windowWidth) && offset.top <= ($(window).scrollTop() + windowHeigth)){
             //先隐藏 再淡入
             $(this).css("display","none");
             $(this).attr("src",src).removeAttr("alt").fadeIn("slow");
         }
         }
     });

 });

 </script>

 <style>
 #test{width:180px;float:left;}
 #test img{width:180px;margin-top:20px;height:100px;float:left;color:#FFF;}
 .a{width:2000px;height:200px;float:left;}
 </style>

 </head>
 <body>
 <div id="test">
   <img  alt="http://img0.bdstatic.com/img/image/shouye/mxly-9537473768.jpg"/>
   <div class="a"></div>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/mcpwb-9530134528.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/shouyegx2b.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/gxxhbjdl-10011146040.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/qcqctj-9902962988.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/qcbaoma3.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/lypjd54.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/sjjdsj-4855163457.jpg"/>
   <img  alt="http://imgstatic.baidu.com/img/image/f9dcd100baa1cd114a9ecc2ebb12c8fcc3ce2d97.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/jjcy-9567536987.jpg"/>
    <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div> <div class="a"></div>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/jjct-10067496396.jpg"/>
   <img  alt="http://img1.bdstatic.com/img/image/364d6ca7bcb0a46f21f6421031ef4246b600c33ae62.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/lypjd54.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/bzxingk.jpg"/>
     <div class="a"></div> <div class="a"></div> <div class="a"></div>
   <img  alt="http://img.baidu.com/img/image/fjbz.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/bzdwbz-9448009724.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/bzwmyj-9631167648.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/dongmanyinhun-9583558925.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/dmhyrz-9420648415.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/dmzxh-11569510639.jpg"/>  <img  alt="http://img0.bdstatic.com/img/image/shouye/bzxingk.jpg"/>
   <img  alt="http://img.baidu.com/img/image/fjbz.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/bzdwbz-9448009724.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/bzwmyj-9631167648.jpg"/>
     <div class="a"></div> <div class="a"></div> <div class="a"></div>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/dongmanyinhun-9583558925.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/dmhyrz-9420648415.jpg"/>
   <img  alt="http://img0.bdstatic.com/img/image/shouye/dmzxh-11569510639.jpg"/>

 </div>

 </body>
 <html>