// window绑定滚动事件 window.addEventListener('scroll',function(){ // 遍历所有的img标签 lazyRenderImg(); }); function lazyRenderImg(){ Array.prototype.slice.apply(document.getElementsByTagName('li')).forEach((li)=>{ let img=li.getElementsByTagName('img')[0]; // 判断当前img是否出现在了视野中 // 判断当前img是否被加载过了 if(checkShow(img) && !isLoaded(img)){ loadImg(img); } }) } // 第一次进页面加载处于视野中的图片 lazyRenderImg();
三.性能优化
问题：window.scroll 方法页面只要一滚动就会触发里面的方法，对性能影响很大
解决方法：当页面停止滚动的时候，再去执行页面中的方法，类似与函数节流（throttle）
Tips:函数节流：等时间间隔执行函数， 让一个函数不要执行得太频繁，减少一些过快的调用来节流。
// window绑定滚动事件 let timer; window.addEventListener('scroll',function(){ console.log('scroll') // 遍历所有的img标签 if(timer){ clearTimeout(timer) } timer=setTimeout(()=>{ console.log('lazyRenderImg...'); lazyRenderImg(); },300);
通过打印的日志发现当滚动停止后才执行lazyRenderImg方法的，确实减少了不必要调用lazyRenderImg的次数。
以上所述是小编给大家介绍的原生JS实现图片懒加载之页面性能优化,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: