zoukankan html css js c++ java
预加载

　　显示效果：
　　代码：
  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                      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>
查看全文
相关阅读:
JavaScript作用域
 JavaScript数据类型
 CSS页面布局(二)
CSS页面布局(一)
CCS界面组件
 JavaScript面向对象设计
 python-序列化与反序列化
 python-常用模块
 python-re模块
 python-匿名函数
原文地址：https://www.cnblogs.com/firstflying/p/10708031.html