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

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网站优化之路---图片优化,图片从模糊到清晰相关的知识,希望对你有一定的参考价值。

前言

作为一个有追求有信仰的程序员,做一个网站绝不是仅仅能用就行了,当我们实现功能后,或者在写代码的过程中就要考虑怎么去优化,一个网站要去优化,作为前端要考虑的是资源优化(减少 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)
}

以上是关于网站优化之路---图片优化,图片从模糊到清晰的主要内容,如果未能解决你的问题,请参考以下文章

实现图片加载从模糊到清晰显示的方法

JavaScript图片加载由模糊变清晰 —— 图片优化

web前端开发图片放大了不清晰

Python3 (函数优化版)简单实现下载某个网站轮播图片

Web 图片性能优化系列一:背景与基础

如何分析一个网站适不适合做的SEO优化