Angular中使用me-lazyload实现图片懒加载

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克隆下来,文件夹内容如下:
Angular中使用me-lazyload实现图片懒加载_第1张图片
运行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="" />

你可能感兴趣的:(前端)