Question

I have a page which contains a div which must be resized via JS when a page loads. In order to do that 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 can take a while to load as the #list div contains a lot of images. Thus, the div is only expanded to fill the correct width after all of the content has finished loading. I can’t just take it out of the $(document).ready function as otherwise it errors out saying document.body is undefined.

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

Edit
Please see: http://www.google.com/images?q=whatever
They’ve achieved what I’m trying to do successfully. The list is correctly sized immediately on page load, and is then populated. You can tell they size everything via JS by resizing the window and watching the elements move smoothly. Sadly, google’s JS isn’t the easiest in the world to read sigh

Answer 1

It is running as soon as it can, $(document).ready is the event that occurs when the dom is completed rendering.

You should add a loading screen onload and then possibly fade it out when after you re-size.