blocks|key|1526861|text|事实证明，由于javascript框架的特殊混合，我需要使用其他框架提供的事件侦听器来启动脚本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1526862|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>It turns out that because of a peculiar mixture of javascript frameworks that I needed to initiate the script using an event listener provide by one of the other frameworks.</p>


blocks|key|1526707|text|您可以在一个页面中多次使用$(document).ready()。代码按照出现的顺序运行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1526708|您可以对代码使用$(window).load()事件，因为这是在页面完全加载并且各种$(document).ready()处理程序中的所有代码都运行完毕之后发生的。|1526709|$(window).load(function(){
++//your+code+here
});|code-block|syntax|javascript|1526710|entityMap^0|D|J|0|8|G|16|J|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>You can have <code>$(document).ready()</code> multiple times in a page. The code gets run in the sequence in which it appears. </p>

<p>You can use the <code>$(window).load()</code> event for your code since this happens after the page is fully loaded and all the code in the various <code>$(document).ready()</code> handlers have finished running.</p>

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


blocks|key|1311850|text|这个代码块解决了我的问题，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1311851|​|1311852|<script+type="text/javascript">
++$(window).bind("load",+function+()+{
++++//+Code+here
++});
</script>|code-block|syntax|javascript|1311853|1311854|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>This code block solve my problem,</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript"&gt;
  $(window).bind("load", function () {
    // Code here
  });
&lt;/script&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1311815|text|多个$(document).ready()将在页面上按自上而下的顺序触发。最后一个$(document).ready()将在页面的最后触发。在最后一个$(document).ready()中，您可以触发一个新的自定义事件，以在所有其他事件之后触发。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1311816|将代码包装在新的自定义事件的事件处理程序中。|1311817|<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>|code-block|syntax|javascript|1311818|entityMap^0|2|J|15|J|23|J|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>Multiple <code>$(document).ready()</code> will fire in order top down on the page.  The last <code>$(document).ready()</code> will fire last on the page.  Inside the last <code>$(document).ready()</code>, you can trigger a new custom event to fire after all the others..</p>

<p>Wrap your code in an event handler for the new custom event.</p>

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

&lt;script&gt;
    $(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");
    });
&lt;/script&gt;
</code></pre>


blocks|key|1311678|text|来自here|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1311679|//+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++++
}+|code-block|syntax|javascript|1311680|这将等待jQuery加载使用它，但您可以使用相同的概念，在其他脚本中设置变量(如果它们不是您的脚本，则检查它们)，直到加载它们才使用它们。|1311681|例如，在我的站点上，我使用它进行异步JS加载，并等待它们完成，然后再使用jQuery对它们执行任何操作：|1311682|<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'+%7C%7C+//+set+in+jquery.cookie-min.js
++++++++++++typeof+getLastViewedAnchor+==+'undefined'+%7C%7C+//+set+in+application-min.js
++++++++++++typeof+getLastViewedArchive+==+'undefined'+%7C%7C+//+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>+|1311683|entityMap|0|LINK|mutability|MUTABLE|url|http://www.nabble.com/Loading-jQuery-UI-dialogs-from-GreaseMonkey--td19897312s27240.html^0|2|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|F|7|13|8|@]|9|@]|C|$G|H]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>From <a href="http://www.nabble.com/Loading-jQuery-UI-dialogs-from-GreaseMonkey--td19897312s27240.html" rel="nofollow noreferrer">here</a>:</p>

<pre><code>// 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    
} 
</code></pre>

<p>This will wait until jQuery is loaded to use it, but you can use the same concept, setting variables in your other scripts (or checking them if they're not your script) to wait until they're loaded to use them.</p>

<p>For example, on my site, I use this for asynchronous JS loading and waiting until they're finished before doing anything with them using jQuery:</p>

<pre><code>&lt;script type="text/javascript" language="JavaScript"&gt; 
    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);
&lt;/script&gt; 
</code></pre>


blocks|key|1526628|text|您是否尝试过使用$().ready加载所有初始化函数，运行您最后想要的jQuery函数？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1526629|也许您可以在想要运行的$().ready函数上使用setTimeout()，调用想要加载的函数。|1526630|或者，使用setInterval()并进行间隔检查，以查看是否所有其他加载函数都已完成(将状态存储在布尔变量中)。当满足条件时，您可以取消间隔并运行加载函数。|1526631|entityMap^0|8|9|0|B|9|P|C|0|5|D|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|K|$]]

<p>Have you tried loading all the initialization functions using the <code>$().ready</code>, running the jQuery function you wanted last?</p>

<p>Perhaps you can use <code>setTimeout()</code> on the <code>$().ready</code> function you wanted to run, calling the functionality you wanted to load.</p>

<p>Or, use <code>setInterval()</code> and have the interval check to see if all the other load functions have completed (store the status in a boolean variable).  When conditions are met, you could cancel the interval and run the load function.</p>


blocks|key|1527015|text|下面的脚本确保my_finalFunction在页面完全加载图像、样式表和外部内容后运行：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1527016|<script>

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

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

</script>|code-block|syntax|javascript|1527017|kirupa提供了一个很好的解释，关于在正确的时间运行你的代码，请参阅https://www.kirupa.com/html5/running_your_code_at_the_right_time.htm。|1527018|entityMap|0|LINK|mutability|MUTABLE|url|https://www.kirupa.com/html5/running_your_code_at_the_right_time.htm^0|7|G|0|0|Z|1W|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>The following script ensures that <code>my_finalFunction</code> runs after your page has been fully loaded with images, stylesheets and external content:</p>
<pre><code>&lt;script&gt;

    document.addEventListener(&quot;load&quot;, my_finalFunction, false);

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

&lt;/script&gt;
</code></pre>
<p>A good explanation is provided by kirupa on running your code at the right time, see <a href="https://www.kirupa.com/html5/running_your_code_at_the_right_time.htm" rel="nofollow noreferrer">https://www.kirupa.com/html5/running_your_code_at_the_right_time.htm</a>.</p>


<p>I have a jquery script which I need to run only once everything else on the page, including some other javascripts (over which I have no control) have finished doing their thing.</p>

<p>I though perhaps there was an alternative to $(document).ready but I haven't been able to find it.</p>


Delaying a jquery script until everything else has loaded

我有一个jquery脚本，我只需要运行一次页面上的其他所有东西，包括一些其他javascripts (我无法控制它们)完成它们的事情。我想也许还有$(文档).ready的替代方案，但我一直没能找到它。

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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