在网页应用中，图片是不可或缺的元素。但过多的图片会降低页面加载速度，影响用户体验。因此，懒加载技术被广泛应用。
ngx-lazy-load-images 是一个使用方便的 Angular 2+ 懒加载图片库，支持延迟加载和占位符显示。
安装
使用 npm 进行安装：
npm install ngx-lazy-load-images --save
引入模块
在 app.module.ts 中引入 NgxLazyLoadImagesModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- -----------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------------
--
---------- --------------
--
------ ----- --------- - -使用
在 HTML 模板中使用 lazyLoad 指令来延迟加载图片，defaultImage 属性指定占位符：
<img src="default-image.jpg" lazyLoad="lazy-image.jpg" defaultImage="default-image.jpg">
启用缓存
可以启用缓存来避免重复下载同一张图片：
-- -------------------- ---- -------
------ - ----------------------- --------------------- ----------- - ---- ----------------------
-----------
-------- -
--------------
----------------------
--
---------- -
- -------- --------------------- --------- ----------- -
--
---------- --------------
--
------ ----- --------- - -注：启用缓存会影响页面滚动性能，应根据实际情况决定是否使用。
事件监听
可以监听图片加载事件，例如：
<img src="default-image.jpg" lazyLoad="lazy-image.jpg" defaultImage="default-image.jpg" (load)="onImageLoad()">
export class AppComponent {
onImageLoad() {
console.log('Image loaded');
}
}总结
该教程介绍了 ngx-lazy-load-images 的安装、引入、使用、启用缓存和事件监听。ngx-lazy-load-images 的使用可以优化网页图片的加载，从而改善用户体验。希望本篇教程能对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057bf481e8991b448ebaa6