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


111

我有一个jquery脚本,只需要在页面上的所有其他内容(包括一些其他javascript(我无法控制))完成其工作后即可运行。

我也许可以用$(document).ready的替代方法,但是我找不到它。

Answers:


217

您可以$(document).ready()在一个页面中多次。代码按照显示顺序运行。

您可以将$(window).load()事件用于代码,因为这是在页面完全加载并且各种$(document).ready()处理程序中的所有代码都已运行完之后发生的。

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

1
如何使用此方法导入外部脚本?
Christm

1
当然,如果您已经在$ {document).ready()内部执行此操作,则没有什么不同。
何塞·巴西里奥

7
这个答案对我很有用,因为我没有意识到jquery代码是按顺序运行的
Sevenearths 2011年

1
非常感谢!这解决了我的.height()问题,由于页面(显然)尚未加载,因此无法获得正确的高度。
2013年

6
在JQuery 3.0中,$(window).on('load', function() { });由于不建议使用$(window).load(),因此应使用语法。
亚历克斯·H

13

这个代码块解决了我的问题,

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


如何运行jQuery函数以查看jQuery是否已加载?这仅在jQuery在检查之前已加载时才有效。
HelpNeeder

11

多个$(document).ready()将按顺序从上至下在页面上触发。最后$(document).ready()将在页面上最后触发。在last中$(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>

3

这里

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

这只会等到加载jQuery并忽略页面的其他方面。它仅是针对不支持@require指令的旧版本的oilmonkey的黑客。
Cheekysoft

1
我添加了我的代码作为示例,说明我如何将相同的概念与jQuery一起使用,直到其他代码加载完毕。
克里斯·多格特

1

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


3
很高兴您找到了解决方案,但是您的答案对没有更多细节的其他人没有帮助……
Andrew

1

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

也许您可以setTimeout()$().ready要运行的功能上使用,调用要加载的功能。

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


我不确定您的意思。您是否建议我通过jquery脚本导入所有脚本并将脚本放在最后?如果是这样的话,那会是什么样子(我是一名行业设计师,所以请不要
大声疾呼

$(document).ready(function(){callLoadFunction1(); callLoadFunction2(); calljQueryLoadFunction();});
理查德·克莱顿

其他脚本都是外部文件,所以我不确定是否可以使用?
圣油

@chrism:看看我的第二个例子。它会等到设置了变量(指示其他外部JS文件已加载)后再执行任何操作。您只需将要运行的代码放在我的JS_ready()方法中。它确实满足您的需求。
克里斯·多格特

2
只需使用$(window).load(function(){...})
Ryan Taylor
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.