详解jQuery lazyload 懒加载

什么是懒加载

懒加载是一种提高网站性能的技术，在用户浏览网页时，只加载当前页面可见的部分，而不是一次性加载全部内容。这种技术能够减少页面的请求次数，节约流量，并且加速页面的加载速度。

jQuery lazyload

jQuery lazyload 是一款基于 jQuery 的懒加载插件，它可以延迟加载网页中的图片、视频等媒体文件，增加用户的在线体验和减轻服务器的压力。

使用方法

1. 引入 jQuery 和 lazyload 插件

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>

1. HTML 结构

将需要懒加载的图片标签的 src 属性修改为 data-original，例如：

<img data-original="img/1.jpg" src="img/loading.gif" alt="1">

1. jQuery 代码

$(function () {
  $("img[data-original]").lazyload({
    effect: "fadeIn", // 图片渐显的效果
    threshold: 200, // 提前加载距离
    failure_limit: 10, // 加载失败重试次数
    skip_invisible: false // 是否跳过隐藏的图片
  });
});

示例说明

示例1：懒加载图片

<ul class="list">
  <li><img data-original="img/1.jpg" src="img/loading.gif" alt="1"></li>
  <li><img data-original="img/2.jpg" src="img/loading.gif" alt="2"></li>
  <li><img data-original="img/3.jpg" src="img/loading.gif" alt="3"></li>
  <li><img data-original="img/4.jpg" src="img/loading.gif" alt="4"></li>
  <li><img data-original="img/5.jpg" src="img/loading.gif" alt="5"></li>
  <li><img data-original="img/6.jpg" src="img/loading.gif" alt="6"></li>
  <li><img data-original="img/7.jpg" src="img/loading.gif" alt="7"></li>
  <li><img data-original="img/8.jpg" src="img/loading.gif" alt="8"></li>
  <li><img data-original="img/9.jpg" src="img/loading.gif" alt="9"></li>
  <li><img data-original="img/10.jpg" src="img/loading.gif" alt="10"></li>
</ul>

$(function () {
  $("img[data-original]").lazyload({
    effect: "fadeIn",
    threshold: 200
  });
});

示例2：懒加载视频

<video data-original="video.mp4" src="video-loading.gif" width="640" height="360" controls></video>

$(function () {
  $("video[data-original]").lazyload({
    effect: "fadeIn",
    threshold: 200
  });
});

总结

使用 jQuery lazyload 插件能够实现网页的图片、视频等媒体文件的懒加载，从而提高网站的性能和用户体验。