懒加载的实现以及优化（函数节流）

最新推荐文章于 2024-05-28 17:25:10 发布

转载最新推荐文章于 2024-05-28 17:25:10 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/gaochunzhang/blog/3035952

文章标签：

#python

本文详细介绍了如何使用JavaScript实现网页中图片的懒加载功能，通过监听滚动事件并结合节流函数，优化了用户体验，减少了不必要的资源加载，提高了网站性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

var throttle = function (fn, interval){
   var _self = fn, timer, firstTime = true;
   return function(){
       var args = arguments, _me = this;
       if(firstTime){
           _self.apply(_me, args);
           return firstTime = false;
       }
       if(timer){
           return false;
       }

       timer = setTimeout(function(){
           clearTimeout(timer);
           timer = null;
           _self.apply(_me, args);
       }, interval || 500);
   }
}

   //懒加载代码实现
var viewHeight = document.documentElement.clientHeight // 可视区域的高度
var i = 0;

function lazyload () {
i++;
console.log(i)
// 获取所有要进行懒加载的图片
var eles = document.querySelectorAll('img[data-original][lazyload]')
Array.prototype.forEach.call(eles, function (item, index) {
var rect
if (item.dataset.original === '')
return
rect = item.getBoundingClientRect()
// console.log(rect)
// 图片一进入可视区，动态加载
if (rect.bottom >= 0 && rect.top < viewHeight) {
!function () {
var img = new Image()
img.src = item.dataset.original
img.onload = function () {
item.src = img.src
}
item.removeAttribute('data-original')
item.removeAttribute('lazyload')
}()
}
})
}
// 首屏要人为的调用，否则刚进入页面不显示图片
lazyload()