JQuery - running a function before document.ready ... but not too early

Question

I have a page that contains a div that needs to be modified using JS when the page loads. To do this, I give it a "default width" of 760px and then run the following code:

function resizeList() { var wlwidth,iwidth,nwidth; wlwidth = document.body.clientWidth - 200 - 60; iwidth = 320; nwidth = Math.floor(wlwidth / iwidth) * iwidth; $('#list').css('width',nwidth); } $(document).ready(function(){ // if we're looking at a list, do the resize-thing, now and on window resize if (window.location.pathname.toString().split('/')[1] == "list") { resizeList(); window.onresize = resizeList; } }); 

However, the page may take some time, as the div #list contains many images. That way, the div only expands to fill in the correct width after all the content has finished loading. I can’t just pull it out of the $(document).ready function, because otherwise it mistakenly says that document.body is undefined.

Is there a way to resize a div #list before all its contents have loaded?

Edit
See: http://www.google.com/images?q=whatever
They have achieved what I am trying to do successfully. The list is correctly sorted directly when the page loads, and then it is filled. You can say that they change everything through JS, resizing the window and watching how the elements move smoothly. Unfortunately, Google JS is not the easiest in the world to read a sigh

Answer 1

It fires as soon as possible, $(document).ready is the event that occurs when dom finishes rendering.

You must add a boot screen and load it when you resize.