1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .kwydy { width: 300px; height: 400px; }
.kwydy img { width: 100%; height: 100%; } </style> </head> <body> <div class="kwydy"><img data-src="https://kwydy.gitee.io/imgs/preview/3059_3.jpg"></div> <div class="kwydy"><img data-src="https://kwydy.gitee.io/imgs/preview/3058_3.jpg"></div> <div class="kwydy"><img data-src="https://kwydy.gitee.io/imgs/preview/3057_3.jpg"></div> <div class="kwydy"><img data-src="https://kwydy.gitee.io/imgs/preview/3056_3.jpg"></div> <div class="kwydy"><img data-src="https://kwydy.gitee.io/imgs/preview/3055_3.jpg"></div> <div class="kwydy"><img data-src="https://kwydy.gitee.io/imgs/preview/3054_3.jpg"></div> <div class="kwydy"><img data-src="https://kwydy.gitee.io/imgs/preview/3053_3.jpg"></div> <div class="kwydy"><img data-src="https://kwydy.gitee.io/imgs/preview/3052_3.jpg"></div> <div class="kwydy"><img data-src="https://kwydy.gitee.io/imgs/preview/3051_3.jpg"></div> <div class="kwydy"><img data-src="https://kwydy.gitee.io/imgs/preview/3050_3.jpg"></div> <div class="kwydy"><img data-src="https://kwydy.gitee.io/imgs/preview/3049_3.jpg"></div> <div class="kwydy"><img data-src="https://kwydy.gitee.io/imgs/preview/3048_3.jpg"></div> <div class="kwydy"><img data-src="https://kwydy.gitee.io/imgs/preview/3047_3.jpg"></div> <div class="kwydy"><img data-src="https://kwydy.gitee.io/imgs/preview/3049_3.jpg"></div> <div class="kwydy"><img data-src="https://kwydy.gitee.io/imgs/preview/3045_3.jpg"></div> <div class="kwydy"><img data-src="https://kwydy.gitee.io/imgs/preview/3044_3.jpg"></div> </body> <script type="text/javascript"> let lazyLoading = document.querySelectorAll("img")
function lazyLoad() { let visualHeight = document.documentElement.clientHeight; lazyLoading.forEach(e => { if (!e.src) { let rect = e.getBoundingClientRect() if (rect.top < visualHeight) { e.src = e.dataset.src } } }) window.onscroll ?? = lazyLoad } lazyLoad() </script> </html>
|