jquery $(document).ready() queue order – Education Career Blog

I have a page index.html that extends base.html (django) and each of them has a $(document).ready defined. Now, I was expecting the one in base.html to go of first, but I was wrong, the one in index is first and the one in base.html starts after. I guess this is because index finishes loading before base, and not some default behavior of jquery, to have children execute before the parent. Can I do something to change this order? Because the parent decides (depending on window size) if the menu should be vertical or horizontal, and the child scales a div to occupy the rest of the window. Now I would like the scaling to occur after I have the menu in place.


You could theoretically change this by manipulating the jQuery.readyList array and moving things around, but you’d be poking a bit blind in there. Instead I’d recommend switching your script that needs to run after the others from document.ready to window.onload, like this:

$(window).load(function() {
  //code to run after the others

It seems you’d want this anyway, since you’re dealing with window size and scaling, and this happens after the images are loaded, so your scale would be correct, not still changing.

Leave a Comment