web前端图片加载优化,从图片模糊到清晰的实现过程

时间: 2018-01-15阅读: 7209标签: 图片

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


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

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


html:

<div class="box">
  <img src="" class="bg"/>
  <img src="" 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>



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/359

css怎么让背景图片平铺?

平铺选项是在网页设计中能够经常使用到的一个选项,例如网页中常用的渐变式背景。采用传统方式制作渐变式背景,往往需要宽度为背景进行平铺。

提供图片服务网站

有了这些图片API,可以获取随机图片,很适合做Blogs背景图片,Unsplash,Pixabay,Bing每日图片,img.xjh.me

vue使用readAsDataURL实现选择图片文件后预览

方法会读取指定的 Blob 或 File 对象。读取操作完成的时候,readyState 会变成已完成DONE,并触发 loadend 事件,同时 result 属性将包含一个data:URL格式的字符串(base64编码)以表示所读取文件的内容

Js实现下载图片

服务器接口返回一个图片的远程地址,要求前端进行下载,前端接口拿到图片通过canvas转成base64的格式,然后利用A标签的download属性 进行下载,具体请看代码

前端下载图片的N种方法

前几天一个简单的下载图片的需求折腾了我后端大佬好几天,最终还是需要前端来搞,开始说不行的笔者最后又行了,所以趁着这个机会来总结一下下载图片到底有多少种方法。

html5图片上传使用FileReader预览

通过FileReader,和es6的方法解构赋值,promise对象简单封装上传预览,具体逻辑:选中图片之后,触发onchange方法,获得上传文件对象,调用fileReader方法验证图片是否符合上传需求,符合返回图片文本,不符合返回错误信息。

前端Js图片压缩

实现思路:获取input的file;使用fileReader() 将图片转为base64;使用canvas读取base64 并降低分辨率;把canvas数据转成blob对象;把blob对象转file对象;完成压缩

使用 AVIF 图片格式

众所周知,一图胜千言,图片对于视觉的冲击效果远大于文字。但对于我们的互联网而言,传输与解析一张图片的代价要远比千言大的多的多(目前上亿像素已经成为主流)。

前端图片压缩上传(纯js的质量压缩,非长宽压缩)

此demo为大于1M对图片进行压缩上传,若小于1M则原图上传,可以根据自己实际需求更改。demo源码如下:

Js怎么给图片打马赛克?

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!