[ 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();

  1. img.onload=function(){alert("img is loaded")};
  2. img.onerror=function(){alert("error!")};
  3. img.src="http://www.abaonet.com/img.gif";
  4. function show(){alert("body is loaded");};
  5. 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)

  1. var img = new Image();
  2. img.src = oImg[0].src = this.src.replace(/small/,"big");
  3. oDiv.style.display = "block";
  4. img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function() {oDiv.style.display = "none"})

注:

ie 火狐等大众浏览器均支持 Image对象的onload事件。

ie8及以下、opera 不支持onerror事件

时间: 2024-12-28 00:50:43

[ javascript New Image() ] New Image() 对象讲解的相关文章

[Javascript] js的类和对象

类 graph LR 类-->构造函数 类-->prototype对象 类-->instanceof运算符 类-->constructor属性 类-->isPrototypeOf方法 类-->hasOwnProperty方法 类-->__proto__属性 类-->toString方法 类-->对象 对象 一切引用类型都是对象 console.log(typeof x); // undefined console.log(typeof 10); //

在JavaScript中生成自定义的对象

使用对象便于组织信息.下面我们介绍如何在JavaScript中生成自定义的对象. ---------------------- JavaScript 对象 在前面几章中我们学到JavaScript中有些内置的对象,比如String, Date, Array等等.除此之外,你还可以定义自己的对象. 对象是一种特殊的数据,含有属性和函数. 下面让我们用一个例子来说明:比如一个人是一个对象.属性是与对象有联系的值,比如人的属性包括姓名,身高,体重,年龄,肤色,眼睛的颜色等等.所有人都有这些属性,但是每

Javascript学习--------认识window窗口对象

window对象: Window 对象表示浏览器中打开的窗口. 可以通过window对象设置窗口的大小,位置等. 还可以控制是否加载网页等. window对象集合: 集合 描述 frames[] 返回窗口中所有命名的框架. 该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架或 <iframe>.属性 frames.length 存放数组 frames[] 中含有的元素个数.注意,frames[] 数组中引用的框架可能还包括框架,它们自己也具有 frames[] 数

MDN——javascript——入门——第三章对象——json——知识点总结

1. JSON:javascript object notation(js 对象表示法) 将结构化数据表示为JavaScript对象的标准格式, 通常用于在网站上表示和传输数据 (从服务器向客户端发送一些数据,因此可以将其显示在网页上) Douglas Crockford(提出推广了json)     虽然它是基于JavaScript语法,它可以独立于JavaScript的使用,许多编程环境有 读取(解析),并生成JSON的能力.(例如php)   JSON对象可以存储在它自己的文件,根本上只是

javascript之一切皆为对象2

其实呢,"函数function"和"对象object"之间还有这么一句话:对象是通过函数来创建的,而函数却又是一种对象. 这个函数是一种对象,上节中"Javascript之一切皆为对象1"也清楚的阐述了. 但这个对象又是通过函数来创建的,咳咳,似乎在平时代码中也是哈. 请看下面代码 function Fn(){ } var fn =new Fn(); 你可能会说,哥们,不对吧,不是我们也曾写过如下代码吗!! var obj = {}; 哈,是的哈

javascript之一切皆为对象3

在前面两个章节"Javascript之一切皆为对象1"和"Javascript之一切皆为对象2"中,曾提到: 1."一切(引用类型)皆为对象" 2. "每个函数都有一个prototype" 3. "每个对象都有一个__proto__" 那么,问题来了,在随笔"Javascript之一切皆为对象2"中,不是有下图么 那,根据"一切(引用类型)皆为对象",图中的函数Fn不

JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

JavaScript学习总结(一)--延迟对象.跨域.模板引擎.弹出层.AJAX示例 目录 一.AJAX示例 1.1.优点 1.2.缺点 1.3.jQuery AJAX示例 二.延迟对象(Deferred) 2.1.回调函数 2.2.deferred.done 三.跨域 3.1.什么是跨域 3.2.JSONP跨域 3.3.jQuery使用JSONP跨域 3.4.跨域资源共享(CORS) 3.5.小结 四.弹出层 五.模板引擎 5.1.Hello World 5.2.方法 5.3.与AJAX结合应

JavaScript中的防篡改对象

由于JavaScript共享的特性,任何对象都可以被放在同一环境下运行的代码修改. 例如: var person = {name:"caibin'} person.age = 21; 即使第一行定义了完整的person对象,那么第二行代码仍然可以对其添加属性,删除属性等. 我们有三个方法可以防止你做出这些行为. 一.不可扩展对象: 先来看person本身的扩展性: Object.isExtensible(person); // true 接下来执行: Object.preventExtensio

【JavaScript】【学习】对象的创建和继承

下午刚刚看完了<JavaScript高级程序设计>中的第六章,面向对象的程序设计,因为自己以前没有面向对象程序设计的基础,所以理解得有些困难,但是通过自己的努力研读+上网查资料+反复实践,总算是答题上理解了,对我的编程思维算是一个很大的提高吧,这里把学习笔记和心得发一下,方便以后自己查阅. 一.理解对象 在JavaScript中,一切皆是对象,前面学习引用类型,基本都是JavaScript中的内置对象,而基本类型,则都是这些内置对象的实例,BOM,DOM也是对象,全局变量可以视为window的