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

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

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


默认加载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

JavaScript 实现图片等比缩放

在开发网页的时候少不了图片,展示图片时自然会遇到缩放问题。一般情况下只要我们的图片宽高比例差不多时,缩放是没有问题的,展示不太影响美观。但是有一些网页对这个要求比较高,要求图片不能变形

图片下载的几种实现

通过浏览器自动下载。浏览器接收到二进制文件,自动转码下载。比如:window.open()通过xhr下载。ajax请求得到的是二进制文件,只能手动转码下载。

使用 AVIF 图片格式

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

HTML图像标签img和源属性src及Alt属性、宽高、对齐

使用<img>标签定义 HTML 页面中的图像,图像标签<img>有两个必需的属性:源属性src和alt,<img>是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)

网页上常用的图片格式及使用场景

jpg:有损压缩格式,靠损失图片本身的质量来减小图片的体积,gif:无损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,png:无损压缩格式,适用于颜色数量较少的图像;svg:可缩放矢量图形

vue中使用带隐藏文本信息的图片、图片水印

通过RGB 分量值的小量变动,不影响对图片的识别。因此,我们可以在图片加入文字信息。最终达到如下效果:

前端获取图片exif信息

对又是我,每天都有新的需求。这次的需求是上传图片的时获取图片的宽高、设备、光圈等信息。pc、android、ios 都支持了,现在就缺少 web 这边上传的图片了。

html5图片上传使用FileReader预览

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

javascript如何实现图片隐藏?

javascript中可以通过将图片display属性设置为none实现图片隐藏。display属性设置元素如何显示,其语法为Object.style.display=value。

解码 PNG 图片

解码 PNG 图片就是把一张图片从二进制数据转成包含像素数据的 ImageData 。图片的二进制数据可以从 <canvas> , <img> ,Object URLs,Image URLs, Blob 对象上获取到。参见浏览器图像转换手册。

点击更多...

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