`
javasogo
  • 浏览: 1839652 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

window.onload的替代方案——DOM状态检测

 
阅读更多

window.onload是非常常用的初始化事件,而该事件所对应的响应函数只有在浏览器将目标页面中所有资源内容全部装载完毕之后才会执行,这里的“所有资源内容”特指图片、音效、iframe所包含的页面等。

下面的例子是使用window.onload方式执行JavaScript脚本:

Firefox & Opera下的替换方案:

IE下的替换方案,:

Firefox & Opera & IE综合方案:

之所以要用window.onload是为了应对那些既不支持DOMContentLoaded也不支持onreadystatechange的浏览器。setTimeout函数的作用是为了保证变量alreadyrunflag在window.onload事件被激活之前已经赋值。因为有时在IE浏览器中,由于要装载资源几乎没有,导致window.onload和onreadystatechange事件同时激活,这样的话,在onload事件做判断时变量alreadyrunflag可能还没有被赋值,这就无法保证程序执行的正确性。所以用setTimeout函数来让onload事件中的判断条件稍微滞后一些,以保证alreadyrunflag可用。

下面是原文中用在Safari中的方案:

这种方案是就是单纯的检测document的状态。至于为什么不使用DOMContentLoaded,可能是和文章所写时的Safari版本有关吧。从http://en.wikipedia.org/wiki/DOM_events可以看出,Safari3.1+就开始支持DOMContentLoaded了,可喜的是IE9也支持了(http://p2b.jp/1269996654,同时支持的还有addEventListener)。不过这种方案也许还会有用,最差也可以帮我们开阔下眼界。
以上内容大部分来自:http://www.javascriptkit.com/dhtmltutors/domready.shtml。其中添加了点自己理解。

分享到:
评论

相关推荐

    jquery简介

    在传统 JavaScript 中,我们通常会使用 `window.onload` 或 `document.onload` 来确保页面加载完成后再执行某些代码。jQuery 提供了更简洁的方式来替代这种做法,通过 `$(document).ready(function() {...})` 或简写...

    网页制作习题集

    ### 知识点总结 #### 1.... #### 2.... - 使用ASP技术接收并处理表单提交的数据。... - **Q19**: C (DOM) —— DHTML技术的核心是DOM,即文档对象模型。 - **Q20**: 使用CSS对文本进行格式化,包括字体、颜色、大小等。

    15天学会jquery

    在传统JavaScript中,`window.onload`是一个常用的方法,用于确保页面完全加载后再执行某些操作。然而,有时我们需要在页面加载过程中就开始执行一些脚本。这就是`$(document).ready()`的用武之地——它会在DOM准备...

    jQuery插件zepto.js简单实现tab切换

    本文将介绍如何使用jQuery的轻量级替代品——Zepto.js来实现简单的tab切换功能。 Zepto.js是一个非常轻量级的JavaScript库,它几乎拥有与jQuery相同的API,但其体积更小,加载速度更快,非常适合移动设备使用。在...

    JQuery 学习笔记01 JQuery初接触

    在实际应用中,这比`window.onload`更为高效。如果不习惯使用`$`符号,可以使用`jQuery`作为替代,例如: ```javascript jQuery(function() { alert("hello"); }); ``` 或者使用完整的`$(document).ready()`形式: ...

Global site tag (gtag.js) - Google Analytics