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

Posted 2023-05-09

技术标签:

【中文标题】延迟 jquery 脚本，直到其他所有内容都已加载【英文标题】：Delaying a jquery script until everything else has loaded 【发布时间】：2010-11-03 23:18:42 【问题描述】：

我有一个 jquery 脚本，我只需要在页面上的所有其他内容（包括其他一些 javascript（我无法控制））完成他们的工作后运行它。

我虽然可能有 $(document).ready 的替代品，但我一直没能找到它。

【问题讨论】：

【参考方案1】：

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

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

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

【讨论】：

这个方法可以导入外部脚本吗？当然，如果您已经在 $(document).ready() 中执行此操作，也不会有所不同。这个答案对我很有用，因为我没有意识到 jquery 代码是按顺序运行的非常感谢！这解决了我的 .height() 问题，因为页面（显然）还没有加载，所以它没有得到正确的高度。在 JQuery 3.0 中，您应该使用语法 $(window).on('load', function() );，因为不推荐使用 $(window).load()。【参考方案2】：

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

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

【讨论】：

如何运行 jQuery 函数来查看 jQuery 是否已经加载？这仅在 jQuery 在检查之前加载时才有效。太好了，它有效！【参考方案3】：

多个$(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>

【讨论】：

【参考方案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>

【讨论】：

这只会等到 jQuery 被加载并忽略页面的其他方面。对于不支持@require指令的旧版本的greasemonkey来说，这只不过是一种黑客攻击。我添加了我的代码作为示例，说明我如何在 jQuery 中使用相同的概念来等待其他代码加载。【参考方案5】：

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

【讨论】：

很高兴您找到了解决方案，但如果没有更多详细信息，您的答案对其他人无用...【参考方案6】：

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

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

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

【讨论】：

我不确定你的意思。您是否建议我通过 jquery 脚本导入所有脚本并将我的脚本放在最后？如果是这样，那会是什么样子（我是一名设计师，所以不要使用大词:)） $(document).ready(function() callLoadFunction1(); callLoadFunction2(); calljQueryLoadFunction(); ); 其他脚本都是外部文件，所以我不确定这是否可行？ @chrism：看我的第二个例子。它一直等到设置了变量，指示其他外部 JS 文件已加载，然后才执行任何操作。您只需将要最后运行的代码放在我的 JS_ready() 方法中。它完全符合您的要求。只要使用$(window).load(function()...)【参考方案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 脚本，直到其他所有内容都已加载的主要内容，如果未能解决你的问题，请参考以下文章

延迟显示页面，直到所有内容都加载完毕

显示加载微调器，直到页面内的所有子组件都已呈现 - Nativescript

延迟加载外部js文件，延迟加载图片（jquery.lazyload.js和echo,js）

jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

Chrome扩展，如何延迟脚本直到页面完全加载

如何延迟加载反应应用程序直到触发操作？