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

1fe1se 发布于2019-08-21 17:02 / 3441人阅读

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

前言

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

解决方案

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

先显示一张背景图，到图片加载过来时候显示加载图片

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

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

图片从模糊到清晰

html部分

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)
}

混合云专线服务图片优化 cdn图片优化图片不清晰 js使图片变清晰了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89042.html

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

摘要：到图片完全出来时候显示大图，同时模糊到清晰当然了，如果想要更好的效果，要配合图片懒加载，就是当滚轮滚动到特定位置在加载图片，这篇文章重点是将第二种解决方案，图片从模糊到清晰，废话不多说，上代码图片从模糊到清晰部分部分部分前言作为一个有追求有信仰的程序员，做一个网站绝不是仅仅能用就行了，当我们实现功能后，或者在写代码的过程中就要考虑怎么去优化，一个网站要去优化，作为前端要考虑的是资源...

stackvoid 2019-08-30 13:46 评论0 收藏0
网站优化之路---图片优化，图片从模糊到清晰

摘要：到图片完全出来时候显示大图，同时模糊到清晰当然了，如果想要更好的效果，要配合图片懒加载，就是当滚轮滚动到特定位置在加载图片，这篇文章重点是将第二种解决方案，图片从模糊到清晰，废话不多说，上代码图片从模糊到清晰部分部分部分前言作为一个有追求有信仰的程序员，做一个网站绝不是仅仅能用就行了，当我们实现功能后，或者在写代码的过程中就要考虑怎么去优化，一个网站要去优化，作为前端要考虑的是资源...

zhkai 2019-08-01 17:45 评论0 收藏0
前端性能优化之路——图片篇。

摘要：判断为白名单，则直接调用，返回格式图片反之，则显示原图。处理处理，是美团云为美团主站提供的处理方式。目前，可用替换路径的方式来处理。处理实际上效果也是不错的，美团页面里以上的图片都是懒加载的，基本上都可以满足需求。本人是一名前端开发者，在公司负责目前负责信息流服务，为五大手机厂商和各大App提供服务，每天的请求就是以亿计算，加上我们又做了SSP和DSP，就是类似于百度广告联盟，腾讯广...

wfc_666 2019-08-22 15:09 评论0 收藏0
谈谈Web应用中的图片优化技巧及反思

摘要：要注意老旧的浏览器不支持的特性，它会继续正常加载属性引用的图像。五安全地使用图片的优势这里不再赘述，简单来说这篇文章，我们将一起探讨，web应用中能对图片进行什么样的优化，以及反思一些负优化手段一、为什么要对图片进行优化对于大多数前端工程师来说，图片就是UI设计师(或者自己)切好的图，你要做的只是把图片丢进项目中，然后用以链接的方式呈现在页面上，而且我们也经常把精力放在项目的打包...

zone 2019-08-26 10:43 评论0 收藏0
优化 - 收藏集 - 掘金

摘要：使用的快捷键这里是一性能优化典范掘金摘要新年伊始，发布了包含个短视频的性能优化典范专题，详解系统中有关性能问题的底层工作原理，并介绍了如何通过工具找出性能问题以及提升性能的建议。渐进式加载 - 提高用户体验度 - Android - 掘金前言: 我们在PC端用浏览器看图片的时候,经常是先看到一张模糊图,然后再渐渐的变得清晰,这种情况在看漫画的时候尤其常见(模糊图如下),这种效果就叫做...

Gu_Yan 2019-06-25 11:24 评论0 收藏0