Part of loading an html page I’m working on (with JQuery) involves instantiating several javascript objects, each which adds an image to the page. The object constructor waits for the image to load using $(window).load() gets their dimensions, and scales based on cookie values.
Once the page is loaded (again, using $(window).load()), the main page hides most of the images using .hide(); they’ll reappear later.
The problem I’m having is that the main page hides the images before the JS objects can get their dimensions. I need the main page to wait for all of the objects to finish the image manipulation before it hides the images.
Don’t add the images to the page and hide them after they’re loaded.
Load them, measure their sizes (see jQuery: how to get the dimensions of a external image?, jQuery callback on image load (even when the image is cached)) and add them to the DOM once they’re needed.