JS -- 下滑加载图片

最新推荐文章于 2023-07-21 20:22:53 发布

Just do it

最新推荐文章于 2023-07-21 20:22:53 发布

阅读量242

点赞数

原文链接：http://www.cnblogs.com/qbhgy/p/9594127.html

版权

  1 <!DOCTYPE html>
  2 <html lang="cn">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>下滑加载图片</title>
  6     <style type="text/css">
  7         #imglist{
  8             width: 100%;
  9             margin: 0 auto;
 10         }
 11         #imglist img{
 12             width: 600px;
 13             height: 350px;
 14             background: url('./imgs/loading.gif') no-repeat 50% 50%;
 15         }
 16     </style>
 17 </head>
 18 <body>
 19     <h1>下滑加载图片</h1>
 20     <hr>
 21 
 22     <div id="imglist">
 23         <img data-src="./imgs/Meinv001.jpg">
 24         <img data-src="./imgs/Meinv002.jpg">
 25         <img data-src="./imgs/Meinv003.jpg">
 26         <img data-src="./imgs/Meinv004.jpg">
 27         <img data-src="./imgs/Meinv005.jpg">
 28         <img data-src="./imgs/Meinv006.jpg">
 29         <img data-src="./imgs/Meinv007.jpg">
 30         <img data-src="./imgs/Meinv008.jpg">
 31         <img data-src="./imgs/Meinv009.jpg">
 32         <img data-src="./imgs/Meinv010.jpg">
 33         <img data-src="./imgs/Meinv011.jpg">
 34         <img data-src="./imgs/Meinv012.jpg">
 35         <img data-src="./imgs/Meinv013.jpg">
 36         <img data-src="./imgs/Meinv014.jpg">
 37         <img data-src="./imgs/Meinv015.jpg">
 38         <img data-src="./imgs/Meinv016.jpg">
 39     </div>
 40 
 41     <script>
 42         var imgs = imglist.getElementsByTagName('img');
 43         // 获取 imglist 的宽度
 44         // offsetWidth  返回元素的宽度
 45         var box_width = imglist.offsetWidth;
 46         // console.log(box_width);
 47         // 获取视口的高度
 48         var view_height = document.documentElement.clientHeight;
 49         // console.log(view_height);
 50 
 51         // 计算横着能加载图片的张图
 52         // var x_number = 舍去取整(box宽 / img宽)
 53         var x_number = Math.floor(box_width / imgs[0].offsetWidth);
 54         // console.log(x_number);
 55 
 56         // 首屏图片的数量
 57         // Math.ceil((视口高 - 首图的顶部偏移量) / 图片高) * 横向图片数量
 58         var first_number = Math.ceil((view_height - imgs[0].offsetTop) / imgs[0].offsetHeight) * x_number;
 59         // console.log(first_number);
 60 
 61         var m = 0;// 总计录数
 62         loadImage(m, first_number);
 63         m += first_number;
 64 
 65 
 66         // 绑定滚动事件
 67         window.onscroll = function() {
 68             if (m >= imgs.length) return;
 69             // 滚动条滚动距离
 70             var top = document.body.scrollTop || document.documentElement.scrollTop;
 71 
 72             // 获取 还未加载的第一张图片 到顶部的偏移量
 73             var img_top = imgs[m].offsetTop;
 74 
 75             // 判断 加载临界点
 76             if ((top + view_height) >= img_top) {
 77                 loadImage(m, x_number);
 78                 m += x_number;
 79             }
 80         }
 81 
 82 
 83         /**
 84          * 加载图片函数
 85          * @param   start  从第几张开始加载
 86          * @param   length 加载几张
 87          */
 88         function loadImage(start, length) {
 89             for (var i = start; i < (start+length); i++) {
 90                 if (i >= imgs.length) return;
 91                 (function(i){
 92                     setTimeout(function () {
 93                         imgs[i].src = imgs[i].getAttribute('data-src');
 94                     }, 500);
 95                 })(i);
 96             }
 97         }
 98 
 99     </script>
100 </body>
101 </html>
 这是js做的一个下滑才会加载图片页面，这样可以节省服务器的性能，图片需自行添加，不足之处望见谅

转载于:https://www.cnblogs.com/qbhgy/p/9594127.html

Just do it

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS -- 下滑加载图片

1 <!DOCTYPE html> 2 <html lang="cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下滑加载图片</title> 6 <style type="text/css">...
复制链接

扫一扫