?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>js-懒加载
原文地址：https://www.cnblogs.com/studyshufei/p/8907318.html