vue项目实现图片懒加载的简单步骤
更新时间：2022年09月01日 10:26:17 作者：Jiang_JY
懒加载的好处在于减少服务器的压力,在网络比较慢的情况下,可以提前给这张图片添加一个占位图片,提高用户的体验,这篇文章主要给大家介绍了关于vue项目实现图片懒加载的相关资料,需要的朋友可以参考下
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 |
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图片懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue element-ui使用required进行表单校验时自定义提示语问题
这篇文章主要介绍了vue element-ui使用required进行表单校验时自定义提示语问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
我们在开发大型系统的时候一般都需要动态添加路由,下面这篇文章主要给大家介绍了关于Vue3+Vite实现动态路由的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了vue实现侧边定位栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了Vue路由守卫之路由独享守卫的代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了vue项目中自定义video视频控制条的实现代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
本文主要介绍了Vue3中10多种组件通讯方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
多级联动是一种常见的交互方式,本文主要介绍了elementui实现标签页与菜单栏联动的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-06-06
这篇文章主要介绍了Vue快速实现通用表单验证功能，本文通过一个小例子给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
在vue使用clipboard.js进行一键复制文本的实现示例
这篇文章主要介绍了在vue使用clipboard.js进行一键复制文本的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了Django+Vue跨域环境配置详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
最新评论