How to make sure $(document).ready run after jQuery.js is available?_问答_开发者

How to make sure $(document).ready run after jQuery.js is available?

开发者 https://www.devze.com 2023-02-18 20:49 出处：网络

In some cases, because of download speed or other async issue, even I put $(document).ready() after including jquery.js, from time to time, I will get complains ab开发者_如何学编程out $ is undefined.b

In some cases, because of download speed or other async issue, even I put $(document).ready() after including jquery.js, from time to time, I will get complains ab开发者_如何学编程out $ is undefined. blah blah blah.

I don't want to do that:

setTimeout(function() {$(document).ready()... }, 1000);

that seems very lame.

so, is there a smart way or proper way or good way to ensure document.ready is really ready to be called? :)

I believe that is actually impossible, (the fact that $ would be undefined), the document head loads synchronously meaning each line is fully loaded before the next line

There is a video here where this exact test is put to the test and it seems I was correct

Video: http://www.bennadel.com/blog/1915-How-Javascript-Loading-And-Blocking-Works-By-Default.htm

are you loading the files correctly such as

<!DOCTYPE html>
<html>
    <head>
        <title>...</title>
        <script type="text/javascript" src="...."></script>
        <script type="text/javascript" src="...."></script>
        <script type="text/javascript" src="...."></script>
        <script type="text/javascript" src="...."></script>
        <script type="text/javascript">
            jQuery.ready(function(){
               //This is executed once all 4 above have been loaded
            });
        </script>
        <script type="text/javascript" src="...."></script>
        <script type="text/javascript" src="...."></script>
        <!-- The above to scripts are loaded in order after the jquery function has run. -->
    </head>
</html>

the ready method of jQuery only gets fired once the hole document has been loaded, until the DOM see's the final ending tag, usually </html> [citation needed]

having said that its impossible, it may be possible in IE8 or lower, the reason for this is because IE is possibly the worst browser ever made, but they have said that IE9 has totally had a overhaul and should content with the likes of Google, Apple, Mozilla etc

If your using multiple libraries or your overwriting the $ variable you can get it bac inside a locked scope like so:

(function($){
    $.ready(function(){
        //Do your jQuery here !
    });
})(jQuery)

You can check if jQuery is loaded by doing.

if (typeof jQuery !== 'undefined') {
  //do whatever here
}

You do not have to do this. It is best to include all your JavaScript at the end of your HTML and before </body>, jQuery being first. This is the recommended method by yahoo. You can read more at http://developer.yahoo.com/performance/rules.html. This will not slow down your page load and will not give you issues with undefined jQuery.

Denis has provided a link with a good solution. I am using it now.

JavaScript - How do I make sure a jQuery is loaded?

See the answer and explanation in the link.

the solution is:

<script type='text/javascript'>
runScript();

function runScript() {
    // Script that does something and depends on jQuery being there.
    if( window.$ ) {
        // do your action that depends on jQuery.
    } else {
        // wait 50 milliseconds and try again.
        window.setTimeout( runScript, 50 );
    }
}
</script>