一. 图片压缩
在线图片压缩工具:
https://tinypng.com/
有较好的压缩率 但是大图和简笔画容易失真
http://tools.dynamicdrive.com/imageoptimizer/
可以转换多种图片格式,画质可选性多
webp
能减少图片所占内存,画质基本不变,但是浏览器支持度不够
二、使用渐进式加载
安装
npm install progressive-image -S
引入css
<link href="//unpkg.com/progressive-image/dist/index.css" rel="stylesheet" type="text/css">
html
<div class="progressive>
<img class="preview" v-progressive="preview" :src="bc"/>
</div>
js
<script>
import Vue from 'vue'
import progressvie from 'progressive-image/dist/vue'
Vue.use(progressive,{
removePreview: true,
scale: true
})
export default {
data() {
return {
bc: './static/imgs/bc45.png', //有损的图片
preview: './static/imgs/bc.svg' //最终展示的大图
}
}
</script>
<style>
.progressive {
position: relative;
display: block;
overflow: hidden;
margin-top:200px;
}
.progressive img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
border: 0 none;
}
.progressive img.preview {
filter: blur(2vw);
transform: scale(1.05);
}
.progressive img.hide {
opacity: 0;
}
.progressive img.origin {
position: absolute;
left: 0;
top: 0;
animation: origin 1.5s ease-out;
}
.progressive img.origin-scale {
position: absolute;
left: 0;
top: 0;
animation: origin-scale 1s ease-out;
}
@-moz-keyframes origin {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes origin {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes origin {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes origin {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes origin-scale {
0% {
opacity: 0;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes origin-scale {
0% {
opacity: 0;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@-o-keyframes origin-scale {
0% {
opacity: 0;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes origin-scale {
0% {
opacity: 0;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
</style>
三、懒加载
安装
npm install vue-lazyload -S
引入插件
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyLoad, {
error: './static/error.png',
loading: './static/loading.png'
})
使用
<img class="item" v-lazy="bc"/>