Vue使用图片懒加载

为什么要使用图片懒加载？

从后端获取数据时有一定的延迟，加载的时候图片会突然跳出来，图片懒加载就是在还没获取到图片数据的时候放一张动图占位，获取到数据再替换，增加用户体验。

安装

npm install vue-lazyload@1.3.4 --save

main.js引入

// 引入图片懒加载
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {preLoad: 1.3,//预压高度比例error: require('@/assets/err.jpg'),//错误图片loading: require('@/assets/loading-bubbles.svg'),//加载动图attempt: 1,
});

package.json中查看安装是否成功

在vue中使用，我这里是把图片保存在后端再取出。

附：loading-bubbles.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="#ee7a23"><circle transform="translate(8 0)" cx="0" cy="16" r="0"><animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0"keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" /></circle><circle transform="translate(16 0)" cx="0" cy="16" r="0"><animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.3"keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" /></circle><circle transform="translate(24 0)" cx="0" cy="16" r="0"><animate attributeName="r" values="0; 4; 0; 0" dur="1.2s" repeatCount="indefinite" begin="0.6"keytimes="0;0.2;0.7;1" keySplines="0.2 0.2 0.4 0.8;0.2 0.6 0.4 0.8;0.2 0.6 0.4 0.8" calcMode="spline" /></circle>
</svg>

Vue使用图片懒加载相关推荐

vue java图片懒加载_vue 实现图片懒加载功能
一个页面图片比较多的时候,需要对界面的图片进行懒加载处理,今天遇到了,做个懒加载的笔记. 1,需要安装vue的懒加载插件. npm install vue-lazyload --save-dev 2, ...
vue脚手架图片懒加载模块和样式穿透
1.vue样式穿透 vue样式穿透:在样式隔离的前提下,在父组件中修改子组件样式正常情况下,在样式隔离的前提下,父标签不能修改子组件样式.如果想修改子组件样式,使用样式穿透 1.1 样式穿透语法结构 ...
图片懒加载及Vue自定义图片懒加载指令
文章目录监听滚动的方式 IntersectionObserver方式自定义图片懒加载vue指令1 自定义图片懒加载vue指令2 lazyLoadImage.js main.js中注册指令组件中使 ...
Vue之图片懒加载vue-lazyload
具体细节以及更多拓展可前往npm官网查看: https://www.npmjs.com/package/vue-lazyload Github了解源码:https://github.com/hilon ...
vue3 图片懒加载的实现
什么是图片懒加载? 图片懒加载就是鼠标滑到哪,图片就加载到哪一开始把图片的地址放在data-set属性中,而不是放在src中,这样图片就不会发送http请求.我们通过计算距离,当整个页面的高度 ...
vue 图片拖动加载类似于地图_前端性能优化之图片懒加载（附vue自定义指令）...
作者:lzg9527 链接:https://juejin.cn/post/6903774214780616718 在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列 ...
vue图片懒加载插件vue-lazyload监听加载失败事件的解决方案
对于vue项目而言,图片懒加载是一个常见的图片加载方案,可以优化用户体验,而vue-lazyload则是一个广泛使用的插件. 对于某些业务场景,我们需要监听图片加载失败事件,而后进行相应的处理,然 ...
图片懒加载和Vue路由懒加载
图片懒加载什么是懒加载? 懒加载也叫做延迟加载或者按需加载 .在长网页中延迟加载暂时未看到的图片数据,能够优化网页性能,提高用户体验 .在较长的网页或应用中,如果图片很多,等待全部图片都被加载出来需 ...
vue图片懒加载vue-lazyload
vue图片懒加载vue-lazyload 需求描述功能实现需求描述图片过大,加载缓慢,图片懒加载,添加Loading状态,优化展示效果. 功能实现 1.安装vue-lazyload npm in ...

Vue使用图片懒加载

Vue使用图片懒加载相关推荐

最新文章

热门文章