?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做的一个下滑才会加载图片页面，这样可以节省服务器的性能，图片需自行添加，不足之处望见谅JS -- 下滑加载图片
原文地址：https://www.cnblogs.com/qbhgy/p/9594127.html