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

默认加载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. Linux目录处理命令mkdir详解

    mkdir(英文原意:make directories),基本作用是创建新的目录,命令的路径及权限: 可以看到,这个命令的路径是/usr/bin/mkdir,所以它的执行权限是所有用户 mkdir 创 ...

  2. iOS-UIViewController创建的几种方法和UIWindow的介绍

    在上一篇笔记中<iOS-程序启动原理和UIApplication>,http://blog.csdn.net/yang198907/article/details/49735531 在程序 ...

  3. 【python-opencv】读取、显示、写入图像

    1.读取图像 import cv2 image=cv2.imread("dog2.jpg",1) 说明: 第二个参数是一个标志,它指定了读取图像的方式. cv.IMREAD_COL ...

  4. Grafana6.4.4 + zabbix 4.2

    环境简介 OS:Centos 7.4 zabbix:4.2.6 Grafana:6.4.4 一.yum 直接安装的方式 官方推荐有几种安装方式我采用yum 直接安装的方式 官方doc: https:/ ...

  5. android在service中stopself遇到的问题

    在service的oncreate中直接调用stopservice停止自己,依然会执行onstartcommand方法后,最后才调用ondestory方法

  6. FastJson将Java对象转换成json

    确保环境依赖都配置好! 1.在pom.xml导入依赖 <dependency> <groupId>com.alibaba</groupId> <artifac ...

  7. Mysq数据库索引(B-Tree索引)

    一.B-Tree索引的底层结构 所有的值都是按顺序存储的,并且每一个叶子页到根的距离相同,如图所示,B-Tree索引的底层数据结构一般是B+树,反应了MyISAM索引是如何工作的.     二.B-T ...

  8. laravel查询常用的方式含义.

    find($id) 传值并返回一个模型.如果不存在匹配的模型,则返回null.findOrFail($id) 传值并返回一个模型.如果不存在匹配的模型, 它会抛出异常.first() 返回在数据库中找 ...

  9. vc6.0代码转vs2017相关问题

    vc6.0代码转vs2017相关问题 命令行 error D8016: “/ZI”和“/Gy-”命令行选项不兼容fatal error C1083: 无法打开包括文件: “WinSock2.h”: N ...

  10. EPLAN文本输入怎么转行,路径功能文本换行方法

    EPLAN文本输入怎么转行,路径功能文本换行方法 在输入文本时,按CTRL+ENTER可以将字体换行 Ctrl+回车键