开发过程中,一些图片的展示时,加载很慢很久,后来把图片缩放压成缩略图吧,速度是快了但是模糊不清,如何处理这样问题,下面就和大家分享一下自己的处理方法。

先让客户端加载像素小的缩略图:

<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】图片加载由模糊变清晰 —— 图片优化的更多相关文章

  1. 深入探索Glide图片加载框架:做了哪些优化?如何管理生命周期?怎么做大图加载?

    前言 Glide可以说是最常用的图片加载框架了,Glide链式调用使用方便,性能上也可以满足大多数场景的使用,Glide源码与原理也是面试中的常客. 但是Glide的源码内容比较多,想要学习它的源码往 ...

  2. javascript图片加载完成前显示loading图片

    <html> <title>图片预加载</title> <body> <script> //判断浏览器 var Browser=new Ob ...

  3. 关于web开发中,图片加载失败替换为默认图片

    页面上有用户自定义图片的时候经常会出现用户定义的图片特别是站外图片被删除或无法访问,因此,需要判断图片是否能成功被加载,否则自动换成“无法找到图片”之类的系统图片. document.body.onl ...

  4. ionic 图片加载失败,显示默认图片代替

    1.首先编写自定义指令 angular.module('starter.directives', []) //当图片找不到事显示替代图片 .directive("errSrc", ...

  5. 运用CSS高斯模糊添加图片加载效果

    <!DOCTYPE html> <html> <head> <title>大图片加载从模糊到清晰</title> </head> ...

  6. Android之图片加载框架Fresco基本使用(二)

    PS:最近看到很多人都开始写年终总结了,时间过得飞快,又到年底了,又老了一岁. 学习内容: 1.进度条 2.缩放 3.ControllerBuilder,ControllerListener,Post ...

  7. 一起写一个Android图片加载框架

    本文会从内部原理到具体实现来详细介绍如何开发一个简洁而实用的Android图片加载缓存框架,并在内存占用与加载图片所需时间这两个方面与主流图片加载框架之一Universal Image Loader做 ...

  8. JS判断图片加载完成方法

    javascipt原生方法 选取指定ID的图片,通过onload指定回调方法,在图片加载完成后弹出“图片加载已完成”字样提示. <img id="pic1" src=&quo ...

  9. Android之Fresco(facebook的强大Android图片加载的框架)

    Fresco是Facebook最新推出的一款用于Android应用中展示图片的强大图片库,可以从网络.本地存储和本地资源中加载图片.其中的Drawees可以显示占位符,直到图片加载完成.而当图片从屏幕 ...

随机推荐

  1. Linux ssh 密钥创建与验证

    1.需要两个虚拟机,每一个创建一个用户登录到用户根下   2.每个用户都要创建密钥对   3.把两个用户的公用密钥用ssh-copy-id -i 命令将公用的密钥复制到另一个用户中   4.在客户端开 ...

  2. JaCoCo覆盖率计数器

    覆盖率计数器 JaCoCo使用一组不同的计数器来计算覆盖率指标.所有这些计数器都是从Java类文件里获取信息,这些类文件包含Java 字节码指令和调试信息.即使没有可用源代码情况下,这种方法可以实时有 ...

  3. 端口转发之 lcx

    lcx.exe是一个端口转发工具,有Windows版和Linux版两个版本,Windows版是lcx.exe,Linux版为portmap Windows版使用方法如下: lcx有两大功能: )端口转 ...

  4. Java8 新特性 Steam() 中间有状态操作

    中间有状态操作 Java8 新特性 Stream 练习实例   中间操作,就是把数据处理成自己想要的类型,并且有状态操作,是在所有的数据基础上进行操作的.比如dictinct(去重),sorted(排 ...

  5. Charles设置断点- (超详解)

    1.选择你要设置断点的接口 2.右键选择 Breakpoints 3.断点的相关配置, Proxy ——>Breakpoint Settings 5.双击刚刚已经设置的断点接口,进行设置 6. ...

  6. maven的基础入门

    Maven是Java世界中一个很好使的项目管理工具,关于[好使]这个特性从项目的使用量上就能体现出来,虽然说现在有更好使的Gradle,但是Maven的地位也不会那么轻易被撼动,支持者还是多多. Ma ...

  7. Spring aop的一些小知识点总结

    1 Spring的aop无法拦截静态方法 2 在 proxyTargetClass = false时 对于实现了接口的bean,则只有接口中的方法会被拦截: 对于没有实现任何接口的bean,publi ...

  8. asp.net SQLite关于各版本的调试

    最近想做一个简版的管理系统,将SQL SERVER数据库切换到SQLite数据库中,采用的是SQLite3的版本数据库. 开发工具:SV2015 UP3 数据库:SQLite3 项目整体结构图 相同的 ...

  9. sql server: 数据库备份时出现-operating-system-error-5拒绝访问

    本文转自:https://blog.csdn.net/ibsfn/article/details/80770855 sql-server 数据库备份时出现-operating-system-error ...

  10. C++中的Point类与vector类的简单处理

    首先设计Vector与Point的表示方法,再依次完善两个类中的构造函数,复制构造函数等. 向量由两个点表示,当进行运算的时候,转化起点坐标为(0,0): 第14行:由于Vector需要用到Point ...