[ javascript New Image() ] New Image() 对象讲解
创建一个Image对象:var a=new Image(); 定义Image对象的src: a.src=”xxx.gif”; 这样做就相当于给浏览器缓存了一张图片。
图像对象:
建立图像对象:图像对象名称=new Image([宽度],[高度])
图像对象的属性: border complete height hspace lowsrc name src vspace width
图像对象的事件:onabort onerror onkeydown onkeypress onkeyup onload
需要注意的是:src 属性一定要写到 onload 的后面,否则程序在 IE 中会出错。
var img=new Image();
- img.onload=function(){alert("img is loaded")};
- img.onerror=function(){alert("error!")};
- img.src="http://www.abaonet.com/img.gif";
- function show(){alert("body is loaded");};
- window.onload=show;
运行上面的代码后,在不同的浏览器中进行测试,发现 IE 和 FF 是有区别的,在 FF 中,img 对象的加载包含在 body
的加载过程中,既是 img加载完之后,body 才算是加载完毕,触发 window.onload 事件。
在 IE 中,img 对象的加载是不包含在 body 的加载过程之中的,body 加载完毕,window.onload 事件触发时,img
对象可能还未加载结束,img.onload事件会在 window.onload 之后触发。
根据上面的问题,考虑到浏览器的兼容性和网页的加载时间,尽量不要在 Image 对象里放置过多的图片,否则在 FF 下
会影响网页的下载速度。当然如果你在 window.onload 之后,执行预加载函数,就不会有 FF 中的问题了。
可以通过Image对象的complete 属性来检测图像是否加载完成(每个Image对象都有一个complete属性,当图像处于
装载过程中时,该属性值false,当发生了onload、onerror、onabort中任何一个事件后,则表示图像装载过程结束(不管成
没成功),此时complete属性为true)
- var img = new Image();
- img.src = oImg[0].src = this.src.replace(/small/,"big");
- oDiv.style.display = "block";
- img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function() {oDiv.style.display = "none"})
注:
ie 火狐等大众浏览器均支持 Image对象的onload事件。
ie8及以下、opera 不支持onerror事件
[ javascript New Image() ] New Image() 对象讲解的更多相关文章
- [Javascript] js的类和对象
类 graph LR 类-->构造函数 类-->prototype对象 类-->instanceof运算符 类-->constructor属性 类-->isPrototy ...
- javascript进阶课程--第二章--对象
javascript进阶课程--第二章--对象 学习要点 理解面向对象的概念 掌握对象的创建方法 掌握继承的概念和实现方法 基本概念 对象究竟是什么?什么叫面向对象编程? 对象是从我们现实生活中抽象出 ...
- JavaScript进阶知识点——函数和对象详解
JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...
- javascript之一切皆为对象3
在前面两个章节“Javascript之一切皆为对象1”和“Javascript之一切皆为对象2”中,曾提到: 1.“一切(引用类型)皆为对象” 2. “每个函数都有一个prototype” 3. “每 ...
- javascript之一切皆为对象2
其实呢,“函数function”和“对象object”之间还有这么一句话:对象是通过函数来创建的,而函数却又是一种对象. 这个函数是一种对象,上节中“Javascript之一切皆为对象1”也清楚的阐述 ...
- Javascript之一切皆为对象1
在javascript的世界里,有这么一句话,一切皆为对象. 但是这个对象,应该怎么理解呢? OMG,难道值类型也是对象?!! 当然,不是. 准确地讲是对于“引用类型”而言. 那,在JavaScrip ...
- 03.JavaScript 面向对象精要--理解对象
JavaScript 面向对象精要--理解对象 尽管JavaScript里有大量内建引用类型,很可能你还是会频繁的创建自己的对象.JavaScript中的对象是动态的. 一.定义属性 当一个属性第1次 ...
- JavaScript中的原型和对象机制
1.对象相关的一些语言特性 JavaScript里所有的东西都是对象, 对象是属性的集合.要知道,函数也是对象, 能够作为变量的值. 返回值. 参数或者属性的值. 函数对象特殊的地方是能通过" ...
- javascript中遇到的字符串对象处理
在javascript中对参数处理: 1 <script> 2 function getParam() 3 { 4 urlInfo=window.location.href; //获取当前 ...
随机推荐
- 我是如何用Go语言搭建自己的博客的
前言: 话说,已经很久没有在博客园更新博客了,之前写的关于go语言的系列学习文章<让我们一起Go>也由于种种原因一度中断.但是,正如我之前在文章中所写,可以慢慢来,但是对于Go语言的学习却 ...
- MyBatis知多少(13)MyBatis如何解决数据库的常见问题
在现代软件项目中数据库通常被认为是遗留组件.它们一直以来都被认为难以使用,不论是出于技术的还是非技术的原因.大多数软件开发人员宁可从头开始完完全全地重建一个数据库. 如果数据库是遗留下来的,相信一些开 ...
- sp_executesql 两种写法
写法1: AlTER PROCEDURE TryAgain @ReturnValue int output AS declare @aa nvarchar(), @ForumID int, @coun ...
- 后端码农谈前端(HTML篇)第二课:常见元素
一.根元素 <doctype> 定义文档类型. <html> 定义 HTML 文档. 二.元数据元素 <head> 定义关于文档的信息. <meta> ...
- sizeof()用法汇总【转载】
转载自:http://www.cnblogs.com/chengxin1982/archive/2009/01/13/1374575.html 参考:http://blog.csdn.net/free ...
- LeetCode——Find Median from Data Stream
Median is the middle value in an ordered integer list. If the size of the list is even, there is no ...
- [git]解决rebase冲突
git pull --rebase时产生冲突 有三个选项: git rebase --skip 效果是:抛弃本地的commit,采用远程的commit(慎用因为你本地的修改就会都没有!) git re ...
- Cocos2d-x数据存储
分别是使用UserDefault,内置文件管理和sqlite3数据库的一般方式: 主要代码: bool DataScene::init(){ if (!Layer::init()){ return f ...
- Team Foundation Server简介
对于任何一个软件开发团队而言,成功的一个重要因素在于成员之间.成员与首先使用软件的用户之间有很好的沟通. Team Foundation Server是一个独立的服务器产品,逻辑上,由下列两层组成,这 ...
- C#获取本地或远程磁盘使用信息
因为公司有多个服务器,要检查磁盘的使用情况确定程序放哪个服务器和清理垃圾,所以写个小程序帮忙检查. 效果图: 后台代码: private void btnCheck_Click(object send ...