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

最新推荐文章于 2024-05-08 09:36:54 发布

原创最新推荐文章于 2024-05-08 09:36:54 发布 · 866 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angular

NodeJS 同时被 2 个专栏收录

27 篇文章

订阅专栏

Angular

4 篇文章

订阅专栏

本文介绍了如何通过Angular实现图片懒加载，提升页面加载速度。首先将图片的src替换为同一张占位图或空图，然后将真实图片URL存入自定义属性lazy-src。当图片进入视口时，通过JavaScript将lazy-src的值赋予src，实现懒加载效果。文章提供了me-lazyload库的GitHub链接及详细集成步骤，并展示了可配置参数如animate-visible和animate-speed，以控制图片的渐入显示效果。

为提高页面加载速度，需要先将img标签中的src链接设为同一张图片或者空白图片，将其真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视窗口时，将自定义属性中的地址写到src属性中，达到懒加载的效果。

me-lazyload

GitHub - wyntau/me-lazyload: image lazyload directive for angularimage lazyload directive for angular. Contribute to wyntau/me-lazyload development by creating an account on GitHub.https://github.com/wyntau/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="" />