收藏
天蓬老师批改状态：合格
老师批语：懒加载有多种实现方案, 可以试试其它种
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>懒加载案例</title></head><style>.images>img {height: 200px;}</style><body><div class="images"><img src="img/temp.jpg" alt="" data-src="img/apic26676.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic26703.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic26775.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic26841.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic26867.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic26870.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic26871.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic26888.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27129.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27135.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27147.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27158.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27167.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27173.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27188.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27195.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27201.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27248.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27270.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27290.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27302.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27350.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27387.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27417.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27435.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27438.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27449.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27455.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27477.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27494.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27509.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27512.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27519.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27606.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27625.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27692.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27821.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27830.jpg"><img src="img/temp.jpg" alt="" data-src="img/apic27849.jpg"><img src="img/temp.jpg" alt="" data-src="img/hpic2692.jpg"><img src="img/temp.jpg" alt="" data-src="img/hpic2735.jpg"><img src="img/temp.jpg" alt="" data-src="img/hpic2829.jpg"><img src="img/temp.jpg" alt="" data-src="img/hpic2843.jpg"></div></body><script>// 1.获取所有图片var imgs = document.querySelectorAll(".images>img");// 2.获取文档高度var clientHeight = document.documentElement.clientHeight;// 3.监听滚动事件window.addEventListener("scroll", function () {lazyload(imgs, clientHeight);}, false);// 4.懒加载函数function lazyload(imgs, clientHeight) {// 获取html文档的滚动大小var scrollTop = document.documentElement.scrollTop;// 遍历图片，判断是否进入可视区imgs.forEach(function (img) {if (img.offsetTop <= clientHeight + scrollTop) {img.src = img.dataset.src;}});}</script></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
