1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>lazyload</title> 6 <script src="./index.js"></script> 7 </head> 8 <style> 9 .container{ 10 width:100%; 11 } 12 .img-area{ 13 height:600px; 14 text-align: center 15 } 16 </style> 17 <body> 18 <div class="container"> 19 <div class="img-area"> 20 <img class="my-photo" alt="loading" data-src="./img/img1.png"> 21 </div> 22 <div class="img-area"> 23 <img class="my-photo" alt="loading" data-src="./img/img2.png"> 24 </div> 25 <div class="img-area"> 26 <img class="my-photo" alt="loading" data-src="./img/img3.png"> 27 </div> 28 <div class="img-area"> 29 <img class="my-photo" alt="loading" data-src="./img/img4.png"> 30 </div> 31 <div class="img-area"> 32 <img class="my-photo" alt="loading" data-src="./img/img5.png"> 33 </div> 34 <div class="img-area"> 35 <img class="my-photo" alt="loading" data-src="./img/img6.png"> 36 </div> 37 <div class="img-area"> 38 <img class="my-photo" alt="loading" data-src="./img/img7.png"> 39 </div> 40 <div class="img-area"> 41 <img class="my-photo" alt="loading" data-src="./img/img8.png"> 42 </div> 43 <div class="img-area"> 44 <img class="my-photo" alt="loading" data-src="./img/img9.png"> 45 </div> 46 <div class="img-area"> 47 <img class="my-photo" alt="loading" data-src="./img/img10.png"> 48 </div> 49 </div> 50 <script> 51 function isInSight(el) { 52 const bound = el.getBoundingClientRect(); 53 const clientHeight = window.innerHeight; 54 //如果只考虑向下滚动加载 55 //const clientWidth=window.innerWeight; 56 return bound.top <= clientHeight + 100; 57 } 58 59 let index = 0; 60 function checkImgs() { 61 const imgs = document.querySelectorAll('.my-photo'); 62 for (let i = index; i < imgs.length; i++) { 63 if (isInSight(imgs[i])) { 64 loadImg(imgs[i]); 65 index = i; 66 } 67 } 68 // Array.from(imgs).forEach(el => { 69 // if (isInSight(el)) { 70 // loadImg(el); 71 // } 72 // }) 73 } 74 75 function loadImg(el) { 76 if (!el.src) { 77 const source = el.dataset.src; 78 el.src = source; 79 } 80 } 81 82 function throttle(fn, mustRun = 500) { 83 const timer = null; 84 let previous = null; 85 return function() { 86 const now = new Date(); 87 const context = this; 88 const args = arguments; 89 if (!previous) { 90 previous = now; 91 } 92 const remaining = now - previous; 93 if (mustRun && remaining >= mustRun) { 94 fn.apply(context, args); 95 previous = now; 96 } 97 } 98 } 99 window.onload=checkImgs; 100 window.onscroll = throttle(checkImgs); 101 </script> 102 </body> 103 </html>