如何将Vue项目中的图片实现高效且简单的懒加载功能？

本文共计845个文字，预计阅读时间需要4分钟。

目录

1.安装vue-lazyload插件

2.在main.js中引用

3.使用（将图片设置为懒加载）

总结

1.安装vue-lazyload插件：运行命令`npm install vue-lazyload --save-dev`

2.在main.js中引用：`import VueLazyload from 'vue-lazyload'`

3.使用：将图片标签的`src`属性替换为`v-lazy`指令，例如``

目录

• 1、安装vue-lazyload插件
• 2、在main.js中进行引用
• 3、使用（将图片设置为懒加载）
• 总结

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 })

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

keydescriptiondefaultoptionspreLoad预压高度比例1.3Numbererrorsrc of the image upon load fail（指定加载失败时图片）‘data-src’Stringloadingsrc of the image while loading（指定加载图片）‘data-src’Stringattempt尝试计数3NumberlistenEvents想要监听的事件[‘scroll’, ‘wheel’, ‘mousewheel’, ‘resize’, ‘animationend’, ‘transitionend’, ‘touchmove’]Desired Listen Eventsadapter动态修改元素属性{ }Element Adapterfilter图片监听或过滤器{ }Image listener filterlazyComponentlazyload 组件falseLazy ComponentdispatchEvent触发dom事件falseBooleanthrottleWaitthrottle wait200Numberobserveruse IntersectionObserverfalseBooleanobserverOptionsIntersectionObserver options{ rootMargin: ‘0px’, threshold: 0.1 }IntersectionObserversilentdo not print debug infotrueBoolean

3、使用（将图片设置为懒加载）

<img v-lazy="psdimg" class="psd" />

注意：

当遇到是v-for循环的时候，或者用div包裹着img的时候，需要在div上面添加 v-lazy-container="{ selector: ‘img’ }"

<div v-lazy-container="{ selector: 'img' }"> <img data-src="//aaa.com/img1.jpg"> <img data-src="//aaa.com/img2.jpg"> <img data-src="//aaa.com/img3.jpg"> </div> <!--或者这种：--> <div v-lazy-container="{ selector: 'img' }" v-html="content"> </div>

如果是这种情况的话，一定要使用 data-src 来指定路径，而不使用v-lazy。因为如果使用的是v-lazy的话，拿到了图片地址也会一直显示不出来。

总结

到此这篇关于vue项目实现图片懒加载的文章就介绍到这了,更多相关vue图片懒加载内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！