在现代web应用中，图片异步加载已经成为了刚性需求。但是如果直接在标签使用lazy load或者类似的库时，当图片真正被加载时可能给用户带来闪烁或者卡顿等不好的用户体验。而animated-lazy-image这个npm包则可以很好地解决这个问题。animated-lazy-image基于IntersectionObserver API实现，在图片加载完成之前，用一个带透明度递增动画代替原始图片，使得图片加载过程更加平滑。
安装
可以在npm上直接安装animated-lazy-image:
npm install animated-lazy-image
使用方法
引用animated-lazy-image
在项目中使用animated-lazy-image的具体方法是，在需要使用 animated-lazy-image 的地方引用 animated-lazy-image, 并且在元素上使用 animated-lazy-image 属性：
<script src="node_modules/animated-lazy-image/build/index.js"></script>
可供引入的文件包括:
- index.js CommonJS and ES6
- index.esm.js ES6 module
然后在img标签中增加 data-src 或稍后设置 src 属性即可使用 animated-lazy-image。
例如 html 文件：
<img data-src="path/to/your/image.jpg" alt="your image"/>
代码实现
在项目中，如过要自行实现 animated-lazy-image, 可以先创建一个 IntersectionObserver 对象，监听需要异步加载图片的元素。当元素进入视野时，将元素的data-src指向原img标签的src属性，从而实现图片的异步加载。
-- -------------------- ---- -------
----- ---------- - -------------------------------------------
----- ----------- - --- ------------------------------ --------- -- -
--------------------- -- -
-- ---------------------- -
----- --- - -------------
----------------------- ------------------------------
--------------------------------
---------------------------
-
---
---
---------------------- -- -
-------------------------
---除了图片打开动画，库还提供了占位符（placeholder）动画，可以在图片未加载前显示给用户。使用示例如下：
-- -------------------- ---- -------
-- ---------------------
------ ----------------- ---- ----------------------
-- ---------
------------------------------ - ------------- -- ----------- -----
------------------------------- - -------------- -- ------------ -----
------------------------------- - ---- -- ------- ----
------------------------------- - ------ -- -----------
-- --- --- ----------------- - --- ---------
--- ----------------------------------- -
---- -------------------------
---- ----- -------
---------- ----- ------------------ -- ------- ---------总结
使用animated-lazy-image可以很方便地在web项目中实现图片的异步加载，并且加入开启动画、占位符等视觉效果，提供更好的用户体验。但是需要注意的是，在本地进行开发时，使用这个包需要先安装对应的依赖。可以通过npm来安装并引入对应的文件，具体使用方法可以参照文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671b430d0927023822764