图片渐进式加载
一般图片在网页上加载时，可能会因为网速问题，加载缓慢或者突兀出现感觉不协调。常见的解决办法有懒加载和渐进式等等。这里只说渐进式……
参考例子
// html
<div class="relative">
<image class="zhanwei" src="占位/压缩图片"></image>
<image class="yuantu" :calss="{loaded:loadfinished}" src="原图" @load="handleLoad"></image>
</div>
// js
var loadfinished = false;
handleLoad(){
loadfinished=true
}
// css
.relative{
position:relative;
}
.zhanwei {
width:300px;
height:300px;
animation: filter 2s ease-in-out;
}
@keyframes filter {
0% {
filter: blur(10px);
}
100% {
filter: blur(0);
}
}
// 原图通过绝对定位覆盖占位图
.yuantu {
width:300px;
height:300px;
position: absolute;
}
@keyframes opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.yuantu.loaded {
animation: opacity 2s ease-in-out;
}