介绍
@ngu/image 是一个 Angular 应用中用于图像懒加载的 npm 包。它能够在页面中有大量图片需要加载时，帮助我们优化页面性能，减少网络带宽的压力，提升用户体验。
安装
要使用 @ngu/image，你需要先安装好 npm 和 Angular CLI。安装方法如下：
npm install @ngu/image --save
使用
在 app.module.ts 文件中导入引用：
-- -------------------- ---- -------
------ - ----------------- - ---- ----------------
------ - ---------------------- - ---- -------------
-----------
-------- -
--------------
------------------
-----------------------
--
------------- ---------------
---------- ---------------
--
------ ----- --------- -
-在 HTML 文件中，你可以这样使用懒加载图片：
<img [defaultImage]="defaultImageURL" [lazyLoad]="imageURL" />
其中，defaultImage 属性为一个加载时的预设图像地址，lazyLoad 属性则表示要进行懒加载的图片地址。
深入使用
在实际应用中，我们常常需要对图片进行一些特殊处理，例如图片放大、压缩、以及动画效果等。在 @ngu/image 中，我们可以通过创建自定义指令来实现这些操作。
下面是一个使用 CSS 动画效果的自定义指令的例子：
-- -------------------- ---- -------
------ - ---------- ----------------- ----- - ---- ----------------
------ - ---------------------- - ---- -------------
------------
--------- --------------------
--
------ ----- ------------------------ ------- ---------------------- -
-------- ------ -------
------------------- --- ----------------- -
----------
-
------------------ --
------------- -
----- ------------ - ---------- - -------------------- --- - --
------------- -- -
---------------------------------------------------------------- -------------------
-- --------------
-
-使用方式如下：
<img [defaultImage]="defaultImageURL" [lazyLoadAnimate]="imageURL" delay="500"/>
上述代码中，我们通过继承 LazyLoadImageDirective 类并重载其中的 onImageLoad() 方法，来添加一个名为 lazyLoadAnimate 的自定义指令。在 onImageLoad() 中，我们使用了 CSS 库 animate.css 的 fadeIn 动画效果，并在不同时间点进行了延迟，来使动画效果更加自然。
结论
@ngu/image 是一个非常优秀的图片懒加载 npm 包，它为我们的前端开发带来了很大的便利和效率。通过本文的介绍，相信大家已经对它有了初步的了解，并能在实际应用中进行灵活的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bdb81e8991b448e5857