在 Web 开发中，图片懒加载是非常常见的技术，其主要目的是优化页面加载速度和用户体验，以及节约带宽。它能够使得页面在浏览器滚动到可视区域时再加载图片，而不是在页面一开始就加载所有的图片。Angular 中也可以很方便地实现图片懒加载。
一、使用 ng-lazyload-image 库
Angular 中有一个非常优秀的图片懒加载库：ng-lazyload-image 。它提供了一个 lazyLoad 指令，可以很方便地将图片懒加载应用到 Angular 应用中。
安装
在使用之前，需要先安装该库。可以通过 npm 命令来进行安装：
npm install ng-lazyload-image --save
使用
在需要进行懒加载的图片上，添加 lazyLoad 指令，并赋值为图片的路径。例如：
<img [lazyLoad]="image.path">
此时，lazyLoad 指令会自动将图片暂存起来，当此图片进入可视区域时，才会加载该图片。
懒加载选项
还可以通过 LazyLoadImageModule 模块的 forRoot 和 forChild 方法进行配置懒加载选项。例如：
-- -------------------- ---- -------
-----------
-------- -
-----------------------------
------- ------------ -- ---------
--
--
------------- ---------------
---------- --------------
--
------ ----- --------- --其中，scrollPreset 表示使用默认的滚动预设，该预设会在浏览器滚动到图片的可视区域时进行加载。也可以自定义预设，如下所示：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - -------------------- ----------- - ---- --------------------
-----------
-------- -
-----------------------------
------------ -
---------------------- -- ------
------------------------- -- -- ---- -----
---------------------------- -- -- ---- -----
--
------- --- -- ---- ----- ----
--
--
------------- ---------------
---------- --------------
--
------ ----- --------- --二、自定义指令实现图片懒加载
除了使用第三方库之外，还可以通过自定义指令的方式来实现图片懒加载。自定义指令是一个非常强大的 Angular 特性，能够使得代码更加灵活、可重用。
实现步骤
- 定义懒加载指令（
lazy-load.directive.ts）。
-- -------------------- ---- -------
------ - ---------- ----------- ----- - ---- ----------------
------------
--------- ------------
--
------ ----- ----------------- -
-------- ---------- -------
------------------- -------- ----------- --
----------------- -
----- -------- - -- -- -
----- -------- - ---------------------------------------------------
-- ----------------
-- ------------- -- - -- ------------ -- ------------------- -
------------------------------ - --------------
------------------------------------ ----------
-
--
--------------------------------- ----------
-
-在代码中，我们监听了 scroll 事件，通过 getBoundingClientRect() 方法获取图片位置，判断图片是否在可视范围内，如果在，则加载图片。
- 在模板中使用
lazyLoad指令。
<img [lazyLoad]="image.path">
- 在模块中声明
LazyLoadDirective。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------------- - ---- ------------------------
-----------
------------- -
-----------------
--
-------- -
-----------------
-
--
------ ----- -------------- --此时，通过 LazyLoadModule 模块，就可以在其他模块中使用 LazyLoadDirective 懒加载指令了。
总结
本文介绍了 Angular 中两种实现图片懒加载的方法：使用 ng-lazyload-image 库和自定义指令。其中，ng-lazyload-image 库使用简单、适用广泛，但是可能不够灵活。自定义指令则可以根据具体业务场景进行优化，能够更加可定制化。希望本文能够对你在 Angular 中实现图片懒加载有所帮助。完整示例代码可以在 GitHub 上查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c3579483d39b488175893d