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

发布于 2024-11-04 07:13:17 字数 913 浏览 6 评论 0原文

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

这应该是一个简单的解决方案 - 只需将所有事件添加到行中,如下所示:

<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;
}

到目前为止,我还没有解决此冲突的方法。有人有好主意吗?

I have multiple javasripts that needs using body onload event

It should be simple solution for that - just add all events in row like this:

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

But of course life isnt so simple..
fore some reason some scripts needs to be FIRST in row. So if I put showContent(); first, randomimages wont execute and vice versa.

I also tried replace onload event with script like this

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;
}

So far I have no solution for this conflict. Does somebody have good idea?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

梦一生花开无言 2024-11-11 07:13:18

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

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

可以放在更有条理的位置:

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

Why not create another function that holds all those functions and then call that one function on load? This is assuming your functions doesn't have some dependencies from the other functions.

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

can be in a bit more organized location:

function Init()
{
      showContent(); // if this errors out, execution for the rest stops
      randomImages();
      placeIt();
      showIt();
      preloadImgs();
      initialize();
}
攒一口袋星星 2024-11-11 07:13:18

@Felix Kling,你说对了一部分,它们是按顺序启动的,但每个函数的执行时间会有所不同,因此可以创建一个竞争条件,其中序列中的最后一个函数可以在之前完成序列中的第一个完成。

这个问题的答案是在你的函数中内置回调。然后您可以对它们进行排序,只有当前一个函数完成时才会调用后续函数。
关于这个主题,此处有一个很好的答案。

不过我还有另一点。尽量避免使用 Body Onload 组合,而使用 Jquery 的 document .ready() 函数。这是因为 Body Onload 可以在所有内容加载之前触发 - 我认为 JQuery 网站 这里 对此有更好的解释< /a>.

@Felix Kling you are partly right, they are initiated sequentially but the execution time of each function will be different, therefore it is possible to create a race condition where the last function in the sequence could complete before the first one in the sequence completes.

The answer to this question is to build in callback into your functions. Then you can sequence them and the subsequent function will be called only when the prior one completes.
There's a pretty good answer on that subject here.

However I have another point. Try to avoid using the Body Onload combination, and instead use Jquery's document .ready() function. This is because the Body Onload can fire before everything has been loaded - I think this is explained better on the JQuery website here.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文