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

默认加载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前端图片加载优化,从图片模糊到清晰的实现过程的更多相关文章

  1. Swift - 表格图片加载优化(拖动表格时不加载,停止时只加载当前页图片)

    列表的单元格中包含有图片在开发中很常见.通常我们可以直接在tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIn ...

  2. android 图片加载优化,避免oom问题产生

    1,及时回收bitmap,在activity的onstop()和onDestory()里面调用如下代码进行bitmap的回收: // 先判断是否已经回收 if(bitmap != null & ...

  3. 图片onerror事件,为图片加载指定默认图片

    为图片指定加载失败时显示默认图片,js输出的img对象,onerror是事件,不是属性,所以这样写是不起作用的: var img = $(document.createElement("IM ...

  4. iOS异步图片加载优化与常用开源库分析

    网络图片显示大体步骤: 1.下载图片: 2.图片处理(裁剪,边框等): 3.写入磁盘: 4.从磁盘读取数据到内核缓冲区: 5.从内核缓冲区复制到用户空间(内存级别拷贝): 6.解压缩为位图(耗cpu较 ...

  5. 关于android 图片加载优化

    android应用对图片处理算是比较频繁的了,尤其是在程序加载大量图片和高分辨率图片时,最容易产生oom异常,下面是个人平时一些省内存加载方法 方法一: public Bitmap decodeFil ...

  6. iOS Cell异步图片加载优化,缓存机制详解

    最近研究了一下UITbleView中异步加载网络图片的问题,iOS应用经常会看到这种界面.一个tableView上显示一些标题.详情等内容,在加上一张图片.这里说一下这种思路. 为了防止图片多次下载, ...

  7. JS图片加载时获取图片宽高信息

    ; var img = new Image(); img.src = node.find("img[class='img1_1']").attr("src"); ...

  8. web前端 ajax加载动态生成复选框demo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. img图片加载失败默认图片

    <img :src="item.goods_pic" onerror="javascript:this.src='../static/images/default. ...

随机推荐

  1. Java实现LeetCode_0027_RemoveElement

    package javaLeetCode.primary; import java.util.Scanner; public class RemoveElement_27 { public stati ...

  2. github下载速度太慢,这里有已经下载完的nacos-server.zip组件

    nacos: 分布式系统微服务的注册中心和配置中心 .. 在微服务系统中,起到很重要的作用.小伙伴老是给我抱怨,说这个github下面很慢慢,半天下载不下来,所有这样呢,我就把已经下载好的 nacos ...

  3. 官宣!ASF官方正式宣布Apache Hudi成为顶级项目

    马萨诸塞州韦克菲尔德(Wakefield,MA)- 2020年6月 - Apache软件基金会(ASF).350多个开源项目和全职开发人员.管理人员和孵化器宣布:Apache Hudi正式成为Apac ...

  4. ESXI多网卡网络配置

    1.两台路由器接入不同网络: 2.一台4网口服务器,网口分别为:vmnic0.vmnic1.vmnic2.vmnic3 3.ESXI6.5服务器虚拟机系统 测试环境模拟: 路由1:192.168.0. ...

  5. jar 反编译工具

    luyten windows版本的 链接:https://pan.baidu.com/s/1hp6gyvJSj_4h60dk5AZejA 密码:c4u7 之所以推荐它,是因为它能避免普通的编译工具jd ...

  6. Linux: ssh命令 远程登录

    1.查看SSH客户端版本 使用ssh -V命令可以得到版本号.需要注意的是,Linux一般自带的是OpenSSH; $ ssh -V ssh: SSH Secure Shell 3.2.9.1 (no ...

  7. akka-typed(7) - cluster:sharding, 集群分片

    在使用akka-typed的过程中发现有很多地方都简化了不少,变得更方便了,包括:Supervision,只要用Behaviors.supervise()把Behavior包住,很容易就可以实现这个a ...

  8. css在 IE8下的兼容性

    常用伪类选择器   IE7 IE8 IE9 :hover √ √ √ :focus × √ √ :first-child √ √ √ :last-child × × √ :first-of-type ...

  9. 红米手机 android4.4.4 root之路

    第一步: 进入360root官网下载apk安装包: http://root.360.cn/index.html 说明:不是所有的机型都能root,  一般android5.0 以下的系统root的成功 ...

  10. 基于flask的城市空气质量分析系统

    1.1  系统功能 在对主要需求进行分析后,确定系统由以下几个模块组成. 1) 用户信息管理: 该部分主要完成系统管理员的增加.删除.编辑和访问控制权限等操作. 2) 数据管理: 该部分主要完成后台存 ...