JS -- 下滑加載圖片
阿新 • • 發佈：2018-09-05
set 計算 += title settime 14. cti ber script
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 -- 下滑加載圖片