根据此属性用js建立图像对象:
格式:
图像对象名称=new Image([宽度],[高度])
图像对象的属性:
border complete height hspace lowsrc name src vspace width readyState
图像对象的事件:
onabort onerror onkeydown onkeypress onkeyup onload onreadystatechange
程序代码
var img=new Image();
img.onload=function(){alert("img is loaded")}; //它在图像完全载入到内存之后调用。
img.onerror=function(){alert("error!")};//它在图像载入失败后调用,图像载入失败不会调用onload事件。
img.src="image1.jpg";//开始加载图片,加载图片是异步过程。
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中的问题了。
对于onload事件的绑定,不要放在src=’……’语句后面,因为加载图片的速度可能很快,如果图片加载完毕后,绑定onload事件的代码还没来得及执行,就会造成绑定到onload事件的函数没机会执行。其他事件的绑定也要注意这一点。
代码简化后如下:
var img = new Image();
img.src = “test.gif”;
img.onload = function(){
alert(this.src);
//other
};
简单看过以后貌似这段代码没有什么问题,可是IE下就不是能正常的运行。不管怎么检测,IE根本不会理会,不过还是找到了解决的方法,原理如下:
图片下载时,浏览器会把图片缓存起来,再次加载此图片时就会从缓冲区里加载。
那么如果图片已经在缓存区了,是不是从缓冲区里加载的图片就不触发onload事件呢?
测试……
var img = new Image();
img.onload = function(){
alert(this.src);
//other
};
img.src = “test.gif”;
测试成功!
结论:应该把onload写到src前面,先告诉浏览器图片加载完要怎么处理,再让它去加载图片。 所以,不是IE浏览器不会触发onload事件,而是因为加载缓冲区的速度太快,在没有告诉它加载完要怎么办时,它已经加载完了。反过来说,firefox明显更智能一些,加入onload事件后,firefox浏览器会检测缓冲区是否已经有此图片,有的话直接就触发此事件!
img 判断图片加载完成:
?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
</head>
<body>
<script>
//判断浏览器
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);
//判断是否加载完成
function Imagess(url,imgid,callback){
var val=url;
var img=new Image();
if(Browser.ie){
img.onreadystatechange =function(){
if(img.readyState=="complete"||img.readyState=="loaded"){
callback(img,imgid);
}
}
}else if(Browser.Moz){
img.onload=function(){
if(img.complete==true){
callback(img,imgid);
}
}
}
//如果因为网络或图片的原因发生异常,则显示该图片
img.onerror=function(){img.src='http://www.baidu.com/img/baidu_logo.gif'}
img.src=val;
}
//显示图片
function checkimg(obj,imgid){
document.getElementById(imgid).src=obj.src;
}
//初始化需要显示的图片,并且指定显示的位置
window.onload=function(){
Imagess("http://pic.cnblogs.com/avatar/a46603.jpg","img1",checkimg);
Imagess("http://pic.cnblogs.com/avatar/a46603.jpg","img2",checkimg);
Imagess("http://pic.cnblogs.com/avatar/a46603.jpg","img3",checkimg);
Imagess("http://pic.cnblogs.com/avatar/a46603.jpg","img4",checkimg);
Imagess("http://pic.cnblogs.com/avatar/a46603.jpgdddddddddddddddddddddddd","img5",checkimg);
}
</script>
<img id="img1" src="loading.gif" width="100" height="100" />
<img id="img2" src="loading.gif" width="100" height="100" />
<img id="img3" src="loading.gif" width="100" height="100" />
<img id="img4" src="loading.gif" width="100" height="100" />
<img id="img5" src="loading.gif" width="100" height="100" />
</body>
</html>
jQuery实现:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript" src="http://www.mainaer.com/JS/jquery-1-3-2.js"></script>
</head>
<body>
<div>
<img src="http://www.mainaer.com/skin/maps/4.png" />
<img src="http://www.mainaer.com/skin/maps/5_R.png" />
<img src="http://www.mainaer.com/skin/maps/6.png" />
<img src="http://www.mainaer.com/skin/maps/7.png" />
<img src="http://www.mainaer.com/skin/maps/8.png" />
</div>
<div id="msgTool">
</div>
<script language="javascript" type="text/javascript">
$(function (){
$("img").each(function (i,e){
var imgsrc = $(e).attr("src");
$(e).load(function(){
$("<p> ok "+ $(e).width()+":"+$(e).height()+"</p>").appendTo("#msgTool");
}).error(function() {
$("<p> error "+ imgsrc +"</p>").appendTo("#msgTool");
$(e).attr("src","http://www.mainaer.com/uploadfiles/mainaer/nopic.gif");
}) ;
});
});
</script>
</body>
</html>
转载自http://www.cnblogs.com/dudu837/archive/2010/11/10/1874000.html
分享到:
相关推荐
JavaScript Path: HTML--> CSS --> JavaScript --> jQuery/JSON --> Bootstrap --> SQL/MySQL --> ... Repository Introduction This repository is my small world for learning and practicing ...
JSP&Servlet&JavaScript&Ajax&jQuery源代码
JavaScript - jQuery实现短信验证码注册登录完整示例:JavaScript - jQuery和附件说明
jQuery实现图片动态加载效果 鼠标滚动时图片动态加载
使用jQuery插件jQuery Image Flyout弹出图片,实现javascript弹出放大图片功能只需要一行代码即可实现。 四,用户自定义设置 结合jQuery插件Easing Plugin,可增强javascript图片放大和缩小过程中图片显示的效果。 ...
jQuery经典入门教材。第2版英文原版。 JavaScript lets you supercharge your web pages with animation, interactivity, and visual effects, but learning the language isn’t easy. This fully updated and ...
JavaScript & jQuery交互式Web前端开发_PDF电子书下载 高清 带索引书签目录_(美)达克特著_北京:清华大学出版社
JavaScript & jQuery The Missing Manual, 3rd Edition
通过将编程理论与用来演示JavaScript和jQuery如何被应用于流行站点之上的示例相结合,《JavaScript&jQuery;交互式Web前端开发》将教会您如何让网站更具交互性、吸引性、可用性。很快,您就能够像一名程序员那样去...
jQuery实现产品图片循坏旋转的代码.rar
更高效的学习JavaScript和jQuery,快速成为一名Web前端工程师,零基础快速掌握 作者:(美)达科特(Duckett, J.)出版社:清华大学出版社 第1章 编程基础知识 第2章 JavaScript基础指令 第3章 函数、方法与对象 第4章 ...
jquery实现LightBox图片点击放大效果的图片盒子插件.rar
访问第一个匹配元素的样式属性。 -------------------------------------------------------------------------------- Return a style property on the first matched element. 返回值 String 参数 name (String...
《JavaScript & jQuery 交互式Web前端开发.pdf》2015年的书,彩版
JavaScript/CSS/DOM基础 第0课 - 内容概述 - [精通JavaScript+jQuery] 第1课 - JavaScript背景知识-[精通JavaScript+jQuery] 第2课 - JavaScript基础 - [精通JavaScript+jQuery] 第3课 - CSS基础 - [精通...
通过将编程理论与用来演示JavaScript和jQuery如何被应用于流行站点之上的示例相结合,《JavaScript&jQuery;交互式Web前端开发》将教会您如何让网站更具交互性、吸引性、可用性。很快,您就能够像一名程序员那样去...
品名:JavaScript & jQuery...用途:前端开发人员及javascript 与 jQuery 铁粉珍爱学习资料,web前端开发或学习爱好者不可多得的学资料,本教程出自清华大学出版社,内容十分受用,喜欢技术研究和学习的您一定会懂得!
JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded.
主要介绍了js判断图片加载完成后获取图片实际宽高的方法,涉及JavaScript图片加载及属性操作相关技巧,需要的朋友可以参考下