在 Web 开发中，图片是页面中不可或缺的一部分。然而，在加载大量图片时，页面响应速度会明显降低。为了提升页面性能和用户体验，我们可以采用图片延迟加载技术。
图片延迟加载，也称为 Lazyload，是一种仅在需要时才加载图片的技术。它可以有效地减少页面的加载时间，并且使用户可以更快地浏览页面。在本文中，我们将介绍三种常见的 JavaScript 图片延迟加载实现方式，并提供相应的示例代码。
实现方式一：基于 IntersectionObserver API
IntersectionObserver 是 HTML5 新增加的 API，用于监测目标元素是否进入了视窗（Viewport），从而可以实现懒加载等效果。该 API 支持异步、无阻塞的监听，对于大量需要监听的元素尤其有优势。
实现原理
通过创建一个 IntersectionObserver 实例，指定一个回调函数和一些配置信息，然后将需要监听的元素作为观察目标添加到 IntersectionObserver 实例中。当观察目标与视窗发生交叉时，IntersectionObserver 会调用回调函数并传递相关参数，我们可以在回调函数中实现图片的延迟加载。
示例代码
-- -------------------- ---- -------
----- -------- - --- ------------------------------ --------- -- -
--- ------ ----- -- -------- -
-- ---------------------- -
----- --- - -------------
------- - ----------------
------------------------
-
-
-- - ---------- --- ---
----- ---- - -------------------------------------------
--- ------ --- -- ----- -
----------------------
-指导意义
IntersectionObserver API 实现方式具有性能优异、易用且可扩展的特点，能够实现高效而简洁的图片延迟加载效果。但是，需要注意的是该 API 在一些老旧的浏览器中不被支持，需要进行兼容性处理。
实现方式二：基于 getBoundingClientRect() 方法
getBoundingClientRect() 是 DOM 元素的一个方法，可以获取元素相对于视窗的位置和大小信息。通过判断元素是否在视窗内，我们可以实现图片的延迟加载。
实现原理
通过遍历页面上所有需要延迟加载的图片元素，使用 getBoundingClientRect() 获取元素的位置信息。当元素进入视窗时，将元素的 data-src 属性赋值给 src 属性，实现图片的延迟加载。
示例代码
-- -------------------- ---- -------
-------- ---------- -
----- ---- - -------------------------------------------
--- ------ --- -- ----- -
----- ---- - ----------------------------
-- --------- - ------------------ -- ----------- - -- -
------- - ----------------
--------------------------------
-
-
-
--------------------------------- ----------
--------------------------------- ----------
------------------------------------------- ----------指导意义
基于 getBoundingClientRect() 方法的实现方式是一种比较简单易用的方式，不需要依赖任何第三方库。但是，这种方法在滚动过程中会频繁触发事件，可能会影响页面性能。
实现方式三：基于 jQuery.lazyload 插件
jQuery.lazyload 是一款基于 jQuery 的图片延迟加载插件，它可以实现懒加载、按需加载以及可配置的加载效果。
实现原理
通过引入 jQuery.lazyload 插件，并设置相关参数，即可实现图片的延迟加载。该插件会监听页面滚动事件，当图片元素进入视窗时，自动将 data-src 属性赋值给 src
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1653