前言
当网页中图片较多、较大时，会造成网页加载速度变慢，影响用户体验。因此，图片懒加载技术应运而生。而 jquery-image-lazyload 是一款轻量级的 jQuery 图像懒加载插件，能够实现图片的懒加载，减少页面加载时间。
安装
可以在 npm 官网上进行安装：
npm install jquery-image-lazyload
或者从 GitHub 上进行下载：
git clone https://github.com/tuupola/jquery_lazyload.git
引入
可以通过以下两种方式引入：
第一种方式
-- -------------------- ---- -------
------
------
---- -- ------ --- ---
------- -----------------------------------------------------------
---- -- --------------------- -- ---
------- ------------------------------
--------
------------ -
-------------------------
---
---------
-------
------
---- ------------ ----------------------------------- --
-------
-------第二种方式
-- -------------------- ---- -------
------
------
---- -- ------ --- ---
------- -----------------------------------------------------------
---- -- --------------------- -- ---
------- ------------------------------
-------
------
---- ------------ ----------------------------------- --
--------
------------ -
-------------------------
---
---------
-------
-------配置参数
jquery-image-lazyload 可以配置一些参数，以满足不同场景下的需求。下面介绍一些常用的配置参数：
effect
- 默认值："fadeIn"
- 说明：图片懒加载出来的效果，可以是一些简单的动画，如 fadeIn、show、slideDown、fadeInSlow 等。
threshold
- 默认值：0
- 说明：浏览器滚动到图片位置之前，提前加载的距离，可以减少滚动时出现空白的时间。
failure_limit
- 默认值：0
- 说明：设置加载错误图片的次数，如果设为 10，那么加载 10 次图片失败后就不再尝试加载。默认值 0 表示一直尝试加载直到成功。
effect_speed
- 默认值：400
- 说明：图片懒加载出来的时间，单位为毫秒。
container
- 默认值：window
- 说明：容器，当页面中不止一个容器需要加载图片时，可以指定容器，可以是一个元素，也可以是一个解析器。
更多配置参数可以参考 官方文档。
示例
下面我们通过一个示例来演示如何使用 jquery-image-lazyload。
-- -------------------- ---- -------
------
------
---- -- ------ --- ---
------- -----------------------------------------------------------
---- -- --------------------- -- ---
------- ------------------------------
-------
--- -
------ ------
------- ------
-
--------
-------
------
----
----
---- ------------ ------------------------- ------------------------- --
-----
----
---- ------------ ------------------------- ------------------------- --
-----
----
---- ------------ ------------------------- ------------------------- --
-----
----
---- ------------ ------------------------- ------------------------- --
-----
----
---- ------------ ------------------------- ------------------------- --
-----
----
---- ------------ ------------------------- ------------------------- --
-----
-----
--------
------------ -
------------------------
------- ---------
---------- ----
-------------- ---
------------- ----
---------- ---------------
---
---
---------
-------
-------在上面的示例中，我们加载了 6 张图片，每张图片都有一个懒加载的 class 名称，这里为 lazy。图片加载之前，使用 placeholder.png 来占位。
接着，我们通过 $() 方法来选取 img 元素，并调用 lazyload() 方法。其中，我们对懒加载进行了一些参数配置：
- 效果为渐变显示。
- 预先加载图片位置之前 200px 的距离。
- 如果加载图片 10 次失败，就不再进行后续加载了。
- 加载图片的速度为 500ms。
- 指定容器为 id 为 container 的元素。
总结
经过上面的介绍，我们可以看出 jquery-image-lazyload 是一款十分实用的图片懒加载插件，它可以帮助我们提高网页加载速度，提升用户的体验感。当图片数量较多且比较大时，可以使用这个插件进行懒加载，使得图片不会同时加载，而是需要时才会被加载。同时，jquery-image-lazyload 还支持一些参数配置，以更好地满足不同场景下的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005517781e8991b448cec49