Load JavaScript after page is fully rendered

Question

I've added JavaScript code to my Drupal 7 theme, but it fail to run as it's expected because css are not properly applied when my function is fired.
So I've tried a minimal implementation to check what's happening.

 jQuery(document).ready(function($) {
 alert("Start"); 
 }

alert() is fired before the page is fully loaded (i.e. all titles are missing). How can I prevent this?

• avpaderno: This question does not seem related to Drupal.
• amateur barista: It is related to Drupal. It's a Drupal site, JQuery is part of Drupal core since 6.x, and this is about Drupal behaviors.
• Pierre Buyle: The question is clearly related to Drupal and the Drupal way to handle the "page is loaded" event is not the usual jQuery way (see amateur barista's answer). Please, move it back to Drupal Answer.

Answer 1

In order execute a script after everything has fully loaded you want:

$(window).load(function(){
 alert('hello');
});

jQuery.ready() executes as soon as the DOM is ready, which is usually before external resources have loaded.

• amateur barista: The "Drupal way" of doing this is using Drupal behaviors, this example is a bad practice. Please read the behaviors section in drupal.org/node/756722.
• pasine: I'm using Drupal behaviors (that's why I submitted this question on Drupal Stack Exchange), but actually my problem was effectively related to the missing window load.
• Pierre Buyle: Don't 1) use $ without wrapping it in an outer context, 2) use jQuery(window).load(...) but Drupal.behaviors. See links in amateur barista's answer.
• Andy: @mongolito404 could you explain what you mean by 1? Is it to do with avoiding namespace collisions?
• Pierre Buyle: Yes, it is to avoid namespace collisions. In Drupal 7, jQuery is initialized in compatibility mode so $ is not the jQuery object, see drupal.org/update/modules/6/7#javascript_compatibility. All of this is documented at drupal.org/node/756722.

Answer 2

Read about the Drupal 7 JavaScript API here. You want to give attention to the behaviors section. Behaviors do the same thing you are trying to make in your example, however, when a Drupal page loads, one of the first things it does is instantiate the Drupal object. This object gets extended by every module with behaviors and attributes. When you use Drupal behaviors instead of the standard JQuery on document ready you have accessible in your JavaScript function all the properties and methods defined by other modules.

These tutorials (1, 2) are for Drupal 6, but they give you a good explanation and idea of what Drupal behaviors are.

• Pierre Buyle: The OP asked for a way to run JavaScript once external resources (here CSS) are loaded. Behaviors does not help here. Since the OP also use jQuery(document).ready as example of non-working code, this answer is still relevant.