网页图片按需加载

最新推荐文章于 2023-06-21 15:08:15 发布

weixin_30306905

最新推荐文章于 2023-06-21 15:08:15 发布

阅读量94

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/westwindhorse/p/5953483.html

版权

网页中的图片实现按需加载（滚动条下拉加载）。

效果如下：可以看到，随着滚动条的下拉，图片资源请求有了变化。

实现此功能需要思考的部分：

如何认定某张图片需要进行加载，加载的必要条件是什么？

动态截图中可以看到，图片进入了狭窄的可视区（被控制台视区挤压了）就会被加载了，那么：

网页中的图片都有自己距离浏览器窗口顶部的距离，这部分距离可以直接用属性取出：图片距离，img.offsetTop。

通过判断图片是否进入了可视区即可得出该图片是否应该被加载，一张图解释图片有没有进入可视区：

可视区范围+滚动条滚动距离：可视区范围（clientHeight）滚动条滚动距离（scrolltop）

如果图片距离浏览器顶部距离小于可视区范围+滚动条滚动距离，那么该图片应该被加载。

其实核心部分就是判断 img.offsetTop < clientHeight+scrolltop.

主要思路就是这样，代码部分如下。

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2         "http://www.w3.org/TR/html4/loose.dtd">
  3 <html>
  4 <head>
  5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  6     <title>Mking_js_</title>
  7 
  8     <style type="text/css">
  9         ul{ margin: 100px auto; padding: 0; overflow: hidden; }
 10         li{ float: left; list-style: none; margin: 0 0 10px 10px; border: 1px solid #000000;}
 11         img{ width:280px; height: 150px; }
 12     </style>
 13 
 14     <script type="text/javascript">
 15         window.onload = function(){
 16             var oUl = document.getElementById("ul1");
 17             var aImgs = oUl.getElementsByTagName("img");
 18             scroll();
 19             window.onscroll = scroll;
 20              var i = 0;
 21             function scroll(){
 22                 var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 23                 var clientHeight = document.documentElement.clientHeight;  //获取可视区的高
 24                 //alert(iScrollTop+'**'+clientHeight);
 25                  
 26                 for(var i=0;i<aImgs.length;i++){
 27                     //图片距离顶部的距离小于滚动条滚动的距离+可视区的距离，则图片进入可视区范围，
 28                     // 更改图片的scr 
 29                     if(!aImgs[i].isload && getTop(aImgs[i]) < iScrollTop+clientHeight){ 
 30                         aImgs[i].src = aImgs[i].getAttribute("_src");
 31                         aImgs[i].isload = true; 
 32                     }
 33                 }
 34             }
 35 
 36 
 37             function getTop(obj){ 
 38                 var iTop = 0;
 39                 while(obj){
 40                     iTop += obj.offsetTop;
 41                     obj = obj.offsetParent;
 42                 }
 43                 return iTop;
 44             }
 45         };
 46     </script>
 47 </head>
 48 <body>
 49     <ul id="ul1">
 50         <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
 51         <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
 52         <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
 53         <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
 54         <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
 55         <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
 56         <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
 57         <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
 58         <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
 59         <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
 60         <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
 61         <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
 62         <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
 63         <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
 64         <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
 65         <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
 66         <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
 67         <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
 68         <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
 69         <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
 70         <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
 71         <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
 72         <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
 73         <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
 74         <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
 75         <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
 76         <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
 77         <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
 78         <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
 79         <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
 80         <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
 81         <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
 82         <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
 83         <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
 84         <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
 85         <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
 86         <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
 87         <li><img _src="http://photo.enterdesk.com/2008-6-21/200806211628314920.jpg" src="img/white.jpg"/></li>
 88         <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
 89         <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
 90         <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
 91         <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
 92         <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
 93         <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
 94         <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
 95         <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
 96         <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
 97         <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
 98         <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
 99         <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
100         <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
101         <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
102         <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
103         <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
104         <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
105         <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
106         <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
107         <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
108         <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
109         <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
110         <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
111         <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
112         <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
113         <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
114         <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
115         <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
116         <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
117         <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
118         <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
119         <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
120         <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
121         <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
122         <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
123         <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
124         <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
125         <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
126         <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
127         <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
128         <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
129         <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
130         <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
131         <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
132         <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
133         <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
134         <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
135         <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
136         <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
137         <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
138         <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
139         <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
140         <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
141         <li><img _src="img/1.jpg" src="img/white.jpg"/></li>
142         <li><img _src="img/2.jpg" src="img/white.jpg"/></li>
143         <li><img _src="img/3.jpg" src="img/white.jpg"/></li>
144         <li><img _src="img/4.jpg" src="img/white.jpg"/></li>
145         <li><img _src="img/5.jpg" src="img/white.jpg"/></li>
146         <li><img _src="img/6.jpg" src="img/white.jpg"/></li>
147         <li><img _src="img/7.jpg" src="img/white.jpg"/></li>
148     </ul>
149 </body>
150 </html>

View Code

转载于:https://www.cnblogs.com/westwindhorse/p/5953483.html

weixin_30306905

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页图片按需加载

网页中的图片实现按需加载（滚动条下拉加载）。效果如下：可以看到，随着滚动条的下拉，图片资源请求有了变化。实现此功能需要思考的部分：如何认定某张图片需要进行加载，加载的必要条件是什么？动态截图中可以看到，图片进入了狭窄的可视区（被控制台视区挤压了）就会被加载了，那么：网页中的图片都有自己距离浏览器窗口顶部的距离，这部分距离可以直接用属性取出：图片距离，img.offse...
复制链接

扫一扫