JavaScript loading after full page processing

Question

I added JavaScript code to my Drupal 7 theme, but it cannot work as expected, because css is not applied properly when my function is running.
So I tried a minimal implementation to check what was going on.

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

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

Answer 1

To execute the script after everything is fully loaded, you want:

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

jQuery.ready () is executed as soon as the DOM is ready, which is usually before loading external resources.

Answer 2

Read about JavaScript Javascript Drupal 7 here . You want to pay attention to the behavior section. The behavior does the same thing you are trying to do in your example, however, when the Drupal page loads, one of the first things it does is an instance of the Drupal object. This object is expanded by each module with behavior and attributes . When you use the Drupal behavior instead of the standard jQuery in the finished document, you have all the properties and methods defined by other modules available in your JavaScript function.

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