jquery的$(document).ready() 以及 onload的加载顺序

Firefox与IE中onload事件差异

最新推荐文章于 2024-11-11 15:05:35 发布

原创最新推荐文章于 2024-11-11 15:05:35 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#firefox firebug onload

Web 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在Firefox和IE浏览器中页面onload事件与$(document).ready()触发顺序的不同表现，尤其是在嵌入frame的场景下。揭示了IE在处理页面加载时的特殊行为及其对页面加载性能的影响。

前几天，在用firefox启用firebug的情况下，调试项目，发现firefox崩溃，原因是死循环。

原因：页面的一个frame的onload方法是这么写的，onload="onload();"，即，方法名用的是关键字onload，这种情况下，会有问题。至于页面的加载，下面这篇文章可以参考。

======================================================================

来源：http://www.cnblogs.com/joycel/archive/2010/05/26/1744194.html

最近在改一个嵌入在frame中的页面的时候，使用了jquery做效果，而页面本身也绑定了onload事件。改完后，Firefox下测试正常流畅，IE下就要等个十几秒jquery的效果才出现，黄花菜都凉了。

　　起初以为是和本身onload加载的方法冲突。网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行，而 onload事件是在所有资源都准备完成之后才执行，也就是说$(document).ready()是要在onload之前执行的，尤其当页面图片较大较多的时候，这个时间差可能更大。可是我这页面分明是图片都显示出来十几秒了，还不见jquery的效果出来。

　　删了onload加载的方法试试，结果还是一样，看来没有必要把原本的onload事件绑定也改用$(document).ready()来写。那是什么原因使得Firefox正常而IE就能呢？接着调试，发现IE下原来绑定的onload方法竟然先于$(document).ready() 的内容执行，而Firefox则是先执行$(document).ready()的内容，再执行原来的onload方法。这个和网上的说法似乎不完全一致啊，呵呵，有点意思，好像越来越接近真相了。

　　翻翻jquery的源码看看$(document).ready()是如何实现的吧：

if ( jQuery.browser.msie && window == top ) (function(){ if (jQuery.isReady) return; try { document.documentElement.doScroll("left"); } catch( error ) { 　　　　　　setTimeout( arguments.callee, 0 ); 　　　　　　 return; 　　　　} 　　 // and execute any waiting functions 　　　jQuery.ready(); })(); …… jQuery.event.add( window, "load", jQuery.ready );

　　结果很明了了，IE只有在页面不是嵌入frame中的情况下才和Firefox等一样，先执行$(document).ready()的内容，再执行原来的onload方法。对于嵌入frame中的页面，也只是绑定在load事件上执行，所以自然是在原来的onload绑定的方法执行之后才轮到。而这个页面中正好在测试环境下有一个访问不到的资源，那十几秒的延迟正是它放大出的时间差。