<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>懒加载</title> </head> <script src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script> <style type="text/css"> .hover_content{ width:270px; height:129px; } img{ width:100%; height:129px; } </style> <script> function scanLoad(){//扫描需要加载的div $.each($(".hover_content"),function(i,o){ var windowHeight=$(window).height(); var scrollTop=$(document).scrollTop(); windowHeight=windowHeight;//测试当图片出现在窗口上半部分时显示，实际操作中，应该不要除以2的 if( $(o).offset().top<(scrollTop+windowHeight) && $(o).offset().top > scrollTop ) { //判断div是不是出在可见的位置 var img=$("<img/>").attr("src",$(o).attr("pic")).fadeTo("fast",0);//创建一个可见度为0的图片，地址为div上面的pic属性 $(o).replaceWith(img);//把div替换成这个新创建的图片 img.fadeTo("slow",1);//让它慢慢的显示出来 } }); } $(function(){//页面第一次加载时 scanLoad();//扫描需要加载的div $(document).scroll(scanLoad);//当滚动条滚动时,扫描需要加载的div $("body").scroll(scanLoad);//加这个为了某些浏览器的兼容 $(window).scroll(scanLoad);//加这个也是为了某些浏览器的兼容 }); </script> <body> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> <div class="hover_content" pic="http://www.baidu.com/img/baidu_sylogo1.gif"></div> </body> </html>
效果图：（滚轮到某区域，才显示某区域的内容）
