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 相关文章推荐
Javascript中获取出错代码所在文件及行数的代码
Sep 23 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
javascript判断一个变量是数组还是对象
Apr 10 Javascript
vue权限问题的完美解决方案
May 08 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 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
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
es6数组的flat(),flatMap()函数用法实例分析
2020/04/18 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python入门篇之字符串
2014/10/17 Python
Python生成随机MAC地址
2015/03/10 Python
Python脚本处理空格的方法
2016/08/08 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
详解python中sort排序使用
2019/03/23 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
浅谈python 类方法/静态方法
2020/09/18 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
护理自荐信范文
2013/10/05 职场文书
应届生如何写自荐信
2014/01/05 职场文书
房地产项目建议书
2014/03/12 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
2014年工人工作总结
2014/11/25 职场文书
环卫处个人工作总结
2015/03/04 职场文书
关于五一放假的通知
2015/08/18 职场文书