在chrome中window.onload事件的一些问题

假如我们有一个如下的页面：


代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<img src="http://zsrimg.ikafan.com/upload/2010-3/20100301192859481.gif" alt="" id="image">
<script type="text/javascript">
var init=function (){
var img=document.getElementById('image');
alert(img.offsetWidth);
}
window.onload=new init();
</script>
</body>
</html>

在IE和FF下运行的时候都是可以显示图片的真实大小的，即使我并没有显示的说明这个img的width和height。但是在chrome下，则显示的是0。
但是如果将window.onload后面的new init()改为
window.onload=init
或者
window.onload=function(){new init(){}}
就可以在图片加载之后读出图片的大小。
转载请保留以下信息
作者：北玉(tw:@rehawk)

赞 (0)

相关推荐

  • 浅析document.ready和window.onload的区别讲解

    Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作,这个问题在"javascript执行顺序里"http://www.jb51.net/article/44577.htm一文里有详细介绍. jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行.比如在"jQuery基础 - 如何开始"一文里,我用到如下jQuery代码: 复制代码 代码如下: <!--   $(document).ready(

  • JS:window.onload的使用介绍

    1.最简单的调用方式 直接写到html的body标签里面,如: 复制代码 代码如下: <html> <body onload="func()"> </body> </html> 2.在JS语句调用 复制代码 代码如下: <script type="text/javascript"> function func(){--} window.onload=func; </script> 3.同时 调用

  • window.onload的页面加载技巧

    把两段代码分别测试后发现不带括号的window.onload在页面加载后显示了正确的效果. 我想window.onload也相当于一个触发事件,如果函数加了括号那就直接先执行函数,再加载body.而不加括号,则相当于将一个函数当作变量赋值到window.onload上,并不立即加载. 代码一: window.onload = doIt(); function doIt() { var oDiv = document.getElementById("div1"); alert (oDiv

  • window.onload和$(function(){})的区别介绍

    复制代码 代码如下: window.onload=function{} 表示页面加载完了后(包括dom和js),再执行函数里面的内容: 复制代码 代码如下: $(function(){}) 表示页面(dom)加载完了后,再执行函数里面的内容

  • window.onload使用指南

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

  • jquery中的$(document).ready()与window.onload的区别

    所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误.window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的div</div>"; } 解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQu

  • js window.onload 加载多个函数的方法

    用法如下: function func(){alert("this is window onload event!");return;} window.onload=func; 或者如下: window.onload=function(){alert("this is window onload event!");return;} 但window.onload 不能同时加载多个函数. 比如: 复制代码 代码如下: function t(){ alert("

  • jquery $(document).ready() 与window.onload的区别

    jquery $(document).ready() 与window.onload的区别

    1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个          $(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法 window.onload没有简化写法          $(documen

  • 在chrome中window.onload事件的一些问题

    假如我们有一个如下的页面: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="

  • Angular.js中window.onload(),$(document).ready()的写法浅析

    一,问题发现: 最近公司有个微信公众号项目,为了方便直接使用anular.js+ionic进行开发,里面有使用到echarts图表,具体开发中发现echarts在初始化绑定图表的DOM节点时,一直提示该节点不合法;可是明明已经把代码写在了window.onload()中了,又改成$(function(){})结果还是不行. 二,解决方案 1使用angular.element <script type="text/javascript"> angular.element(wi

  • 引用其它js时如何同时处理多个window.onload事件

    有时引用其它js时,其js却使用了window.onload事件,这样的话,引入的页面的onload事件就有可能执行不了,怎样才能两个都运行呢?除了将两个写到一块儿去的方法外,还有其他的方法 if(window.onload!=null){ eval("theOldFun="+window.onload.toString()); window.onload=function(){theOldFun();addReadResource();}; } eval()函数的作用: 它的功能是把

  • javascript中window.event事件用法详解

    前两天写程序时因为要用到javascript中的window.event事件,于是就在网上搜了一下,终于找到一篇不错的文章,来与大家分享下: 描述 event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子下面的例子检查鼠标是否在链接上单击,并且,如

  • IE浏览器中图片onload事件无效的解决方法

    故事模式实现是只加载当前浏览的照片和它下面的两张照片,加载照片的时候才会加载和渲染评论区,图片没有加载前会用一个一象素的图片占位,并用一个loading类将显示出一个loading背景图,判断在可视区的时候替换成真正的图片,图片加载成功后删除loading类. 问题出在最后面,测试的时候发现在IE下loading类无法删除,当时代码如下: 复制代码 代码如下: img.src = _src;img.src = _src;img.onload = function(){   _con.delCla

  • 修复ie8&chrome下window的resize事件多次执行

    复制代码 代码如下: /** * window.onresize 事件 专用事件绑定器 v0.1 Alucelx * http://www.cnblogs.com/Alucelx/archive/2011/10/20/2219263.html * <description> * 用于解决 lte ie8 & chrome 及其他可能会出现的 原生 window.resize 事件多次执行的 BUG. * </description> * <methods> *

  • jquery中的常用事件bind、hover、toggle等示例介绍

    1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果.但是也有一些差异: 当一个文档完全下载到浏览器中时,会触发window.onload事件.而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后,代码就可以运行,但并不意味着所有关联文件都已经下载完毕. 一个页面中一般只有一个onload事件处理程序

  • jQuery中的常用事件总结

    1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果.但是也有一些差异: 当一个文档完全下载到浏览器中时,会触发window.onload事件.而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后,代码就可以运行,但并不意味着所有关联文件都已经下载完毕. 一个页面中一般只有一个onload事件处理程序

  • 全面解析jQuery $(document).ready()和JavaScript onload事件

    对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>1-1</title> <script type="text/javascript"> document.getElementById("panel").onclick = fu

随机推荐