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

IT技术 javascript jquery dom
2021-02-26 18:29:42

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

我虽然也许有 $(document).ready 的替代方案,但我一直找不到它。

6个回答

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

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

$(window).load(function(){
  //your code here
});
当然,如果您已经在 $(document).ready() 中执行此操作,那么这也没有什么不同。
2021-04-23 18:29:42
太感谢了!这解决了我的 .height() 问题,因为页面(显然)尚未加载,因此无法获得正确的高度。
2021-04-25 18:29:42
这个答案对我很有用,因为我没有意识到 jquery 代码是按顺序运行的
2021-05-09 18:29:42
在 JQuery 3.0 中,您应该使用语法,$(window).on('load', function() { });因为 $(window).load() 已被弃用。
2021-05-10 18:29:42
我可以使用这种方法导入外部脚本吗?
2021-05-20 18:29:42

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

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

如何运行 jQuery 函数来查看 jQuery 是否已加载?这仅在检查之前加载 jQuery 时才有效。
2021-04-23 18:29:42
太好了,它有效!
2021-05-02 18:29:42

Multiple$(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>

这里

// 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,这只不过是一个hack。
2021-04-27 18:29:42
我添加了我的代码作为示例,说明我如何在 jQuery 中使用相同的概念来等待其他代码加载。
2021-05-17 18:29:42

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

很高兴您找到了解决方案,但如果没有更多详细信息,您的答案对其他人没有用...
2021-05-10 18:29:42