48 <!DOCTYPE html>
49 <html lang="en">
50 <head>
51 <meta charset="UTF-8">
52 <title>按需加载</title>
53 <style type="text/css">
54 *{list-style:none;}
55 li{width:300px;height:250px;border:solid 1px #333;padding:10px;margin-bottom:10px;}
56 </style>
57 </head>
58 <body>
59 <ul>
60 <li><img srcImg="./sunli/1.jpg" src="" alt="" width="100%"></li>
61 <li><img srcImg="./sunli/2.jpg" alt="" width="100%"></li>
62 <li><img srcImg="./sunli/3.jpg" alt="" width="100%"></li>
63 <li><img srcImg="./sunli/4.jpg" alt="" width="100%"></li>
64 <li><img srcImg="./sunli/5.jpg" alt="" width="100%"></li>
65 <li><img srcImg="./sunli/6.jpg" alt="" width="100%"></li>
66 </ul>
67 <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
68 <script type="text/javascript">
69 $(window).scroll(function(){
70 $(‘li[isLoaded!=1]‘).each(function(){
71 //如果存在当前isloaded属性 直接返回
72 // if($(this).attr(‘isLoaded‘)) return;
73 //页面的y轴滚动距离
74 var sT = $(window).scrollTop();
75 //页面可视区域的高度
76 var CH = $(window).height();
77 //获取当前元素距离文档顶部的偏移量
78 var OT = $(this).offset().top;
79 //如果图片即将要展现在屏幕上的话
80 if(OT < sT + CH){
81 //获取当前li中img的src属性值
82 var src = $(this).find(‘img‘).attr(‘srcImg‘);
83 //设置src属性
84 $(this).find(‘img‘).attr(‘src‘,src);
85 //加载完毕之后添加属性 做标识
86 $(this).attr(‘isLoaded‘,1);
87 }
88 })
89 })
90
91
92 </script>
93 </body>
94 </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
|