jquery延迟加载

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

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

html代码如下：

 

 

 

 





  1 <!doctype html>
  2 <html>
  3 <head>
  4 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  5 <script type="text/javascript">
  6 
  7 $(document).ready(function(){
  8 var body = $("body");
  9 var offset = null;
 10 var src = null;
 11 //获取当前窗口的可见高度
 12 var windowHeigth = $(window).height();
 13 //获取当前窗口的可见宽度
 14 var windowWidth = $(window).width();
 15     body.find("img").each(function(){    
 16         //获取图片的src属性
 17         src = $(this).attr("alt");
 18         //获取图片的绝对位置
 19         offset = $(this).offset();
 20         if(offset.left >= $(window).scrollLeft() && offset.top >= $(window).scrollTop() && offset.left <= ($(window).scrollLeft() + windowWidth) && offset.top <= ($(window).scrollTop() + windowHeigth)){
 21             //先隐藏 再淡入
 22             $(this).css("display","none");
 23             $(this).attr("src",src).removeAttr("alt").fadeIn("slow");
 24         }
 25     });
 26 
 27 
 28 });
 29 
 30 $(window).on("scroll",function(){
 31 var body = $("body");
 32 var offset = null;
 33 var src = null;
 34 //获取当前窗口的可见高度
 35 var windowHeigth = $(window).height();
 36 //获取当前窗口的可见宽度
 37 var windowWidth = $(window).width();
 38     body.find("img").each(function(){
 39     //获取图片的src2属性
 40     src = $(this).attr("alt");
 41         if(src){
 42         //获取图片的绝对位置
 43         offset = $(this).offset();
 44         if(offset.left >= $(window).scrollLeft() && offset.top >= $(window).scrollTop() && offset.left <= ($(window).scrollLeft() + windowWidth) && offset.top <= ($(window).scrollTop() + windowHeigth)){
 45             //先隐藏 再淡入
 46             $(this).css("display","none");
 47             $(this).attr("src",src).removeAttr("alt").fadeIn("slow");
 48         }
 49         } 
 50     });
 51 
 52 });
 53 
 54 
 55 </script>
 56 
 57 <style>
 58 #test{width:180px;float:left;}
 59 #test img{width:180px;margin-top:20px;height:100px;float:left;color:#FFF;}
 60 .a{width:2000px;height:200px;float:left;}
 61 </style>
 62 
 63 
 64 </head>
 65 <body>
 66 <div id="test">
 67   <img  alt="http://img0.bdstatic.com/img/image/shouye/mxly-9537473768.jpg"/>
 68   <div class="a"></div>
 69   <img  alt="http://img0.bdstatic.com/img/image/shouye/mcpwb-9530134528.jpg"/>
 70   <img  alt="http://img0.bdstatic.com/img/image/shouye/shouyegx2b.jpg"/>
 71   <img  alt="http://img0.bdstatic.com/img/image/shouye/gxxhbjdl-10011146040.jpg"/>
 72   <img  alt="http://img0.bdstatic.com/img/image/shouye/sylomo-9367181004.jpg"/>
 73   <img  alt="http://img0.bdstatic.com/img/image/shouye/qcqctj-9902962988.jpg"/>
 74   <img  alt="http://img0.bdstatic.com/img/image/shouye/qcbaoma3.jpg"/>
 75   <img  alt="http://img0.bdstatic.com/img/image/shouye/lypjd54.jpg"/>
 76   <img  alt="http://img0.bdstatic.com/img/image/shouye/sjjdsj-4855163457.jpg"/>
 77   <img  alt="http://imgstatic.baidu.com/img/image/f9dcd100baa1cd114a9ecc2ebb12c8fcc3ce2d97.jpg"/>
 78   <img  alt="http://img0.bdstatic.com/img/image/shouye/jjcy-9567536987.jpg"/>
 79    <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>
 80   <img  alt="http://img0.bdstatic.com/img/image/shouye/jjct-10067496396.jpg"/>
 81   <img  alt="http://img1.bdstatic.com/img/image/364d6ca7bcb0a46f21f6421031ef4246b600c33ae62.jpg"/>
 82   <img  alt="http://img0.bdstatic.com/img/image/shouye/lypjd54.jpg"/>
 83   <img  alt="http://img0.bdstatic.com/img/image/shouye/bzxingk.jpg"/>
 84     <div class="a"></div> <div class="a"></div> <div class="a"></div>
 85   <img  alt="http://img.baidu.com/img/image/fjbz.jpg"/>
 86   <img  alt="http://img0.bdstatic.com/img/image/shouye/bzdwbz-9448009724.jpg"/>
 87   <img  alt="http://img0.bdstatic.com/img/image/shouye/bzwmyj-9631167648.jpg"/>
 88   <img  alt="http://img0.bdstatic.com/img/image/shouye/dongmanyinhun-9583558925.jpg"/>
 89   <img  alt="http://img0.bdstatic.com/img/image/shouye/dmhyrz-9420648415.jpg"/>
 90   <img  alt="http://img0.bdstatic.com/img/image/shouye/dmzxh-11569510639.jpg"/>  <img  alt="http://img0.bdstatic.com/img/image/shouye/bzxingk.jpg"/>
 91   <img  alt="http://img.baidu.com/img/image/fjbz.jpg"/>
 92   <img  alt="http://img0.bdstatic.com/img/image/shouye/bzdwbz-9448009724.jpg"/>
 93   <img  alt="http://img0.bdstatic.com/img/image/shouye/bzwmyj-9631167648.jpg"/>
 94     <div class="a"></div> <div class="a"></div> <div class="a"></div>
 95   <img  alt="http://img0.bdstatic.com/img/image/shouye/dongmanyinhun-9583558925.jpg"/>
 96   <img  alt="http://img0.bdstatic.com/img/image/shouye/dmhyrz-9420648415.jpg"/>
 97   <img  alt="http://img0.bdstatic.com/img/image/shouye/dmzxh-11569510639.jpg"/>
 98 
 99 </div>
100 
101 </body>
102 <html>






 











            

            
posted @ 
2014-05-06 17:22 
子慕大诗人 
阅读(990) 
评论(2) 
编辑 
收藏 
举报