引文:https://www.zhihu.com/question/55622930

https://jmperezperez.com/medium-image-progressive-loading-placeholder/

挺多人说这种加载效果不如放个加载的动画,我觉得这种模糊到清晰的效果挺好的。

从上面链接第一条回复已经知道这种效果的做法,简单说是

  • 先加载小图,缩略图,直接放在图片src中
  • 然后网络请求大图,在请求的这段时间缩略图从模糊到它的清晰
  • 等到大图请求到立即隐藏缩略图,显示大图

vue写法:

<template>
<img v-if="loadOk" src="缩略图.png" class="thumbnail":class="loadOkBlur?'':'lazyload'" alt="">
<img @load="lazyload" src="大图.png"/>
<template/>

js:
lazyload() {	
this.loadOkBlur =false
	setTimeout(()=>{this.loadOk = false},1000)
	} // 这里用了定时器模拟请求加载图片的时间

css:给缩略图一个blur动画


爬。