Angular中使用me-lazyload实现图片懒加载
发布时间:2020-12-17 08:15:13 所属栏目:安全 来源:网络整理
导读:1. 懒加载概述 实现原理:先将img标签中的src链接设为同一张图片或者空白图片,将其真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视窗口时,将自定义属性中的地址写到src属性中,达到懒加载的效果。 目的:提高首屏速度。 2. me-l
1. 懒加载概述
2. me-lazyload(1) github地址https://github.com/Wyntau/me-lazyload (2) 下载me-lazyload是没有办法用npm或者yarn进行安装,唯一搜到的是用bower,所以,推荐直接把me-lazyload克隆下来,文件夹内容如下: 将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] 属性替换将图片的 <img lazy-src="{{imgUrl}}" alt="" />
(4) 可配置参数有两个参数可以配置:
<img lazy-src="{{imgUrl}}" animate-visible="true" animate-speed="0.5s" alt="" /> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |