今天小编跟大家讲解下有关web前端图片加载优化 从图片模糊到清晰的实现过程 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关web前端图片加载优化 从图片模糊到清晰的实现过程 的相关资料，希望小伙伴们看了有所帮助。
在网页图片显示的时候 会发现许多网站采用了先模糊 然后在慢慢清晰的过程 这样的加载用户体验是比较好的 那么如何实现呐
默认加载2张图片 一张缩略图 一张原图 当打开网页的时候默认只显示缩略图 然后我们把缩略图模糊处理后按照原图尺寸显示 这样做的目的是为了提高用户体验；
使用js去监听原图的加载 当原图加载成功后 我们把缩略图隐藏 让原图显示出来。这样就实现了图片由模糊变成清晰的过程 为了让变化有渐变效果 我们需要使用到css的transition属性。具体代码实现如下：
html:
<div class="box"> <img src="http://www.fly63.com/article/detial/359/"class="bg"/> <img src="http://www.fly63.com/article/detial/359/"class="show_img"/> </div>css:
.box{position: relative;overflow: hidden;height: 300px;width: 300px;}.box img{width: 100%;height: 100%;}.box .bg{display: block;filter: blur(15px);transform: scale(1);}.box .show_img{position: absolute;opacity: 0;top: 0;left: 0;transition: opacity 1s linear;}js：
<script>var show_img=document.querySelector('.show_img'), show_img.onload = function () {show_img.style.opacity="1";};</script>来源：爱蒂网
