预加载
Posted firstflying
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了预加载相关的知识，希望对你有一定的参考价值。
预加载
显示效果：
代码：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script type="text/javascript" src="js/jquery-1.11.3.js"></script> 8 <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script> 9 <link rel="stylesheet" href="css/jquery-ui-1.9.2.custom.css" /> 10 <script> 11 $(function() { 12 // 延迟加载 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 function ScrollShow() { 24 setTimeout(function() { 25 for(var i = 0; i < waitload.length; i++) { 26 if($(window).height() + $(window).scrollTop() > $(‘.waitLoad‘).eq(i).offset().top) { 27 var _this = waitload.eq(i); 28 $(_this).attr(‘src‘, $(_this).attr(‘alt‘)).animate({ 29 opacity: 1 30 }, 1000) 31 } 32 } 33 }, 100) 34 } 35 36 // 预加载 37 WaitDialog(); //初始化对话框 38 $(‘img.waitLoad‘).click(function() { 39 var tempImg = new Image(); //创建一个临时区域的图片对象 40 tempImg.src = $(this).attr(‘data-src‘); //tempImg.src属性可以在后台加载这张图片到本地缓存 41 $(‘.WaitDialog‘).dialog(‘open‘); 42 $(tempImg).load(function() { 43 $(‘.ChangeAttr‘).attr(‘src‘, tempImg.src) 44 .css(‘opacity‘, 0).removeClass(‘ShowLoad‘).addClass(‘ShowBig‘).animate({ 45 opacity: 1 46 }, 1000); 47 }); 48 49 var current = this.parentNode.parentNode; //得到dl的原生对象 50 UpDownImg(current); 51 }); 52 //获取某个节点的上一个节点的索引 53 function prevIndex(currentIndex, parent) { 54 var totalDL=parent.children.length;//得到dl总数 55 if(currentIndex == 0) { 56 return totalDL - 1; 57 } else { 58 return currentIndex - 1; 59 } 60 } 61 //获取某个节点的下一个节点的索引 62 function nextIndex(currentIndex, parent) { 63 var totalDL=parent.children.length;//得到dl总数 64 if(currentIndex == totalDL - 1) { 65 return 0; 66 } else { 67 return parseInt(currentIndex)+1; 68 } 69 } 70 71 $(‘.ui-dialog-titlebar-close‘).click(function() { 72 $(‘.ChangeAttr‘).attr(‘src‘, ‘images/waitload.gif‘).removeClass(‘ShowBig‘).addClass(‘ShowLoad‘); 73 }); 74 75 //图片下一张 76 $(‘.RrightBox‘).click(function() { 77 $(‘.ChangeAttr‘).attr(‘src‘, $(‘.RrightBox‘).attr(‘nextSrc‘)); 78 var current=$(‘.photo dl dt img‘).get(nextIndex($(‘.ChangeAttr‘).attr(‘index‘),$(‘.photo‘).get(0))).parentNode.parentNode; 79 //console.log($(‘.photo‘).get(0)) 80 UpDownImg(current); 81 //alert(nextIndex($(‘.ChangeAttr‘).attr(‘index‘),$(‘.photo‘).get(0))); 82 }) 83 //图片上一张 84 $(‘.LeftBox‘).click(function() { 85 $(‘.ChangeAttr‘).attr(‘src‘, $(‘.LeftBox‘).attr(‘prevSrc‘)); 86 var current=$(‘.photo dl dt img‘).get(prevIndex($(‘.ChangeAttr‘).attr(‘index‘),$(‘.photo‘).get(0))).parentNode.parentNode; 87 //console.log($(‘.photo‘).get(0)) 88 UpDownImg(current); 89 90 }) 91 92 //加载上下图片 93 function UpDownImg(current) { 94 //上一个索引 95 var prev = prevIndex($(current).index(), current.parentNode); 96 97 //下一个索引 98 var next = nextIndex($(current).index(), current.parentNode); 99 100 var preImg = new Image(); 101 var nextImg = new Image(); 102 preImg.src = $(‘.waitLoad‘).eq(prev).attr(‘data-src‘); 103 nextImg.src = $(‘.waitLoad‘).eq(next).attr(‘data-src‘); 104 $(".LeftBox").attr(‘prevSrc‘, preImg.src); 105 $(".RrightBox").attr(‘nextSrc‘, nextImg.src); 106 107 $(‘.ChangeAttr‘).attr(‘index‘, $(current).index()); 108 } 109 110 }); 111 112 // 初始化对话框 113 function WaitDialog() { 114 $(‘.WaitDialog‘).dialog({ 115 title: "图片预加载", 116 width: 700, 117 height: 472, 118 autoOpen: false, 119 resizable: false, 120 modal: true 121 }) 122 } 123 </script> 124 125 <style> 126 body { 127 padding: 0; 128 margin: 0; 129 } 130 131 .photo { 132 float: left; 133 } 134 135 .photo dl { 136 height: 300px; 137 float: left; 138 margin: 5px 0 15px 40px; 139 } 140 141 .photo dl dt { 142 width: 400px; 143 height: 250px; 144 background: #eee; 145 margin: 0 auto; 146 } 147 148 .photo dl dt img { 149 width: 100%; 150 height: 100%; 151 cursor: pointer; 152 } 153 154 .photo dl dd { 155 height: 25px; 156 line-height: 25px; 157 text-align: center; 158 } 159 160 .load { 161 height: 400px; 162 background: blueviolet; 163 } 164 /*预加载样式*/ 165 166 .beforLoad { 167 width: 100%; 168 height: 400px; 169 overflow: hidden; 170 text-align: center; 171 line-height: 400px; 172 } 173 /*显示加载图样式*/ 174 175 .ShowLoad { 176 vertical-align: middle; 177 } 178 /*显示大图样式*/ 179 180 .ShowBig { 181 width: 100%; 182 height: 100%; 183 /*opacity: 0;*/ 184 } 185 /*对话框样式*/ 186 187 .ui-dialog .ui-dialog-title { 188 width: 100%; 189 text-align: center; 190 font-weight: 500; 191 font-size: 30px; 192 } 193 194 .LeftBox, 195 .RrightBox { 196 position: absolute; 197 top: 0; 198 height: 400px; 199 line-height: 400px; 200 padding: 0 15px; 201 background: transparent; 202 width: 45px; 203 } 204 205 .ui-dialog .ui-dialog-content { 206 padding: 0; 207 margin: 0; 208 } 209 210 .LeftBox { 211 left: 0; 212 } 213 214 .RrightBox { 215 right: 0; 216 } 217 218 .RrightBox:hover span, 219 .LeftBox:hover span { 220 display: block; 221 } 222 223 .LeftBox span img, 224 .RrightBox span img { 225 width: 50px; 226 display: block; 227 margin: 0 auto; 228 cursor: pointer; 229 } 230 231 .RrightBox span { 232 float: right; 233 } 234 235 .RrightBox span, 236 .LeftBox span { 237 background: rgba(0, 0, 0, 0.45); 238 position: relative; 239 width: 60px; 240 padding: 20px 0; 241 cursor: pointer; 242 display: none; 243 top: 145px; 244 } 245 </style> 246 </head> 247 248 <body> 249 <div class="load"></div> 250 <div class="photo"> 251 <dl> 252 <dt><img src="images/loadPage.jpg" class="waitLoad" data-src="images/banner5.jpg" alt="images/banner1.jpg"></dt> 253 <dd>延迟加载</dd> 254 </dl> 255 <dl> 256 <dt><img src="images/loadPage.jpg" class="waitLoad" data-src="images/banner6.jpg" alt="images/banner2.jpg"></dt> 257 <dd>延迟加载</dd> 258 </dl> 259 <dl> 260 <dt><img src="images/loadPage.jpg" class="waitLoad" data-src="images/banner7.jpg" alt="images/banner3.jpg"></dt> 261 <dd>延迟加载</dd> 262 </dl> 263 <dl> 264 <dt><img src="images/loadPage.jpg" class="waitLoad" data-src="images/banner8.jpg" alt="images/banner4.jpg"></dt> 265 <dd>延迟加载</dd> 266 </dl> 267 </div> 268 <!--显示大图--> 269 <div class="WaitDialog"> 270 <div class="beforLoad"> 271 <img class="ShowLoad ChangeAttr" src="images/waitload.gif" /> 272 <div class="LeftBox" prevSrc=‘‘> 273 <span> 274 <img src="images/left.png" /> 275 </span> 276 </div> 277 <div class="RrightBox" nextSrc=‘‘> 278 <span> 279 <img src="images/right.png" /> 280 </span> 281 </div> 282 283 </div> 284 </div> 285 </body> 286 287 </html>
以上是关于预加载的主要内容，如果未能解决你的问题，请参考以下文章