Friday, March 13

jQuery( document ).ready() vs jQuery.holdReady() vs body.onload

jQuery.holdReady():
    The jQuery.holdReady() method allows the caller to delay jQuery's ready event. This advanced feature would typically be used by dynamic script loaders that want to load additional JavaScript such as jQuery plugins before allowing the ready event to occur, even though the DOM may be ready. This method must be called early in the document, such as in the <head> immediately after the jQuery script tag. Calling this method after the ready event has already fired will have no effect.
   
    Example:
        Delay the ready event until a custom plugin has loaded.
   
        <script>
        jQuery.holdReady( true );
       
        jQuery.getScript( "myplugin.js", function() {
            jQuery.holdReady( false );
        });
        </script>

       
jQuery( document ).ready():
    A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.
   
    Example:
        <script>
        // A $( document ).ready() block.
        $( document ).ready(function() {
            console.log( "ready!" );
        });
        </script>


body.onload:
    The onload attribute fires when an object has been loaded.
    onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). However, it can be used on other elements as well.

    The onload attribute can be used to check the visitor's browser type and browser version, and load   the proper version of the web page based on the information.
    The onload attribute can also be used to deal with cookies.
   
    Example:
        <!DOCTYPE html>
        <html>
        <head>
        <script>
        function myFunction() {
            alert("Page is loaded");
        }
        </script>
        </head>
       
        <body onload="myFunction()">
        <h1>Hello World!</h1>
        </body>
       
        </html>

No comments:

Post a Comment