Can you choose what document to target in a $(document).ready() call?

Question

Is it possible to choose what page to target in a $(document).ready(); function?

So something like

$('page1.html').ready();

Thanks in advance!

Answer 1

These are the different types of Document Ready functions typically used in jQuery (aka jQuery DOM Ready). A lot of developers seem to use them without really knowing why. So I will try to explain why you might choose one version over another. Think of the document ready function as a self-executing function which fires after the page elements have loaded.

See Where to Declare Your jQuery Functions for more information on how to use the Document Ready Functions.

Document Ready Example 1

$(document).ready(function() {
    //do jQuery stuff when DOM is ready
});

Document Ready Example 2

$(function(){ 
    //jQuery code here 
});

This is equivalent to example 1… they literally mean the same thing.

Document Ready Example 3

jQuery(document).ready(function($) {
    //do jQuery stuff when DOM is ready
});

Adding the jQuery can help prevent conflicts with other JS frameworks.

Why do conflicts happen? Conflicts typically happen because many JavaScript Libraries/Frameworks use the same shortcut name which is the dollar symbol $. Then if they have the same named functions the browser gets confused!

How do we prevent conflicts? Well, to prevent conflicts i recommend aliasing the jQuery namespace (ie by using example 3 above). Then when you call $.noConflict() to avoid namespace difficulties (as the $ shortcut is no longer available) we are forcing it to wrtie jQuery each time it is required.

jQuery.noConflict(); // Reverts '$' variable back to other JS libraries
jQuery(document).ready( function(){ 
         //do jQuery stuff when DOM is ready with no conflicts
   });  

//or the self executing function way
 jQuery.noConflict();
 (function($) { 
    // code using $ as alias to jQuery
})(jQuery);

Document Ready Example 4

(function($) { 
    // code using $ as alias to jQuery
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);
// other code using $ as an alias to the other library

This way you can embed a function inside a function that both use the $ as a jQuery alias.

Document Ready Example 5

$(window).load(function(){  
    //initialize after images are loaded  
});

Sometimes you want to manipulate pictures and with $(document).ready() you won’t be able to do that if the visitor doesn’t have the image already loaded. In which case you need to initialize the jQuery alignment function when the image finishes loading.

You could also use plain JavaScript and append a function call the the body tag in the html, use this only if your not using a JS framework.

Read more: http://api.jquery.com/ready/

Answer 2

Only the document has a ready() function (a function to execute when the DOM is fully loaded). That said, you may be able to do something like the following:

$(document).ready(function() {
    if ( document.location.pathname === '/page1.html' ) {
        // Some action
    }
});

Answer 3

you could do something like this.

// same as $(document).ready() |$(document).on('ready) etc.
$(function(){
    function loader(){
       var $element = $('Your Pointer to element');
       //If the number of elements matching the pointer is greater than 0
        if($element.length > 0) { 
           //its loaded
     }
     else {
         //since it isn't loaded , repeat in 250ms to see if it is
         setTimeout(function(){ loader(); }, 250); 
     }
 }

This is one way to do it. Its not a perfect solution since you never really want setTimeouts in a script, however since i don't know what the rest of your code is doing it would be the best suggestion i can make.