解决有两步：
1.采用渐进式加载：原图未加载完时显示比它内存小的模糊图；

2.采用懒加载：只加载可视区域的图片，即滚动到可视区域时再加载图片

vue-lazyload-img：VUE图片懒加载插件
vue-progressive-image：VUE的渐进图像加载插件

渐进式加载

引入依赖

npm install progressive-image --save

main.js引入

import progressive from 'progressive-image/dist/vue'; // 渐进式import 'progressive-image/dist/index.css';//样式Vue.use(progressive, {removePreview: true,scale: true
})

页面引入CSS样式

<link href="//unpkg.com/progressive-image/dist/index.css" rel="stylesheet" type="text/css">或者在main.js引入
import 'progressive-image/dist/index.css';

vue组件封装

// 图片渐进式加载
<template><div class="img"><!-- 图片渐进式加载 --><div v-for="(item, index) in imgs" :key="index"><div class="progressive"><img v-progressive="item.preview" :src="item.src" class="imgs" /></div></div></div>
</template><script>
export default {props: ["imgs"],mounted() {},data() {return {// img: {//   src: require("../../assets/img/qg/bg_reg.png"), //小//   preview: require("../../assets/img/qg/bg_QG.png"), //大// },// imgs: [//   {//     src: require("../../assets/img/qg/bg_reg.png"), //小//     preview: require("../../assets/img/qg/bg_QG.png"), //大//   },// ],};},
};
</script><style lang="less" scoped>
.img {.progressive {.imgs {width: 100%;height: 100%;}}
}
</style>

使用

使用
<v-progressive :imgs="imgs"></v-progressive>引入import vProgressive from "../components/progressive/progressive";数据源
data() {return {imgs: [{src: require("../assets/img/qg/bg_reg.png"), //小preview: require("../assets/img/qg/bg_QG.png"), //大},],
}

图片懒加载

引入依赖

npm install vue-lazyload --save-dev

main.js引入

import VueLazyLoad from 'vue-lazyload'; // 懒加载
Vue.use(VueLazyLoad,{error:'../static/img/tzb.jpg', // 加载错误的图片loading:'../static/img/tzb.jpg' // 加载时的图片
});

附源码

<template><div class="image"><!-- 懒加载 --><img class="preview" v-lazy="img" /><div v-for="(item, index) in imags" :key="index"><div class="progressive"><img class="preview" v-progressive="item.preview" :src="item.src" /></div></div></div>
</template><script>
export default {data() {return {img: require("../assets/image/img03.jpg"),imags: [{src: require("../assets/image/img01.jpg"), //小preview: require("../assets/image/img02.jpg"), //大},{src:require('../assets/image/img01.jpg'),preview:require('../assets/image/img03.jpg'),}],};},
};
</script><style lang="less" scoped>
.preview {width: 100%;
}
</style>

main.js

import VueLazyLoad from 'vue-lazyload'; // 懒加载
Vue.use(VueLazyLoad,{error:'../static/logo.png', // 加载错误的图片loading:'../static/image/img02.jpg' // 加载时的图片
});import progressive from 'progressive-image/dist/vue'; // 渐进式
import 'progressive-image/dist/index.css';//样式
Vue.use(progressive, {removePreview: true,scale: true
})

演示

VUE项目中图片加载过大处理方式-渐进式方式-懒加载方式--附源码相关推荐

vue 项目中H5页面，实现大转盘活动
vue 项目中H5页面,实现大转盘活动 <template><div class="about"><div id="app"> ...
vue项目中图片地址生成二维码
前言一.图片地址生成二维码二.使用步骤 1.安装插件 2.执行方法(点击图片之后,弹框显示并且显示二维码) 总结前言 vue中点击图片生成二维码,利用的是qrcode插件,在需要使用的页面中引入 ...
vue项目中使用swiper实现中间大，两边小的轮播图
前言项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来实现效果如下: 下面我们来看下实现步骤: 第一步:首先在项目index.h ...
Android ListView实现QQ空间界面（说说内包含图片、视频、点赞、评论、转发功能），结尾附源码
前段时间刚好需要做一个类似于QQ空间的社区分享功能,说说内容包含文字(话题.内容).视频.图片,还需包含点赞,评论,位置信息等功能. 就采用LIstview做了一个,先来看下效果,GIF太大,CSDN ...
计算机毕业设计SSM大数据与智能工程系教师档案管理系统【附源码数据库】
项目运行环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
基于大数据的移动端茶叶销售系统（附源码）
本系统采用Node.Vue.HTML.CSS.JavaScript等技术实现了移动端茶叶销售推荐平台,此平台具有用户登录注册.商品搜索.商品分类.购物车.个人中心等主要功能.通过推荐系统,系统会根据用 ...
Pygame实战：Python做一款超好玩的滑雪大冒险小游戏，超会玩【附源码】
导语冬日当然要和心爱的人一起去滑雪, 徜徉在雪白的世界, 浪漫又刺激!唯有爱和滑雪不可辜负! 不但风景绝美,而且还超!会!玩! 现在还不是时候但秋天已过半动冬天还会远吗? 既然不能现在去滑雪,但 ...
C/C++项目：火遍全网的字符动画到底如何制作呢？（内附源码）
字符动画,顾名思义就是由字符组成的动画. 如果你经常刷短视频的话,相信你一定刷到过某音创作者将女神井川里予跳舞视频制作成字符动画,点赞也能破10W. 那么,火遍某音的字符动画用编程语言怎么制作呢?感兴 ...
【日常】如何将微信中对方所撤回的消息恢复？——电脑PC端微信教程：附源码
1 前言寻找微信撤回的图片是不少人一直在寻找的方法但苦于在网上一直找不到结果因此本文提出了一种可以找到微信撤回图片的方法. 区别于网上其他的不可用代码,本文能成功恢复! 2 原理之前的说法是, ...

VUE项目中图片加载过大处理方式-渐进式方式-懒加载方式--附源码

渐进式加载

引入依赖

页面引入CSS样式

vue组件封装

使用

图片懒加载

引入依赖

附源码

演示

VUE项目中图片加载过大处理方式-渐进式方式-懒加载方式--附源码相关推荐

最新文章

热门文章