jQuery懒加载

学习如何延迟加载图片，当图片进入可视区域时才加载，节省带宽并提速。 · 难度：入门 · +15XP

jQuery懒加载

懒加载（Lazy Loading）是一种优化技术，它延迟加载非可视区域的资源（如图片），直到用户滚动到它们附近。这可以显著减少初始页面加载时间。

工作原理

将图片的真实URL存储在data-src属性中，src属性使用占位图。通过监听滚动事件，检查图片是否进入可视区域，如果是，则将data-src赋值给src。

关键代码

$(window).scroll(function() {
  $('img[data-src]').each(function() {
    var img = $(this);
    var offset = img.offset().top - $(window).scrollTop();
    if (offset < $(window).height() && offset > -img.height()) {
      img.attr('src', img.attr('data-src'));
      img.removeAttr('data-src');
    }
  });
});

优势对比

练习提示

在右侧代码中，添加一个占位图背景色，并检查图片是否在加载前显示灰色。