Question

我有多个需要使用body onload事件的javasripts

它应该是简单的解决方案 - 只需添加所有事件，如下所示：

<body onload="showContent();
    randomImages();
    placeIt();
    showIt();
    preloadImgs();
    initialize()">

但当然生活并非如此简单...... 出于某种原因某些脚本需要排在第一位。因此，如果我先放置showContent();，则不会执行randomimages，反之亦然。

我也尝试用这样的脚本替换onload事件

if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", showContent, false );
else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", showContent );
}
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            showContent();
        };
    }
    else
         window.onload = showContent;
}

到目前为止，我没有解决这场冲突的办法。有人有好主意吗？

Answer 1

为什么不创建另一个包含所有这些函数的函数，然后在加载时调用该函数？这假设您的函数与其他函数没有某些依赖关系。

showContent();randomImages();placeIt();showIt();preloadImgs();initialize()

可以在更有条理的位置：

function Init()
{
      showContent(); // if this errors out, execution for the rest stops
      randomImages();
      placeIt();
      showIt();
      preloadImgs();
      initialize();
}

Answer 2

@Felix Kling你是部分正确的，它们是按顺序启动的，但每个函数的执行时间都不同，因此可以创建一个竞争条件，其中序列中的最后一个函数可以在之前完成 em>序列中的第一个完成。

这个问题的答案是建立对函数的回调。然后你可以对它们进行排序，只有当前一个函数完成时才会调用后续函数。关于这个主题here有一个非常好的答案。

但我有另一点。尽量避免使用Body Onload组合，而是使用Jquery的文档.ready（）函数。这是因为Body Onload可以在加载所有内容之前触发 - 我认为这可以在JQuery网站上更好地解释here。

javascript冲突多个body onload事件需要排在第一位

2 个答案: