css怎么使用高斯模糊的效果逐步加载图片

本篇内容主要讲解“css怎么使用高斯模糊的效果逐步加载图片”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css怎么使用高斯模糊的效果逐步加载图片”吧!

我们提供的服务有：成都网站制作、网站设计、微信公众号开发、网站优化、网站认证、揭西ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的揭西网站制作公司

用过 Medium 的用户不会不记得它的图片加载方式——纯色-高斯模糊-加载完成并显示。

这是一种很优雅的图片预加载的方式(因为 Medium 的图片质量都很高，如果全部一下加载的话，需要的时间难以想象，所以，这是一种很棒的做法)。从***次打开 Medium 这个网站开始，我就被这种技术给吸引住了——好吧，直到今天才去研究它。

在 Medium 网站，打开任何一篇文章，然后，我们来 inspect 一下：

可以看到，Medium 为每一张图片都设置了这么长的一段 HTML。这样做的目的就是为了让这个图片的逐步加载过程能够平滑如一，同时还能在一定程度上提升用户体验。就算图片没有加载出来，显示给用户的是一个高斯模糊的图片，其实也不失美感。

首先，我们可以把大图和小图的 URL 和尺寸都存起来，通过标签的 data 属性去动态获取。所以，我们的 HTML 可以像下面这样写：

同时，我们需要定义一些 CSS 的 class 来对大图和小图进行处理：

.blur-img-container { position: relative; background: #eeeeee; background-size: cover; overflow: hidden; } .blur-img-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.4s ease-in-out; } .blur-img-container .thumb-loaded { opacity: 1; filter: blur(10px); transform: scale(1); } .blur-img-container .large-loaded { opacity: 1; } .blur-img-container .thumb-hidden { opacity: 0; }

***点，动态设置我们的容器的 padding-bottom。可以通过计算宽高比然后换算成百分比：

let thumb = new Image(); thumb.src = thumbSrc; thumb.onload = () => { // 小图加载完成，显示小图，设置样式 setStyle(thumb, 'thumb-loaded'); }; elem.appendChild(thumb); let realImg = new Image(); realImg.src = lgSrc; realImg.onload = () => { // 大图加载完成，显示大图，隐藏小图 setStyle(realImg, 'large-loaded'); setStyle(thumb, 'thumb-hidden'); }; // 将大图添加到页面中 elem.appendChild(realImg);

其实，只要把上面两点主要的功能做好了，我们的这个效果基本上就实现了。

可以通过我的 GitHub Repo 来查看完整的源代码和例子 blur-image。

到此，相信大家对“css怎么使用高斯模糊的效果逐步加载图片”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

重庆分公司，新征程启航

css怎么使用高斯模糊的效果逐步加载图片

其他资讯