ie8、firfox关于(new Image()).onload的问题

如果要获取一张图片原本的高度和宽度,我们一般这样获取

var url = "../images/1.jpg";

var img = new Image();

img.src = url;

img.onload = function(){

  //do something.....

}

当图片从服务器传到本来(也即下载完成),就会触发onload事件。但是,如果图片已经缓存在本地的话,在ie8、firfox就有问题了。因为图片已经缓存在本地,所以在没执行js代码前已经触发onload事件,导致没有执行onload里面的代码。

解决方案:

把代码改成

var url = "../images/1.jpg";

var img = new Image();

img.onload = function(){

  //do something.....

}

img.src = url;

这样的话,就可以在js代码执行后加载图片,也保证了onload的执行。

时间: 2024-10-11 08:41:06

ie8、firfox关于(new Image()).onload的问题的相关文章

onsrcoll和scrollTop兼容与实现

对于onscroll事件的支持 各浏览器 document.document.body.document.documentElement 对象的 onscroll 事件的支持存在差异. 所谓的支持性存在差异就是我们常说的浏览器兼容性问题,就是说,对于不同浏览器可能不会按照预期触发相应的事件处理函数.   IE6 IE7 IE8 Firfox Chrome Safari Opera   Q S Q S Q S Q S Q S Q S Q S window 对象 Y Y Y Y Y Y Y Y Y

基于SVG的票面设计器开发总结

今天周六,原则上要休息,但想到下周还有一堆任务,还是先做一部分工作吧,就把之前做的票面设计器改了改,增加了上传图片和更换背景底图的功能.现在打算整理下这个设计器,也算对齐一个总结.不过这属于我们部门的产品,代码我使用截图的方式多一些.首先来看一下我做的这个票面设计器的最终效果图: 从截图中可以看到在页面里,专业点叫我在画布里增加了很多的元素,这些元素都与剧院票务相关包括项目.场次.地点,二维码等信息.上面的word截图是我今天做的功能,背景图我也换成了自定义的图片.光看这个页面其实不难做,因为页

web浏览器中javascript

1.异步载入一个js代码function loadasync(url) { var head = document.getElementsByTagName("head")[0]; // 找到head节点 var s = document.createElement("script"); // 创建一个script标签 s.src = url; // 设置一个src属性 head.appendChild(s); // 插入标签到head节点中}2.事件驱动javas

IE IE8 iframe的onload方法分析 IE浏览器onload事件失效

判断iframe是否加载完成的完美方法 IE 支持 iframe 的 onload 事件,不过是隐形的,需要通过 attachEvent 来注册. 第二种方法比第一种方法更完美(采用readystatechange判断),因为 readystatechange 事件相对于 load 事件有一些潜在的问题. 这里感觉说的并不是完全准确,开始给我造成了很大的困扰.看其代码才明白,真正意义上来讲IE在创建一个新的iframe时的onload方法需要使用attachEvent来绑定,而原来就存在的ifr

document.ready和onload的区别

转载地址:http://blog.csdn.net/zndxlxm/article/details/7404758 页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 用jQ的人很多人都是这么开始写脚本的:      $(function(){           // do something     });其实这个就是jq ready()的简写,他等价于:      $(docum

IE8和IE7如何获取background-position属性值

IE8和IE7如何获取background-position属性值:之所以要单独介绍一下如何获取background-position属性值,是因为在IE8和IE8以下浏览器中存在一定的兼容性问题,下面对此做一下简单介绍,希望能够给需要的朋友带来帮助.一.使用style方式:此方式只能够获取使用style方式定义的css样式属性,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&

window.onload用法详解

window.onload用法详解: 网页中的javascript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的低端,这样在运行脚本代码的时候,可以确保要操作的对象已经加载完成. 二.通过window.onload来执行脚本代码. 第一种方式感觉比较凌乱(其实推荐使用),往往我们需要将脚本代码放在一个更为合适的地方,那么window.onload方式就是一个更好的选择.window.onloa

ie8及其以下浏览器的document.getElementsByClassName兼容性问题

Google Chrome.Firefox.Opera.Safari.IE9及更新版本都支持javascript的document.getElementsByClassName函数,而IE6 IE7 IE8不支持document.getElementsByClassName,我们只能自己给document增加一个自定义函数getElementsByClassName,让IE 6-8也支持document.getElementsByClassName 以下是IE6 IE7 IE8 document

加载之ready和onload

页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页面包含图片等文件在内的所有元素都加载完成. 真不知道这个标题该怎么取,暂时就先凑活着用了. 用jQ的人很多人都是这么开始写脚本的: $(function(){ // do something }); 其实这个就是jq ready()的简写,他等价于: $(document).ready(function(){ //do something }) //或者下面这个方法,jQuer