1. 懒加载概述
- 实现原理：先将img标签中的src链接设为同一张图片或者空白图片，将其真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视窗口时，将自定义属性中的地址写到src属性中，达到懒加载的效果。
- 目的：提高首屏速度。
2. me-lazyload
(1) github地址
https://github.com/Wyntau/me-lazyload
(2) 下载
me-lazyload是没有办法用npm或者yarn进行安装，唯一搜到的是用bower，所以，推荐直接把me-lazyload克隆下来，文件夹内容如下：
运行index.html可以看到简单实例。
将me-lazyload.js引入需要的工程即可。
(3) 使用
首先需要明确的是，me-lazyload是一个指令。
[1] 依赖注入
将me-lazyload注入祖先module或者需要使用的module。
var app= angular.module('myApp',['me-lazyload']);
或者
let storiesListFilterableModule = angular.module('storiesListFilterable',['me-lazyload'])
[2] 属性替换
将图片的src替换成lazy-src。
<img lazy-src="{{imgUrl}}" alt="" />
(4) 可配置参数
有两个参数可以配置：
| 参数名 | 描述 | 取值(示例) | 默认值 |
|---|---|---|---|
animate-visible |
是否以渐入的方式显示图片（包括初始化加载的图片） | “true” | “false” |
animate-speed |
渐入显示的速度（图片透明度从0到1） | “0.5s” | “1s” |
<img lazy-src="{{imgUrl}}" animate-visible="true" animate-speed="0.5s" alt="" />