`
sabolasi
  • 浏览: 910382 次
文章分类
社区版块
存档分类
最新评论

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。其中添加了点自己理解。

分享到:
评论

相关推荐

    脱离document.onload和window.onload的onload事件

    脱离document.onload和window.onload的onload事件,可多次添加加载事件!

    window.onload

    window.onload insertAfter()

    Jqyery中同等与js中windows.onload的应用

    我们知道,在javascript中用来执行页面加载中的操作时候,我们会使用windows.onload=function(){}或者windows.onload=函数名(),也可以在body中调用onload事件调用方法即可,在jQuery中也有相当的代码

    ie中 body onload 和 window onload 解决法案

    有需要的朋友是最好的参考资料。希望有所帮助!

    window.addEventListener来解决让一个js事件执行多个函数

    可能你也碰到过这种情况,就是在js的代码中用了[removed]后,可能会影响到body中的onload事件。你可以全写在body中,也可以全放到... 代码如下: if (document.all){ window.attachEvent(‘onload’,函数名)//IE中 } els

    15天漫游jQuery中文翻译word版

    资源名称:15天漫游jQuery中文翻译 word版内容简介:15天漫游jQuery中译本,不是很完整,但是也是学习jquery 不可或缺的东东1 day Window.onload() 一直是常用的javascript函数。数年来程序员们习惯了通过它在...

    Selenium处理弹出窗口.docx

    selenium会弹出网页窗口,因为它重写了window.open在文件selenium-browserbot.js函数BrowserBot.prototype.modifyWindowToRecordPopUpDialogs中的newOpen,但这必须在window.onload之后创建才有效。对于HTTPS安全性...

    js 某个页面监听事件渲染完毕的时间.pdf

    其中,window.onload方法是页面所有资源加载完成之后触发,因此性能较差;(document).ready方法是在页面dom元素加载完成之后触发,性能较好。 总体而言,页面渲染完毕时间监听是前端开发中一个非常重要的环节,能够...

    onload和jquery运行顺序

    window.onload = function () { console.log('window.onload 方式执行') } $(document).ready(function () { console.log('$(document).ready(function(){}) 方式执行') })

    获取页面长宽和滚动条的位置

    <!...<html xmlns="http://www.w3.org/1999/xhtml" > function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) ... scrW = window.innerWidth ...<body onload="main();"> </html>

    Web前端开发工程师笔试题及答案

    腾迅Web前端开发工程师笔试题及答案 ...function elementName(evt){ evt = evt|| window.... window.onload = function(){ var el = document.getElementsByTagName('body'); el[0].onclick = elementName; } ......

    jQuery实例教程

    (也许window.onload()能实现同样的功能,但是jQuery更加快速,灵活)。 $(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web...

    浅谈js图片前端预览之filereader和window.URL.createObjectURL

    浅谈js图片前端预览之filereader和window.URL.createObjectURL //preview img : filereader方式 document.getElementById('imgFile').onchange = function(e){ 5 var ele = document.getElementById('imgFile')....

    js的image onload事件使用遇到的问题

    关于 Image 对象 onload 事件。 想获取的是 image 的 宽高值。所以用 onload 方法。另外是获取的远程图片。 但IE在第二次显示图片的时候,总是不走 onload 方法。代码: var img = new Image(); img.src = ...

    shake.js应用和资源

    window.onload = function() { var myShakeEvent = new Shake({ threshold: 15 }); myShakeEvent.start(); window.addEventListener('shake', shakeEventDidOccur, false); function ...

    js 进度条demo.html

    window.onload = function () { window.setInterval("ajaxpage('dummy/top.txt','top',{color:'blue',opacity:0.25})", 3000); window.setInterval("ajaxpage('dummy/left.txt','left',{color:'black', opacity:...

    HTML5跨年烟花动画效果

    window.onload = function(){ initAnimate() } function initAnimate(){ drawBg(); lastTime = new Date(); animate(); } var lastTime; function animate(){ ctx.save(); ctx....

    JavaScript权威指南

    Other DOM APIs for Styles and Style Sheets Chapter 19. Events and Event Handling Section 19.1. Basic Event Handling Section 19.2. Advanced Event Handling with DOM Level 2 Section 19.3. The ...

    iframe中onload的bug

    NULL 博文链接:https://snandy.iteye.com/blog/666530

Global site tag (gtag.js) - Google Analytics