为提高页面加载速度,需要先将img标签中的src链接设为同一张图片或者空白图片,将其真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视窗口时,将自定义属性中的地址写到src属性中,达到懒加载的效果。
me-lazyload
下载下来运行index.html可以看到demo实例。
集成步骤:
(1)将me-lazyload.js引入需要的工程
(2)将me-lazyload注入根模块module或者需要使用的module
var app= angular.module('myApp',['me-lazyload']);
(3)将图片的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="" />