网站优化之路---图片优化，图片从模糊到清晰

Posted 2021-03-15 baimeishaoxia

前言

作为一个有追求有信仰的程序员，做一个网站绝不是仅仅能用就行了，当我们实现功能后，或者在写代码的过程中就要考虑怎么去优化，一个网站要去优化，作为前端要考虑的是资源优化（减少 http 请求啊，固定图片压缩啊，精灵图合并啊，或者使用图标字体啊），安全问题（代码压缩丑化，存储 cookie 或者storage 时候加密啊），还有性能优化，资源优化的重中之重就是图片的优化，加载图片是很耗费资源的。正常情况下，当图片没有加载过来的时候，如果没有外层标签限制高度，会没有图片的位置，图片资源加载过来之后，开始下载，如果图片够大，图片会从头到尾慢慢显示，给人非常不舒服的感觉。

解决方案

图片的优化其实现在有两种解决方案：

1. 先显示一张背景图，到图片加载过来时候显示加载图片
2. 先加载图片的缩略图，然后模糊，缩略图非常小，结合模糊效果，可以比纯色更好的占位符，而不会牺牲有效载荷。到图片完全出来时候显示大图，同时模糊到清晰

当然了，如果想要更好的效果，要配合图片懒加载，就是当滚轮滚动到特定位置在加载图片，这篇文章重点是将第二种解决方案，图片从模糊到清晰，废话不多说，上代码

图片从模糊到清晰

html部分

<figure>
    <div class="image-wrap">
      <img class="oldImage" src="https://img.findaily.cn/kol/201710/cstartMTZmODY5MTAtN2Q3OS00ZGNkLTk1YmMtMGNiNjVmOWYzNjU5XyNjcm9wLXdfMTgyOS1oXzEyMDAteF80Ni15XzAtcl8xIw==cend.jpg?x-oss-process=image/resize,p_10" data-src="https://img.findaily.cn/kol/201710/cstartMTZmODY5MTAtN2Q3OS00ZGNkLTk1YmMtMGNiNjVmOWYzNjU5XyNjcm9wLXdfMTgyOS1oXzEyMDAteF80Ni15XzAtcl8xIw==cend.jpg">
    </div>
</figure>

css部分

figure .image-wrap {
    width: 500px;
    height: 312px;
    position: relative;
    overflow: hidden;
}
figure .image-wrap .oldImage {
    width: 100%;
    -webkit-filter: blur(10px);
    transition: all 0.5s
}

js部分

var image = document.querySelector(‘.oldImage‘),
    imageParentDom = image.parentNode,
    src = image.dataset.src;
var newImage = document.createElement(‘img‘);
newImage.src = src;
newImage.style.cssText = ‘position: absolute;left:0;top:0;width:100%;z-index:-1‘;
newImage.onload = function () {
    imageParentDom.appendChild(newImage);
    setTimeout(() => {
        imageParentDom.removeChild(image);
    },500)
}