[RESOLVED] Image preload full cache

I’m quite familiar with the standard technique for preloading images to be used in JavaScript effects, i.e.:

[CODE]var preloads = new Array();
preloads[0] = new Image();
preloads[0].src = ‘filename1.jpg’;
preloads[1] = new Image();
preloads[1].src = ‘filename2.jpg’;[/CODE]

However, this technique only initiates the HTTP requests for those images. The script execution continues as soon as the request is made. Is it at [I]all[/I] possible to ensure that script execution pauses until the images are fully downloaded? In other words, how do I make sure the complete images are present in the browser cache before the next script commands are run?

The practical application for this: I’m working on a script that dynamically builds its own interface, and it relies on appending the images into the actual document during the window.load script and capturing their offsetWidths. The images are immediately visible when the window.load script finishes, rather than waiting for any further user input to display them.

Both IE and Firefox are having trouble capturing the offsetWidths and displaying the images initially on the first page load, but every subsequent page load when the images are fully downloaded works fine.

Also in #JavaScript _↴