图片渐进式加载

图片渐进式加载

一般图片在网页上加载时，可能会因为网速问题，加载缓慢或者突兀出现感觉不协调。常见的解决办法有懒加载和渐进式等等。这里只说渐进式……

参考例子

// 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;
}

参考：https://mp.weixin.qq.com/s/XVBsZpRFe2hvi4kTlbVfJA