延迟加载
延迟加载
显示效果：
代码：
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 /*width: 900px;*/ 46 float: left; 47 } 48 .photo dl{ 49 /*width: 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>