什么是 angular-lazy-img
angular-lazy-img 是一个 AngularJS 指令，用于实现页面图片的懒加载。懒加载是指在页面渲染完成后，只对当前可视区域内的图片进行加载，减少无用请求，提高页面加载速度，提升用户体验。
安装
在项目中使用 npm 安装：
npm install angular-lazy-img --save
然后在自己的代码中引入：
<script src="node_modules/angular-lazy-img/angular-lazy-img.js"></script>
或者通过 ES6 的方式：
import angular from 'angular';
import lazyImg from 'angular-lazy-img';
angular.module('myApp', [lazyImg]);使用方法
基本使用
将 lazy-img 指令添加到需要懒加载的 img 元素上即可，如：
<img lazy-img="{{image.url}}">当图片元素进入可视区域后，将会自动加载图片。
设置默认图片
在实际使用中，由于图片加载需要一定时间，较大的图片甚至可能需要几秒甚至十几秒的时间，所以可以设置一个默认图片来展示，等图片加载之后再替换上。
<img lazy-img="{{image.url}}" lazy-src="./default.png">在这段代码中，lazy-src 属性设置 img 元素默认显示的图片，等到实际图片加载完成之后，图片将被替换。
自定义加载事件
angular-lazy-img 允许我们自定义图片的加载事件，以便我们在图片加载完成之后，对图片进行一些自定义操作。
<img lazy-img="{{image.url}}" lazy-img-loaded="imageLoaded()">在这段代码中，lazy-img-loaded 属性设置了一个事件触发器，当图片加载完成之后，触发 imageLoaded() 函数。
示例代码
完整的 angular-lazy-img 指令的基本配置及用法如下：
<img lazy-img="{{image.url}}" lazy-src="./default.png" lazy-img-loaded="imageLoaded()">-- -------------------- ---- -------
------ ------- ---- ----------
------ ------- ---- -------------------
----------------------- ----------
--------------------- ---------- ---------------- -
------------ - -
---- --------------------------
--
------------------ - ---------- -
-- -------------
--
----总结
angular-lazy-img 是一款非常优秀的图片懒加载组件，解决了图片加载慢的问题，并且还支持自定义加载完成事件，功能非常强大。在进行优化页面性能时，angular-lazy-img是一款非常值得使用的组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557f181e8991b448d508f