延迟加载
显示效果：
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="js/jquery-1.11.3.js" ></script> 7 <script> 8 $(function(){ 9 // alert($('.waitLoad').offset().top);//获取浏览器顶部到标签顶部的距离 10 // alert($(window).height())//可视高度 11 // alert($(window).scrollTop())//滚动高度 12 // alert($('.waitLoad').length); 13 var waitload=$('.waitLoad'); 14 waitload.css('opacity',0); 15 $(window).scroll(function(){ 16 ScrollShow(); 17 }) 18 $(window).resize(function(){ 19 ScrollShow(); 20 }) 21 ScrollShow(); 22 23 //滚动与不滚动 24 function ScrollShow(){ 25 setTimeout(function(){ 26 for (var i=0;i<waitload.length;i++) { 27 if($(window).height()+$(window).scrollTop()>$('.waitLoad').eq(i).offset().top){ 28 var _this=waitload.eq(i); 29 $(_this).attr('src',$(_this).attr('alt')).animate({ 30 opacity:1 31 },1000) 32 } 33 } 34 },100) 35 } 37 }) 38 </script> 39 <style> 40 body{ 41 padding: 0; 42 margin: 0; 43 } 44 .photo{ 45 /* 900px;*/ 46 float: left; 47 } 48 .photo dl{ 49 /* 225px;*/ 50 height: 300px; 51 float: left; 52 margin:5px 0 15px 40px; 53 /*background: #CCCCCC;*/ 54 } 55 .photo dl dt{ 56 width: 400px; 57 height: 250px; 58 background: #eee; 59 margin: 0 auto; 60 61 } 62 .photo dl dt img{ 63 width: 100%; 64 height: 100%; 65 } 66 .photo dl dd{ 67 height: 25px; 68 line-height: 25px; 69 text-align: center; 70 } 71 .load{ 72 height: 400px; 73 background: blueviolet; 74 } 75 </style> 76 </head> 77 <body> 78 <div class="load"></div> 79 <div class="photo"> 80 <dl> 81 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner1.jpg"></dt> 82 <dd>延迟加载</dd> 83 </dl> 84 <dl> 85 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner2.jpg"></dt> 86 <dd>延迟加载</dd> 87 </dl> 88 <dl> 89 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner3.jpg"></dt> 90 <dd>延迟加载</dd> 91 </dl> 92 <dl> 93 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner4.jpg"></dt> 94 <dd>延迟加载</dd> 95 </dl> 96 <dl> 97 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner5.jpg"></dt> 98 <dd>延迟加载</dd> 99 </dl> 100 <dl> 101 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner6.jpg"></dt> 102 <dd>延迟加载</dd> 103 </dl> 104 <dl> 105 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner7.jpg"></dt> 106 <dd>延迟加载</dd> 107 </dl> 108 109 <dl> 110 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner1.jpg"></dt> 111 <dd>延迟加载</dd> 112 </dl> 113 <dl> 114 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner2.jpg"></dt> 115 <dd>延迟加载</dd> 116 </dl> 117 <dl> 118 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner3.jpg"></dt> 119 <dd>延迟加载</dd> 120 </dl> 121 <dl> 122 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner4.jpg"></dt> 123 <dd>延迟加载</dd> 124 </dl> 125 <dl> 126 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner5.jpg"></dt> 127 <dd>延迟加载</dd> 128 </dl> 129 <dl> 130 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner6.jpg"></dt> 131 <dd>延迟加载</dd> 132 </dl> 133 <dl> 134 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner7.jpg"></dt> 135 <dd>延迟加载</dd> 136 </dl> 137 138 <dl> 139 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner8.jpg"></dt> 140 <dd>延迟加载</dd> 141 </dl> 142 <dl> 143 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner9.jpg"></dt> 144 <dd>延迟加载</dd> 145 </dl> 146 <dl> 147 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner10.jpg"></dt> 148 <dd>延迟加载</dd> 149 </dl> 150 <dl> 151 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner11.jpg"></dt> 152 <dd>延迟加载</dd> 153 </dl> 154 <dl> 155 <dt><img src="images/loadPage.jpg" class="waitLoad" alt="images/banner12.jpg"></dt> 156 <dd>延迟加载</dd> 157 </dl> 158 159 </div> 160 </body> 161 </html>