js中Image对象以及对其预加载处理示例


Posted in Javascript onNovember 20, 2013

不显示在文档中的 Image 对象

对于不显示在文档中的 Image 对象时用 var 语句定义的:

var myImage = new Image();或 
var myImage = new Image(<图片地址字符串>);

然后就可以像一般 Image 对象一样对待 myImage 变量了。不过既然它不显示在文档中,以下属性:lowsrc, width, height, vspace, hspace, border 就没有什么用途了。一般这种对象只有一个用:预读图片(preload)。因为当对对象的 src 属性赋值的时候,整个文档的读取、JavaScript 的运行都暂停,让浏览器专心的读取图片。预读图片以后,浏览器的缓存里就有了图片的 Copy,到真正要把图片放到文档中的时候,图片就可以立刻显示了。现在的网页中经常会有一些图像连接,当鼠标指向它的时候,图像换成另外一幅图像,它们都是先预读图像的。

预读图像的 JavaScript 例子

var imagePreload = new Image(); imagePreload.src = '001.gif'; 
imagePreload.src = '002.gif'; 
imagePreload.src = '003.gif';

以上例子适合预读少量图片。
function imagePreload() { 
var imgPreload = new Image(); 
for (i = 0; i < arguments.length; i++) { 
imgPreload.src = arguments[i]; 
} 
} imagePreload('001.gif', '002.gif', '003.gif', '004.gif', '005.gif');

以上例子适合预读大量图片。

因为许多浏览器存在的缓存问题。当图片加载过一次之后,如果再有对该图片的请求时,由于浏览器已经缓存住这张图片了,不会再发起一次新的请求,而是直接请缓存中加载过来,经过分析,可以使用各个浏览器所兼容的Image的属性--complete。所以在图片onload事件之前先对这个值做下判断即可,如下例子:

function loadImage(url, callback) { 
var img = new Image(); //创建一个Image对象,实现图片的预下载 
img.src = url; if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数 
callback.call(img); 
return; // 直接返回,不用再处理onload事件 
} 
img.onload = function () { //图片下载完毕时异步调用callback函数。 
callback.call(img);//将回调函数的this替换为Image对象 
}; 
};
Javascript 相关文章推荐
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
vue2.0开发实践总结之入门篇
Dec 06 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
Electron vue的使用教程图文详解
Jul 05 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
JS按字节截取字符长度实例
Nov 20 #Javascript
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 #Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 #Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 #Javascript
jQuery对html元素取值与赋值的方法
Nov 20 #Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 #Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 #Javascript
You might like
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
php7 新增功能实例总结
2020/05/25 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
js 分栏效果实现代码
2009/08/29 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中max函数用法实例分析
2015/07/17 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
python脚本和网页有何区别
2020/07/02 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
毕业生个人投资创业计划书
2014/01/04 职场文书
学生自我评价范文
2014/02/02 职场文书
物理力学求职信
2014/02/18 职场文书
授权委托书格式模板
2014/04/03 职场文书
安全生产大检查方案
2014/05/07 职场文书
迎国庆演讲稿
2014/09/15 职场文书
年终工作总结范文2014
2014/11/27 职场文书
给上级领导的感谢信
2015/01/22 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python