`

window.onload执行顺序详解

 
阅读更多
当js中有window.onload,而<BODY>中又有onload属性时,

window.onload在<HEAD>中

情况一,window.onload指定的function是匿名的,则只执行后者,且动作是后者的动作。如:

<html>
        <head>
        <script type="text/javascript">
        alert('a');
        window.onload=function(){    // 
            alert('b');
        }
        alert('c');
        </script>
        </head>
        <body onload="alert('d');">
        </body>
 </html>
----显示:acd


情况二,window.onload指定的function不是匿名的,则都会执行,前者先于后者。如:

<html>
        <head>
        <script type="text/javascript">
        alert('a');
        window.onload=fn(); // 后续脚本不执行
        function fn(){
            alert('b');
        }
        alert('c');
        </script>
        </head>
        <body onload="alert('d');">
        </body>
 </html>

----依次显示:abcd


window.onload在<BODY>中
情况三,window.onload指定的function是匿名的,则只执行后者,但动作前者是前者的动作。如:

<html>
        <head>
        </head>
        <body onload="alert('a');">
        <script type="text/javascript">
        alert('b');
        window.onload=function (){    //
            alert('c');
        }
        alert('d');
        </script>
        </body>
</html>

----依次显示:bdc

情况四,window.onload指定的function不是匿名的,则都会执行,前者优于后者。如:

<html>
        <head>
        </head>
        <body onload="alert('a');">
        <script type="text/javascript">
        alert('b');
        window.onload=fn();    // 后续脚本未执行
        alert('c');
        function fn(){
            alert('d');
        }
        </script>
        </body>
</html>

----依次显示:bdc



分享到:
评论

相关推荐

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

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

    window.onload

    window.onload insertAfter()

    onload和jquery运行顺序

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

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

    可能你也碰到过这种情况,就是在js的代码中用了[removed]后,可能会影响到body中的onload事件。这时就要用window.attachEvent和window.addEventListener来解决一下,需要的朋友可以参考下

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

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

    15天漫游jQuery中文翻译word版

    资源名称:15天漫游jQuery中文翻译 word版内容简介... 但有时候等待页面加载可以让人心急如焚~~ 几张较大的图片文件就可以显著拖慢 window.onload() 的执行 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    ie中 body onload 和 window onload 解决法案

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

    Selenium处理弹出窗口.docx

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

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

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

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

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

    仅img元素创建后不添加到文档中会执行onload事件的解决方法

    仅img元素创建后不添加到文档中会执行onload事件的解决方法,需要的朋友可以参考下。

    浅谈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 = ...

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

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

    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....

    微信小程序onLaunch异步,首页onLoad先执行?

    本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执行了。   //app.js App({ onLaunch: ...

    jQuery实例教程

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

Global site tag (gtag.js) - Google Analytics