您现在的位置是：网站首页> 编程资料编程资料

vue项目实现图片懒加载的简单步骤_vue.js_

2023-05-24 431人已围观

简介 vue项目实现图片懒加载的简单步骤_vue.js_

1、安装vue-lazyload插件

npm install vue-lazyload --save-dev

2、在main.js中进行引用

import VueLazyload from "vue-lazyload"; Vue.use(VueLazyload); //或者自定义配置插件 Vue.use(VueLazyload, { preLoad: 1.3, error: require('../src/assets/image/error.png'), loading: require('../src/assets/image/loading.gif'), attempt: 1 })

注意：

这里存在一个坑，当图片放在 assets文件下 的时候，要使用上面的这种 require(‘相对路径’）的写法来进行引入。当图片放在 static文件下 的时候就可以直接写路径来进行引入，像下面的写法一样。

static文件图片引入方法：

Vue.use(VueLazyload, { preLoad: 1.3, error: '../src/assets/image/error.png', loading: '../src/assets/image/loading.gif', attempt: 1 })

各个自定义配置属性含义：

key	description	default	options
preLoad	预压高度比例	1.3	Number
error	src of the image upon load fail（指定加载失败时图片）	‘data-src’	String
loading	src of the image while loading（指定加载图片）	‘data-src’	String
attempt	尝试计数	3	Number
listenEvents	想要监听的事件	[‘scroll’, ‘wheel’, ‘mousewheel’, ‘resize’, ‘animationend’, ‘transitionend’, ‘touchmove’]	Desired Listen Events
adapter	动态修改元素属性	{ }	Element Adapter
filter	图片监听或过滤器	{ }	Image listener filter
lazyComponent	lazyload 组件	false	Lazy Component
dispatchEvent	触发dom事件	false	Boolean
throttleWait	throttle wait	200	Number
observer	use IntersectionObserver	false	Boolean
observerOptions	IntersectionObserver options	{ rootMargin: ‘0px’, threshold: 0.1 }	IntersectionObserver
silent	do not print debug info	true	Boolean