vue

您所在的位置:网站首页 图片懒加载组件vue vue

vue

2024-01-03 18:50| 来源: 网络整理| 查看: 265

原理:

先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。 这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢,页面卡顿或崩溃等问题。

1、安装插件:

npm install vue-lazyload --save-dev

2、main.js引入插件

import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad,{ error:require('./statics/site/imgs/erro.jpg'), loading:require('./statics/site/imgs/load.gif') })

3、vue文件中将需要懒加载的图片绑定v-bind:src 修改为v-lazy

备注:若全局安装了Mint UI,在main.js中引入了Mint UI可以省略步骤1和2。 详细解读参考链接:https://mp.weixin.qq.com/s/Syqoz_Hkh7JY4GYIu_TE3A

参数选项说明



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3