标签：
js代码：
<script type="text/javascript"> $(function(){ var aLazy = $(‘.lazy‘); aLazy.each(function(i){ $(this).attr({ "opacity":0 }); }); function getSrc(){ aLazy.each(function(i){ $(this).attr(‘src‘,$(this).attr(‘data-original‘)).animate({ "opacity":1 }); }); }; function int(){ var oScrH = $(document).scrollTop(); aLazy.each(function(i){ var oEleTop = $(this).offset().top; if(oScrH+oWinH>oEleTop) { setTimeout(function(){ getSrc(); },200); } }); }; var oWinH = $(window).height(); $(window).bind(‘scroll‘,int) }); </script>
html代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>延时加载</title> <link rel="stylesheet" type="text/css" href="index.css" /> </head> <body> <div id="main"> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <div id="photo"> <dl> <dt><img data-original="images/p1.jpg" src="images/110.gif" class="lazy" alt="" /></dt> <dd>延时加载</dd> </dl> <dl> <dt><img data-original="images/p2.jpg" src="images/110.gif" class="lazy" alt="" /></dt> <dd>延时加载</dd> </dl> <dl> <dt><img data-original="images/p3.jpg" src="images/110.gif" class="lazy" alt="" /></dt> <dd>延时加载</dd> </dl> <dl> <dt><img data-original="images/p4.jpg" src="images/110.gif" class="lazy" alt="" /></dt>> <dd>延时加载</dd> </dl> <dl> <dt><img data-original="images/p5.jpg" src="images/110.gif" class="lazy" alt="" /></dt> <dd>延时加载</dd> </dl> <dl> <dt><img data-original="images/p6.jpg" src="images/110.gif" class="lazy" alt="" /></dt> <dd>延时加载</dd> </dl> <dl> <dt><img data-original="images/p7.jpg" src="images/110.gif" class="lazy" alt="" /></dt> <dd>延时加载</dd> </dl> <dl> <dt><img data-original="images/p8.jpg" src="images/110.gif" class="lazy" alt="" /></dt> <dd>延时加载</dd> </dl> <dl> <dt><img data-original="images/p9.jpg" src="images/110.gif" class="lazy" alt="" /></dt> <dd>延时加载</dd> </dl> <dl> <dt><img data-original="images/p10.jpg" src="images/110.gif" class="lazy" alt="" /></dt> <dd>延时加载</dd> </dl> <dl> <dt><img data-original="images/p11.jpg" src="images/110.gif" class="lazy" alt="" /></dt> <dd>延时加载</dd> </dl> <dl> <dt><img data-original="images/p12.jpg" src="images/110.gif" class="lazy" alt="" /></dt> <dd>延时加载</dd> </dl> </div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/vscss/p/5743825.html
