lazyload实现原理（图片延迟加载）

最新推荐文章于 2023-03-03 15:38:07 发布

原创最新推荐文章于 2023-03-03 15:38:07 发布 · 955 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #图片

本文介绍了一种名为懒加载的技术，该技术通过定时器检测图片是否进入浏览器视口区域来延迟图片加载，以此提高网页加载速度。文章提供了使用原生JavaScript和jQuery实现懒加载的具体代码示例。

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

核心原理是：

设置一个定时器，计算每张图片是否会随着滚动条的滚动，而出现在视口（也就是浏览器中的展现网站的空白部分）中；
为标签设置一个暂存图片URL的自定义属性（例如loadpic），当图片出现在视口时，再将loadpic的值赋给图片的src属性；

原生JavaScript的实现方法

<script>
  var imgs = document.getElementsByTagName('img');
  // 获取视口高度与滚动条的偏移量
  function lazyload(){
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    for(var i=0; i<imgs.length; i++) {
      var x =scrollTop+viewportSize-imgs[i].offsetTop;
      if(x>0){
        imgs[i].src = imgs[i].getAttribute('loadpic');   
      }
    }
  }
  setInterval(lazyload,1000);
</script>

jQuery的实现方法

/**
* 图片的src实现原理
*/
$(document).ready(function(){
  // 获取页面视口高度
  var viewportHeight = $(window).height();
  var lazyload = function() {
    // 获取窗口滚动条距离
    var scrollTop = $(window).scrollTop();
    $('img').each(function(){
    // 判断 视口高度+滚动条距离 与 图片元素距离文档原点的高度         
    var x = scrollTop + viewportHeight - $(this).position().top;
    // 如果大于0 即该元素能被浏览者看到，则将暂存于自定义属性loadpic的值赋值给真正的src           
    if (x > 0)
    {
      $(this).attr('src',$(this).attr('loadpic')); 
    }
  })
  }
  // 创建定时器 “实时”计算每个元素的src是否应该被赋值
  setInterval(lazyload,100);
});