如何使用jQuery实现懒加载图片？

翻滚的胖子
2023-08-22 15:22:21
前端技术
JavaScript PHP

什么是懒加载图片？

懒加载图片是一种技术，它可以延迟加载页面中的图片，当用户滚动到图片所在的位置时才进行加载，从而提升页面加载速度和用户体验。

使用jQuery实现懒加载图片的方法

要使用jQuery实现懒加载图片，我们需要使用一些函数和细节用法参数，下面将逐步介绍。

步骤一：引入jQuery库

首先，我们需要在页面中引入jQuery库，可以通过以下方式：

1	`<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>`

步骤二：设置占位图

在页面中，我们需要为每个要懒加载的图片设置一个占位图，当图片未加载时，显示占位图：

1	`<img src="占位图路径"` `data-src="真实图片路径">`

步骤三：编写懒加载函数

接下来，我们需要编写一个懒加载函数，用于判断图片是否在可视区域内，如果在可视区域内，则加载真实图片：

function lazyLoad() {
  $("img").each(function() {
    var imgTop = $(this).offset().top;
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (imgTop < scrollTop + windowHeight) {
      $(this).attr("src", $(this).data("src"));
    }
  });
}
 
$(window).scroll(function() {
  lazyLoad();
});

步骤四：调用懒加载函数

最后，我们需要在页面加载完成后调用懒加载函数，实现图片的懒加载：

$(document).ready(function() {
  lazyLoad();
});

代码案例

下面是一个完整的代码案例，帮助你更好地理解如何使用jQuery实现懒加载图片：

<!DOCTYPE html>
<html>
<head>
  <title>懒加载图片</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <style>
    img {
      width: 200px;
      height: 200px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <img src="占位图路径" data-src="图片1路径">
  <img src="占位图路径" data-src="图片2路径">
  <img src="占位图路径" data-src="图片3路径">
  <img src="占位图路径" data-src="图片4路径">
  <img src="占位图路径" data-src="图片5路径">
 
  <script>
    function lazyLoad() {
      $("img").each(function() {
        var imgTop = $(this).offset().top;
        var scrollTop = $(window).scrollTop();
        var windowHeight = $(window).height();
        if (imgTop < scrollTop + windowHeight) {
          $(this).attr("src", $(this).data("src"));
        }
      });
    }
 
    $(window).scroll(function() {
      lazyLoad();
    });
 
    $(document).ready(function() {
      lazyLoad();
    });
  </script>
</body>
</html>