在前端开发中，图片展示是一个常见的需求，而图片展示通常需要使用图片库。angular2-image-gallery-lazily-load 就是一个用于 Angular2 的图片库，支持图片的懒加载和缩略图预览功能。
npm 安装
使用 npm 安装 angular2-image-gallery-lazily-load：
npm install angular2-image-gallery-lazily-load --save
模块导入
在 AppModule 中导入 angular2-image-gallery-lazily-load 模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - -------------------------- - ---- -------------------------------------
-----------
-------- -
--------------
--------------------------
--
------------- - ------------ --
---------- - ------------ -
--
------ ----- --------- --图片 URL
定义图片的 URL 数组：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
-----------------------
-----------------
--------------------------
--
--
------ ----- ------------ -
------ - -
-
---- ----------------------------------
------------- ---------------------------------
--
-
---- ----------------------------------
------------- ---------------------------------
--
-
---- ----------------------------------
------------- ---------------------------------
-
--
-HTML 模板
在 HTML 模板中使用 angular2-image-gallery-lazily-load：
<angular2-image-gallery [images]="images" ></angular2-image-gallery>
图片懒加载
angular2-image-gallery-lazily-load 支持图片懒加载，在需要优化页面性能的情况下可以使用懒加载。在 images 中存储图片的 URL 的时候，加上 lazyLoad: true 选项即可开启图片懒加载。
-- -------------------- ---- -------
------ - -
-
---- ----------------------------------
------------- ----------------------------------
--------- ----
--
-
---- ----------------------------------
------------- ----------------------------------
--------- ----
--
-
---- ----------------------------------
------------- ----------------------------------
--------- ----
-
--缩略图预览
angular2-image-gallery-lazily-load 支持缩略图预览，在需要支持缩略图预览的情况下可以使用缩略图预览，如果不需要缩略图预览，直接去掉 thumbnailUrl 字段即可。
-- -------------------- ---- -------
------ - -
-
---- ----------------------------------
------------- ----------------------------------
--------- ----
--
-
---- ----------------------------------
------------- ----------------------------------
--------- ----
--
-
---- ----------------------------------
------------- ----------------------------------
--------- ----
-
--总结
angular2-image-gallery-lazily-load 是一个好用的图片库，支持图片的懒加载和缩略图预览功能，对于图片展示的需求来说十分方便。在实际开发中，可以根据具体的需求来灵活配置图片的 URL 和选项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583a27