百变鹏仔-专注前端行业精选

用Vue实现图片懒加载

作者：鹏仔先生日期：2020-06-01 15:22:10浏览：1306分类：JavaScript

懒加载：首先将图片的src链接设为同一张图，并将其真正的图片地址存储在img标签的自定义属性中。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。

顾名思义，简单理解就是当页面打开，首先所有数据引进来的图片先不显示，所有图先加载自己指定的某一张图片，一般动态图片效果更好，然后真正路径图片一个一个显示到页面，从而达到懒加载效果。

优点：懒加载能防止页面一次性向服务器响应大量请求导致服务器响应慢，防止页面卡顿或崩溃等问题。

首先，我们需要下载下安装下懒加载的插件(模块化)

npm install vue-lazyload -s

安装完，如下图

用Vue实现图片懒加载

接着，我们需要模块化式引入 vue-lazyload.js

import lazyload from "vue-lazyload"

下面，我们在VUE中引入一张图片，单引号里面的就是到时候懒加载时候显示的图片，具体路径大家自己找对自己的路径

Vue.use(
	lazyload,{
		loading:'../static/images/ttp.gif'
	}
)

下一步我们找到需要实现懒加载的图片位置代码，如：

<img :src="listB[0].Pic"/>

我们将 :src 改为 v-lazy即可，改完如下：

<img v-lazy="listB[0].Pic"/>

这样我们的懒加载就实现了，如需补充，请下方留言

前端 H5 vue

手机扫码访问

猜你还喜欢