web前端图片模糊到清晰的实现过程

在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现?

默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图,然后我们把缩略图模糊处理后按照原图尺寸显示,这样做的目的是为了提高用户体验;

使用js去监听原图的加载,当原图加载成功后,我们把缩略图隐藏,让原图显示出来。这样就实现了图片由模糊变成清晰的过程,为了让变化有渐变效果,我们需要使用到css的transition属性。具体代码实现如下:

html:

<div class="box">

  <img src="images/playboy-s.jpg" class="bg"/>

  <img src="images/playboy-b.jpg" 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>

 

如果不需要有渐变效果,可以采用如下方法

<img src="images/playboy-s.jpg" name="myImage" width="960" height="1285" id="myImage"  alt="懒人图库" />

 

<script language="JavaScript" type="text/javascript">

    var img = new Image();

    img.src = "images/playboy-b.jpg";

    img.onload = function() {

        document.getElementById('myImage').src = this.src;

    }

</script>

 

playboy-s是缩略图,playboy-b是完整图

 

posted on   ranyonsue  阅读(3647)  评论(0编辑  收藏  举报

编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示