【JavaScript】图片加载由模糊变清晰 —— 图片优化
开发过程中,一些图片的展示时,加载很慢很久,后来把图片缩放压成缩略图吧,速度是快了但是模糊不清,如何处理这样问题,下面就和大家分享一下自己的处理方法。
先让客户端加载像素小的缩略图:
<img src="缩略图.jpg" name="pic" width="800" height="600" id="news" /> 然后用js处理: var img = new Image();//新建一个图片对象
img.src = "原图.jpg"; //最终显示的大图
img.onload = function() {
document.getElementById('news').src = this.src;
}
示例代码
<img src="data:images/playboy-s.jpg" name="myImage" width="960" height="1285" id="myImage" alt="懒人图库" /> <script language="JavaScript" type="text/javascript">
var img = new Image();
img.src = "images/playboy-b.jpg";
img.onload = function() {
document.getElementById('myImage').src = this.src;
}
</script>
playboy-s是缩略图,playboy-b是完整图
这样就实现预加载缩略图,最终显示像素高的原图,这样做的好处是避免用户长时间等待图片而跳出或者对产品的烦躁情绪。
原文地址:http://www.ibloger.net/article/403.html
【JavaScript】图片加载由模糊变清晰 —— 图片优化的更多相关文章
- 深入探索Glide图片加载框架:做了哪些优化?如何管理生命周期?怎么做大图加载?
前言 Glide可以说是最常用的图片加载框架了,Glide链式调用使用方便,性能上也可以满足大多数场景的使用,Glide源码与原理也是面试中的常客. 但是Glide的源码内容比较多,想要学习它的源码往 ...
- javascript图片加载完成前显示loading图片
<html> <title>图片预加载</title> <body> <script> //判断浏览器 var Browser=new Ob ...
- 关于web开发中,图片加载失败替换为默认图片
页面上有用户自定义图片的时候经常会出现用户定义的图片特别是站外图片被删除或无法访问,因此,需要判断图片是否能成功被加载,否则自动换成“无法找到图片”之类的系统图片. document.body.onl ...
- ionic 图片加载失败,显示默认图片代替
1.首先编写自定义指令 angular.module('starter.directives', []) //当图片找不到事显示替代图片 .directive("errSrc", ...
- 运用CSS高斯模糊添加图片加载效果
<!DOCTYPE html> <html> <head> <title>大图片加载从模糊到清晰</title> </head> ...
- Android之图片加载框架Fresco基本使用(二)
PS:最近看到很多人都开始写年终总结了,时间过得飞快,又到年底了,又老了一岁. 学习内容: 1.进度条 2.缩放 3.ControllerBuilder,ControllerListener,Post ...
- 一起写一个Android图片加载框架
本文会从内部原理到具体实现来详细介绍如何开发一个简洁而实用的Android图片加载缓存框架,并在内存占用与加载图片所需时间这两个方面与主流图片加载框架之一Universal Image Loader做 ...
- JS判断图片加载完成方法
javascipt原生方法 选取指定ID的图片,通过onload指定回调方法,在图片加载完成后弹出“图片加载已完成”字样提示. <img id="pic1" src=&quo ...
- Android之Fresco(facebook的强大Android图片加载的框架)
Fresco是Facebook最新推出的一款用于Android应用中展示图片的强大图片库,可以从网络.本地存储和本地资源中加载图片.其中的Drawees可以显示占位符,直到图片加载完成.而当图片从屏幕 ...
随机推荐
- 生成指定python项目中所有的依赖文件
一. pipreqs工具 这个工具的好处是可以通过对项目目录的扫描,自动发现使用了那些类库,自动生成依赖清单. 缺点是可能会有些偏差,需要检查并自己调整下. 安装: pip install pipre ...
- CF1178F Short/Long Colorful Strip(DP)
说起来,这题好像也不难-- 先考虑 F1 怎么做. 既然别的方法都不行不如试试\(f_{i,j}\) 表示在刚刚准备开始涂 \([i,j]\) 中最小编号的颜色之前,整个区间是同色的,且最后能做到 \ ...
- 你真的了解strtotime('X month')吗
经常会有人被strtotime结合-1 month, +1 month, next month的时候搞得很困惑, 然后就会觉得这个函数有点不那么靠谱, 动不动就出问题. 用的时候就会很慌… 今天是20 ...
- linux 开机mount nfs
mount -t nfs 10.208.1.235:/home/gis/bigrasterdata/mxds/uploads /usr/local/website/upload/pythonmxds ...
- CountDownLatch 一个复杂的例子
CountDownLatch复杂点的例子 public class CountDownLatchTest2 { private static Random random = new Random(Sy ...
- MonkeyDev安装--逆向开发
MonkeyDev是原有iOS OpenDev的升级,非越狱插件的开发集成神器! 可以使用Xcode开发CaptainHook Tweak.Logos Tweak 和 Command-line Too ...
- Web应急:管理员账号被篡改
你是某一个网站的管理员,有一天,你的管理员账号admin却登录不了,进入数据库查看,原来管理员账号用户名不存在了,却多了另外一个管理员用户名.不对,不是新增了管理员,而是你的管理员用户名被篡改了. 现 ...
- Java学习:反射机制简介
反射机制是什么 反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法: 对于任意一个对象,都能够调用它的任意一个方法和属性: 这种动态获取的信息以及动态调用对象的方法的功能称为ja ...
- 2019-11-29-WPF-客户端开发需要知道的触摸失效问题
原文:2019-11-29-WPF-客户端开发需要知道的触摸失效问题 title author date CreateTime categories WPF 客户端开发需要知道的触摸失效问题 lind ...
- 关于“关于C#装箱的疑问”帖子的个人看法 (原发布csdn 2017年10月07日 10:21:10)
前言 昨天晚上闲着无事,就上csdn逛了一下,突然发现一个帖子很有意思,就点进去看了一下. 问题很精辟 int a = 1; object b=a; object c = b; c = 2; 为什么b ...