logo标签列表

延迟加载jQuery脚本直到其他所有内容都已加载完成

javascriptjquerydom
127

我有一个jquery脚本，需要在页面中的其他所有内容（包括一些我无法控制的其他javascripts）完成其任务后才运行。

我考虑过是否有一种替代方法来使用$(document).ready，但是我没有找到。

7个回答
235

在页面中可以多次使用$(document).ready()。代码将按照它出现的顺序运行。

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

$(window).load(function(){
  //your code here
});
1
我能使用这种方法导入外部脚本吗？ - chrism
1
当然，如果你已经在 $(document).ready() 内部执行这个操作，那么这并没有什么区别。 - Jose Basilio
8
这个答案对我很有帮助，因为我之前没有意识到 jQuery 代码是按顺序执行的。 - Robert Johnstone
1
非常感谢！这解决了我的.height()问题，因为页面（显然）还没有加载，所以它没有得到正确的高度。 - Jon
12
在JQuery 3.0中，由于$(window).load()已被弃用，所以应该使用语法$(window).on('load', function() { });。 - Alex
显示剩余4条评论
21

这段代码解决了我的问题，

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

你如何运行一个jQuery函数来检查jQuery是否已经加载？只有在检查之前jQuery已经被加载才能起作用。 - HelpNeeder
1
太好了，它可以工作！ - Jay Nguyễn
这个对我绝对有效！非常感谢！ - Mego
13

多个$(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>
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指令的更旧版本的Greasemonkey而言，这只是一种妥协措施。 - Cheekysoft
1
我已经添加了我的代码作为一个例子，展示了我如何使用jQuery相同的概念来等待其他代码加载。 - Chris Doggett
2
你是否尝试过使用$().ready载入所有初始化函数，然后运行你想要的jQuery函数？
或者，你可以在你想要运行的$().ready函数上使用setTimeout()，调用你想要加载的功能。
又或者，你可以使用setInterval()，并让时间间隔检查其他所有载入函数是否已经完成（将状态存储在布尔变量中）。当满足条件时，你可以取消时间间隔并运行载入函数。
我不确定你的意思是什么。你是在建议我通过一个jquery脚本导入所有脚本，然后将我的脚本放在最后吗？如果是这样的话，那会是什么样子的呢（我是一名设计师，所以请不要用太高深的词汇 :)) - chrism
$(document).ready(function(){ callLoadFunction1(); callLoadFunction2(); calljQueryLoadFunction(); }); 页面就绪时，运行以下程序：调用LoadFunction1函数；调用LoadFunction2函数；调用jQueryLoadFunction函数； - Richard Clayton
其他脚本都是外部文件，所以我不确定这是否有效？ - chrism
@chrism：看看我的第二个例子。它会等待变量被设置，表明其他外部JS文件已加载，然后再执行任何操作。你只需要把你想要最后运行的代码放在我的JS_ready()方法中。它完全符合你的要求。 - Chris Doggett
2
只需使用$(window).load(function(){...})。 - Ryan Taylor
1
原来由于一种奇特的JavaScript框架混合，我需要使用另一个框架提供的事件监听器来启动脚本。
8
很高兴你找到了解决方案，但如果没有更多细节，你的答案对其他人来说并不实用。 - Andrew
0
以下脚本可确保在页面加载完所有图像、样式表和外部内容后运行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。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接