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
时间： 2024-10-19 16:50:18