web前端图片加载优化,从图片模糊到清晰的实现过程
在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现呐?
默认加载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: %;height: %;
}
.box .bg{/*缩略图*/
display: block;filter: blur(15px);transform: scale();
}
.box .show_img{/*加载完成显示的实际图*/
position: absolute;opacity: ;top: ;left: ;transition: opacity 1s linear;
}
51220网站目录 https://www.51220.cn
js:
<script>
var show_img=document.querySelector('.show_img'),
/*图片加载完成*/
show_img.onload = function () {
show_img.style.opacity="";
};
</script>
web前端图片加载优化,从图片模糊到清晰的实现过程的更多相关文章
- Swift - 表格图片加载优化(拖动表格时不加载,停止时只加载当前页图片)
列表的单元格中包含有图片在开发中很常见.通常我们可以直接在tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIn ...
- android 图片加载优化,避免oom问题产生
1,及时回收bitmap,在activity的onstop()和onDestory()里面调用如下代码进行bitmap的回收: // 先判断是否已经回收 if(bitmap != null & ...
- 图片onerror事件,为图片加载指定默认图片
为图片指定加载失败时显示默认图片,js输出的img对象,onerror是事件,不是属性,所以这样写是不起作用的: var img = $(document.createElement("IM ...
- iOS异步图片加载优化与常用开源库分析
网络图片显示大体步骤: 1.下载图片: 2.图片处理(裁剪,边框等): 3.写入磁盘: 4.从磁盘读取数据到内核缓冲区: 5.从内核缓冲区复制到用户空间(内存级别拷贝): 6.解压缩为位图(耗cpu较 ...
- 关于android 图片加载优化
android应用对图片处理算是比较频繁的了,尤其是在程序加载大量图片和高分辨率图片时,最容易产生oom异常,下面是个人平时一些省内存加载方法 方法一: public Bitmap decodeFil ...
- iOS Cell异步图片加载优化,缓存机制详解
最近研究了一下UITbleView中异步加载网络图片的问题,iOS应用经常会看到这种界面.一个tableView上显示一些标题.详情等内容,在加上一张图片.这里说一下这种思路. 为了防止图片多次下载, ...
- JS图片加载时获取图片宽高信息
; var img = new Image(); img.src = node.find("img[class='img1_1']").attr("src"); ...
- web前端 ajax加载动态生成复选框demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- img图片加载失败默认图片
<img :src="item.goods_pic" onerror="javascript:this.src='../static/images/default. ...
随机推荐
- Java实现LeetCode_0027_RemoveElement
package javaLeetCode.primary; import java.util.Scanner; public class RemoveElement_27 { public stati ...
- github下载速度太慢,这里有已经下载完的nacos-server.zip组件
nacos: 分布式系统微服务的注册中心和配置中心 .. 在微服务系统中,起到很重要的作用.小伙伴老是给我抱怨,说这个github下面很慢慢,半天下载不下来,所有这样呢,我就把已经下载好的 nacos ...
- 官宣!ASF官方正式宣布Apache Hudi成为顶级项目
马萨诸塞州韦克菲尔德(Wakefield,MA)- 2020年6月 - Apache软件基金会(ASF).350多个开源项目和全职开发人员.管理人员和孵化器宣布:Apache Hudi正式成为Apac ...
- ESXI多网卡网络配置
1.两台路由器接入不同网络: 2.一台4网口服务器,网口分别为:vmnic0.vmnic1.vmnic2.vmnic3 3.ESXI6.5服务器虚拟机系统 测试环境模拟: 路由1:192.168.0. ...
- jar 反编译工具
luyten windows版本的 链接:https://pan.baidu.com/s/1hp6gyvJSj_4h60dk5AZejA 密码:c4u7 之所以推荐它,是因为它能避免普通的编译工具jd ...
- Linux: ssh命令 远程登录
1.查看SSH客户端版本 使用ssh -V命令可以得到版本号.需要注意的是,Linux一般自带的是OpenSSH; $ ssh -V ssh: SSH Secure Shell 3.2.9.1 (no ...
- akka-typed(7) - cluster:sharding, 集群分片
在使用akka-typed的过程中发现有很多地方都简化了不少,变得更方便了,包括:Supervision,只要用Behaviors.supervise()把Behavior包住,很容易就可以实现这个a ...
- css在 IE8下的兼容性
常用伪类选择器 IE7 IE8 IE9 :hover √ √ √ :focus × √ √ :first-child √ √ √ :last-child × × √ :first-of-type ...
- 红米手机 android4.4.4 root之路
第一步: 进入360root官网下载apk安装包: http://root.360.cn/index.html 说明:不是所有的机型都能root, 一般android5.0 以下的系统root的成功 ...
- 基于flask的城市空气质量分析系统
1.1 系统功能 在对主要需求进行分析后,确定系统由以下几个模块组成. 1) 用户信息管理: 该部分主要完成系统管理员的增加.删除.编辑和访问控制权限等操作. 2) 数据管理: 该部分主要完成后台存 ...