Question

我有一个jquery脚本，我只需要在页面上的其他所有内容运行，包括其他一些javascripts（我无法控制）已经完成了他们的事情。

我可能有一个替代$（document）.ready但我找不到它。

Answer 1

您可以在页面中多次$(document).ready()次。代码按其出现的顺序运行。

您可以对代码使用$(window).load()事件，因为在页面完全加载并且各种$(document).ready()处理程序中的所有代码都已完成运行后会发生这种情况。

$(window).load(function(){
  //your code here
});

Answer 2

多个$(document).ready()会在页面上自上而下触发。最后一个$(document).ready()将在页面上最后触发。在最后$(document).ready()内，您可以触发一个新的自定义事件，以便在所有其他事件之后触发..

将代码包装在新自定义事件的事件处理程序中。

<html>
<head>
<script>
    $(document).on("my-event-afterLastDocumentReady", function () {
        // Fires LAST
    });
    $(document).ready(function() {
        // Fires FIRST
    });
    $(document).ready(function() {
        // Fires SECOND
    });
    $(document).ready(function() {
        // Fires THIRD
    });
</script>
<body>
... other code, scripts, etc....
</body>
</html>

<script>
    $(document).ready(function() {
        // Fires FOURTH
        // This event will fire after all the other $(document).ready() functions have completed.
        // Usefull when your script is at the top of the page, but you need it run last
        $(document).trigger("my-event-afterLastDocumentReady");
    });
</script>

Answer 3

此代码块解决了我的问题，

＆＃13;

<script type="text/javascript">
  $(window).bind("load", function () {
    // Code here
  });
</script>

＆＃13;

Answer 4

来自here：

// Add jQuery 
var GM_JQ = document.createElement('script'); 
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript'; 
document.getElementsByTagName('head')[0].appendChild(GM_JQ); 

// Check if jQuery's loaded 
function GM_wait() 
{ 
    if(typeof unsafeWindow.jQuery == 'undefined') 
    { 
        window.setTimeout(GM_wait,100); 
    } 
    else 
    { 
        $ = unsafeWindow.jQuery; 
        letsJQuery(); 
    } 
} 

GM_wait(); 

// All your GM code must be inside this function 
function letsJQuery() 
{
    // Do your jQuery stuff in here    
}

这将等到jQuery加载后才能使用它，但你可以使用相同的概念，在其他脚本中设置变量（或检查它们是否不是你的脚本）等待它们被加载以使用它们

例如，在我的网站上，我使用它进行异步JS加载并等待它们完成之后再使用jQuery对它们进行任何操作：

<script type="text/javascript" language="JavaScript"> 
    function js(url){
        s = document.createElement("script");
        s.type = "text/javascript";
        s.src = url;
        document.getElementsByTagName("head")[0].appendChild(s);
    }       

    js("/js/jquery-ui.js");
    js("/js/jrails.js");
    js("/js/jquery.jgrowl-min.js");
    js("/js/jquery.scrollTo-min.js");
    js("/js/jquery.corner-min.js");
    js("/js/jquery.cookie-min.js");
    js("/js/application-min.js");

    function JS_wait() {
        if (typeof $.cookie == 'undefined' || // set in jquery.cookie-min.js
            typeof getLastViewedAnchor == 'undefined' || // set in application-min.js
            typeof getLastViewedArchive == 'undefined' || // set in application-min.js 
            typeof getAntiSpamValue == 'undefined') // set in application-min.js
        { 
            window.setTimeout(JS_wait, 100); 
        }
        else 
        { 
            JS_ready(); 
        }
    }

    function JS_ready() {
        // snipped
    };

    $(document).ready(JS_wait);
</script>

Answer 5

事实证明，由于javascript框架的特殊混合，我需要使用由其他框架之一提供的事件监听器来启动脚本。

Answer 6

您是否尝试使用$().ready加载所有初始化函数，运行您最后想要的jQuery函数？

也许你可以在你想要运行的setTimeout()函数上使用$().ready，调用你想要加载的功能。

或者，使用setInterval()并进行间隔检查以查看是否所有其他加载函数都已完成（将状态存储在布尔变量中）。满足条件时，可以取消间隔并运行加载功能。

Answer 7

以下脚本可确保 my_finalFunction 在您的页面完全加载图像、样式表和外部内容后运行：

<script>

    document.addEventListener("load", my_finalFunction, false);

    function my_finalFunction(e) {
        /* things to do after all has been loaded */
    }

</script>

kirupa 对如何在正确的时间运行代码提供了很好的解释，请参阅 https://www.kirupa.com/html5/running_your_code_at_the_right_time.htm。

延迟jquery脚本，直到其他所有内容都加载完毕

7 个答案: