vue中使用layzr.js实现图片懒加载

文章目录

• vue中使用layzr.js实现图片懒加载
• 前言
• 一、Layzr.js是什么？
• 二、使用步骤

---

前言

什么是懒加载：懒加载是一种网页性能优化的方式之一，它能极大的提升用户体验。比如图片加载一直是影响网页性能的主要元凶，一张图片超过几兆已经是很经常的事了，尤其是图片量大页面卡顿更明显。如果每次进入页面就请求所有的图片资源，可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。

懒加载的原理：将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性是自定义命名，也可以使用其他）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。（可以指向loading的地址。且图片要指定宽高）当载入页面时，先把可视区域内的img标签的data-src属性值赋给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

---

懒加载的优势有以下几点：

1. 增强用户体验
2. 优化代码
3. 减少一次性服务器请求资源占用，也减轻了服务器压力
4. 减少http请求
5. 内容按需加载，更符合现代PWA加载模式

图片懒加载有多种方式，这里介绍在 vue 中使用 layzr.js 实现图片懒加载。

一、Layzr.js是什么？

layzr.js 是一个很小、速度快、无依赖的，用于浏览器图片延迟加载的库。
layzr.js 官方包的大小仅有 4 KB左右，不用担心引入依赖过大。
通过配置选项，可以实现最优雅的加载速度。layzr.js 对滚动事件也了去抖处理，以减少对浏览器的压力，以确保最佳的渲染

二、使用步骤

1.引入库

代码如下（示例）：

安装 layzr.js ，并将其添加到你的 package.json 依赖项中

npm install layzr.js --save

然后在文件中引入

import Layzr from 'layzr.js'

2.设定图片

html代码：

<div class="doc-block">
	<!-- 此处插入其他占位内容 -->
  <img data-normal="http://callmecavs.com/layzr.js/images/demo/1.jpg"
    data-retina="http://callmecavs.com/layzr.js/images/demo/1-retina.jpg"
    data-srcset="http://callmecavs.com/layzr.js/images/demo/1.jpg 1x, http://callmecavs.com/layzr.js/images/demo/1-retina.jpg 2x">
  <img data-normal="http://callmecavs.com/layzr.js/images/demo/2.jpg"
    data-retina="http://callmecavs.com/layzr.js/images/demo/1-retina.jpg"
    data-srcset="http://callmecavs.com/layzr.js/images/demo/2.jpg 1x, http://callmecavs.com/layzr.js/images/demo/1-retina.jpg 2x">
  <img data-normal="http://callmecavs.com/layzr.js/images/demo/3.jpg"
    data-retina="http://callmecavs.com/layzr.js/images/demo/1-retina.jpg"
    data-srcset="http://callmecavs.com/layzr.js/images/demo/3.jpg 1x, http://callmecavs.com/layzr.js/images/demo/1-retina.jpg 2x">
  <img data-normal="http://callmecavs.com/layzr.js/images/demo/4.jpg"
    data-retina="http://callmecavs.com/layzr.js/images/demo/1-retina.jpg"
    data-srcset="http://callmecavs.com/layzr.js/images/demo/4.jpg 1x, http://callmecavs.com/layzr.js/images/demo/1-retina.jpg 2x">
  <img data-normal="http://callmecavs.com/layzr.js/images/demo/5.jpg">
  <img :data-normal="getImage()">
</div>

js代码：

<script>
import Layzr from 'layzr.js'

export default {
	mounted() {
		this.lazyLoadImgHandler()
	},
	methods: {
		lazyLoadImgHandler() {
			// using custom options
			const instance = Layzr({
				normal: 'data-normal',
				retina: 'data-retina',
				srcset: 'data-srcset',
				threshold: 0,
			})
			document.addEventListener('DOMContentLoaded', event => {
				instance
					.update() // track initial elements
					.check() // check initial elements
					.handlers(true) // bind scroll and resize handlers
			})
		},
		getImage() {
			return require('./ye.jpg')
		},
	},
}
</script>

Demo

img 的 data-normal 属性为必须项。参数可以为cdn的图片链接，当使用本地图片时要注意，需要使用methods方法或者 computed 属性通过 require 引入。原因是正常我们通过src写相对路径时，实际运行会通过webpack url-loader编译为运行路径。而`data-normal为自定义属性，不会被编译。

这样一个基本的懒加载就完成了。如果有其他要求或使用方式可以参见官网的具体API使用。

Layzr.js 的其他属性及方法使用，详见官网

---

3注意事项

layzr 会监听滚动事件，所以懒加载的图片放到需要滚动的页面上图片才会被加载，否则图片将不会显示。
另外在微服务中该方式不生效，请注意