vue--图片懒加载，使用vue-lazyload

╰半橙微兮° 2021-08-30 12:10 755阅读 0赞

vue v-lazy官方API：[https://www.npmjs.com/package/vue-lazyload][https_www.npmjs.com_package_vue-lazyload]

1.安装插件

npm install vue-lazyload --save-dev

2.在入口文件main.js中引入并使用

import VueLazyload from 'vue-lazyload'
    Vue.use(VueLazyload, {     
      loading: require('img/loading.png'),//加载中图片，一定要有，不然会一直重复加载占位图      
      error: require('img/error.png')  //加载失败图片
    });

3.修改图片显示方式为懒加载

<img v-lazy="'/static/img/' + item.productImage" :key="'/static/img/' + item.productImage"> //将 :src 属性直接改为v-lazy, :key是为了防止刷新页面或图片更改时图片不更新

背景图:

<div style="width:100px;height:100px;" v-lazy:background-image="{src: item.imgpath}"></div>

v-html，如从后台获取的富文本字符串中图片:（用replace将src替换为data-src）

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
      <img data-src="//domain.com/img1.jpg">
      <img data-src="//domain.com/img2.jpg">
      <img data-src="//domain.com/img3.jpg">  
    </div>

[https_www.npmjs.com_package_vue-lazyload]: https://www.npmjs.com/package/vue-lazyload

发表评论取消回复

表情：

评论列表（有 0 条评论，755人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue图片懒加载 —— vue-lazyload的使用(Marksheng)

前言：图片是网站优化的一个重点，图片懒加载是其中比较好用的一个方法。jquery也有很多图片懒加载的插件，今天看了一下vue的图片懒加载插件 ---- vue-lazyload

╰+攻爆jí腚メ/ 2022年12月27日 08:18/ 0 赞/ 212 阅读

相关 Vue图片懒加载vue-lazyload-使用

[演示][Link 1] ![322f52b362684db09fd3b1c3599d114b.gif][] 安装插件 npm install vue-l

待我称王封你为后i/ 2022年08月28日 06:39/ 0 赞/ 316 阅读

相关 vue图片懒加载

vue做的项目，图片较多，都是直接引入的，每次打开主页加载比较慢。 ![Center][] 请求总共10.7M，只是图片就占了差不多9M，完成时间花了37秒，估计老板

矫情吗；*/ 2022年06月09日 13:08/ 0 赞/ 471 阅读

相关图片懒加载

<!--<me

亦凉/ 2022年05月23日 12:19/ 0 赞/ 485 阅读

相关 vue-lazyload 图片懒加载

第一步npm install vue-lazyload --save 然后在main.js里引入 import VueLazyLoad from 'vue-lazyload

布满荆棘的人生/ 2022年05月09日 08:03/ 0 赞/ 406 阅读

相关 vue 图片懒加载

安装、引用、配置三部曲 1、安装\` npm install vue-lazyload --save-dev 2、在main.js中引用 impor

傷城~/ 2022年04月23日 12:02/ 0 赞/ 457 阅读

相关 vue图片懒加载

介绍： vue-lazyload主要应用于图片延迟加载。包含如下的特点：小巧轻便，功能强大，易于使用可以用于加载任何图像类型支持Vue 1.0和Vue 2.0

缺乏、安全感/ 2021年12月07日 09:59/ 0 赞/ 677 阅读

相关 vue--图片懒加载，使用vue-lazyload

vue v-lazy官方API：[https://www.npmjs.com/package/vue-lazyload][https_www.npmjs.com_packag

╰半橙微兮°/ 2021年08月30日 12:10/ 0 赞/ 756 阅读

相关获取vue-lazyload、VueLazyLoad加载完毕后的图片高度

有时候需要知道vue-lazyload加载完毕后，做一些操作，比如获取图片的总高度等等，使用 this.$Lazyload.$on('loaded', handler) 方

今天药忘吃喽~/ 2021年08月27日 00:53/ 0 赞/ 553 阅读

相关 vue 图片懒加载和懒加载原理

在真实图片得到之前,展示懒加载设置的图片 1、安装 cnpm i vue-lazyload -S 2、main.js

你的名字/ 2021年07月24日 20:08/ 0 赞/ 931 阅读