JS原生代码实现懒加载
HTML
<!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>
实现效果
