<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=0"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ padding: 100px; border: 1px solid red } img{ width: 400px; height: 300px; } </style> </head> <body> <div><span></span><img src="C:\Users\Administrator\Desktop\white.jpg" alt="" data_src=‘C:\Users\Administrator\Desktop\strawberry.jpg‘></div> <div><span></span><img src="C:\Users\Administrator\Desktop\white.jpg" alt="" data_src=‘C:\Users\Administrator\Desktop\orange.jpg‘></div> <div><span></span><img src="C:\Users\Administrator\Desktop\white.jpg" alt="" data_src=‘C:\Users\Administrator\Desktop\grape.jpg‘></div> <div><span></span><img src="C:\Users\Administrator\Desktop\white.jpg" alt="" data_src=‘C:\Users\Administrator\Desktop\banana.jpg‘></div> <div><span></span><img src="C:\Users\Administrator\Desktop\white.jpg" alt="" data_src=‘C:\Users\Administrator\Desktop\apple.jpg‘></div> </body> <script> // 区别于常见的懒加载的第地方是当img重置src后，向img添加了一个isReset属性，该属性实现两点作用： // 1如果img都有这个属性，那么不会再对这个img设置src， // 2如果所有img都有这个属性，那么window的滚动事件解除懒加载函数 var imgs = document.getElementsByTagName(‘img‘); // 因为后续使用了数组的every，所以先转换为真实数组 var innerHeight = window.innerHeight || document.documentElement.clientHeight; //视口高度 function throttle(handler,wait){ var lastTime = 0; return function(e){ nowTmie = new Date().getTime(); if(nowTmie - lastTime > wait){ lastTime = nowTmie; handler.apply(this,arguments); } } } function lazyLoad(imgs, h){ var h = h || 0; // h是一个数值，加给视口高度， var isAllLoad = imgs.every(img => { return img.getAttribute(‘isReset‘) == ‘true‘; }) if(isAllLoad){ window.removeEventListener("scroll", throttleLazyLoad, false) return } for (var i = 0; i < imgs.length; i++){ var top = imgs[i].getBoundingClientRect().top; // img距离视口的高度 var isLoad = imgs[i].getAttribute("isReset") // img的重置状态 if(top < innerHeight + h && !isLoad){ imgs[i].src = imgs[i].getAttribute(‘data_src‘); imgs[i].setAttribute(‘isReset‘, ‘true‘); } } } lazyLoad(imgs) var throttleLazyLoad = throttle(lazyLoad, 100).bind(this, imgs, 500); // 节流的同时为了实现解除带参数的事件函数，选择了bind方法 window.addEventListener("scroll", throttleLazyLoad, false); </script> </html>
原文：https://www.cnblogs.com/wangjie-nf/p/11489535.html