耀极客论坛

 找回密码
 立即注册
查看: 686|回复: 0

Vue lazyload图片懒加载实例详解

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220553
发表于 2022-5-8 02:07:49 | 显示全部楼层 |阅读模式
  本文通过实例代码给大家介绍了Vue lazyload图片懒加载的相关知识,通过导入配置等操作src/main.jswenj ,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
  文档:https://github.com/hilongjw/vue-lazyload
1.安装
  1. cnpm i vue-lazyload -S
  2. npm i vue-lazyload -S
复制代码
2.实例
  导入配置等操作 src/main.js
  1. import Vue from 'vue'
  2. import App from './App'
  3. import router from './router'
  4. //【1】导入懒加载
  5. import VueLazyload from 'vue-lazyload'
  6. Vue.use(VueLazyload)//【1】懒加载使用(和下面一句2选1)
  7. //【1】懒加载使用,且入全局配置,在使用处就不用配置错误图片等(2选1)
  8. // Vue.use(VueLazyload, {
  9. //   preLoad: 1.3, //加载时间
  10. //   error: 'dist/error.png', //图片错误显示此图
  11. //   loading: 'dist/loading.gif', //加载过程显示此图
  12. //   attempt: 1 //默认加载张数
  13. // })
  14. Vue.config.productionTip = false
  15. /* eslint-disable no-new */
  16. new Vue({
  17.     el: '#app',
  18.     router,
  19.     template: '‹App/>',
  20.     components: {
  21.         App
  22.     }
  23. })
复制代码
  使用懒加载src/components/lazy.vue
  【1】定义图片错误显示等(引入图片,如果是在js中。必须require进来)
【2】使用懒加载写法 v-lazy='xxx'
  1. ‹template>
  2.     ‹div>
  3.         ‹!--【2】使用懒加载写法 v-lazy='xxx'-->
  4.         ‹img v-lazy="imgUrl"/>
  5.         ‹img v-lazy="imgObj" />
  6.     ‹/div>
  7. ‹/template>
  8. ‹script>
  9.      
  10. export default{
  11.     name:"lazy",
  12.     data(){
  13.         return{
  14.         // 【1】定义图片错误显示等(引入图片,如果是在js中。必须require进来)
  15.         imgObj: {
  16.             preLoad: 1.3, //加载时间
  17.             src: "http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner1.jpg",//真正图片
  18.             error: require("../assets/error.jpg"),//如果错误显示此图
  19.             loading: require("../assets/loadding.jpg"), //加载过程显示此图
  20.             attempt: 1, //默认加载张数
  21.         },
  22.         imgUrl:"http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner2.jpg" //只加一条,即真正图
  23.         }
  24.     }
  25. }  
  26. ‹/script>
  27. ‹style>‹/style>
复制代码
  效果:图片地址错误时加载到的图片。加载过程就显示加载过程图片。

  到此这篇关于Vue-lazyload图片懒加载的文章就介绍到这了,更多相关Vue-lazyload图片懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 20:19 , Processed in 0.074534 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表