Robust Image Preloading - on the fly

[Roger F. Gay]

OK, so I know the basic way to preload images:

images[i] = new Image();
images[i].src = "image_file_name";

But I'm trying to automate use of images by constructing a table with images on the fly; then dumping that into a div.

No problem with the dhtml (javascript) constructing tables with img:s in them.

What I'm having a problem with is assuring that the images are actually loaded before dumping into the div. If they're not, they won't be displayed.

I've tried checking images[i].complete in a loop until they're all loaded, but that sometimes aggrevates IE into putting up a message that a process has gone on too long.

At present, this approach works (whenever images load quickly enough) in IE and Firefox, but not Opera.

Trial page:
http://isr.nu/images/rodics/

[Eric Pascarello]

You can use onload and onerror

imgObj[i].onload = imgLoaded;
imgObj[i].onerror = imgError;

I would not use images as a variable name: http://javascript.about.com/library/blclassobj.htm

Eric

[Roger F. Gay]

Thanks. I'll try that. Also; thanks for the link. Good tip; not covered in my Netscape javascript 1.5 documentation.

[Roger F. Gay]

http://www.jaws.umn.edu/javascript_1.1/evnt13.htm

For images, the onLoad event handler indicates the script to execute when an image is displayed. Do not confuse displaying an image with loading an image. You can load several images, then display them one by one in the same Image object by setting the object's src property. If you change the image displayed in this way, onLoad executes every time an image is displayed, not just when the image is loaded into memory.

[Roger F. Gay]

This is a bit hacked, but it seems to work:

http://isr.nu/images/rodics/index.htm

In Firefox and Opera, there seems to be a need to place the cursor in the address window and press enter (rather than clicking reload) to get the images to display. IE works perfectly.

It might seem counter-intuitive that I thought to use delays (timers) to solve the problem that the loads were taking too long. But I knew they could load quickly enough. Certainly 7 images don't take that long to load these days. So ... I thought the continuous loop (in my earlier version) that was checking to see whether the images were loaded was eating up all the browser's processing time ... interferring with the load. Then I took a wild guess (if memory serves) that a timer would push the timed event into the background and allow loading to continue.

[Roger F. Gay]

onload ... ok, I didn't give up. onload works ... need error handling yet

http://isr.nu/images/rodics/onload.htm


Here's a question for Firefox / Opera developers. In IE, the onload used in the body tag does not execute until the page is fully loaded. As I understand it, it's excecuted in Firefox / Opera as soon as the tag is loaded, not waiting for the rest of the page. Is that right? That could explain why behavior has been so different in Firefox / Opera. I've had to put the cursor in the address window and press return after the first attempt at loading; except on occassions where the div just happens to get loaded in time to receive the image dump.

Good tricks for handling that? ... I was just thinking I'd put a JavaScript function at the bottom of the page that sets a value in the page somewhere, that will be checked before the dump into the div begins. I haven't tried it yet. Thought I'd ask if there's any Firefox / Opera experts that have a good trick to use.
[ April 20, 2007: Message edited by: Roger F. Gay ]

[Roger F. Gay]

OK ... so I'm satisfied that I have a multi-browser image page-loader. (Still need to add error handling.)

http://isr.nu/images/rodics/

Now ... something you saw when clicking on the links, that I didn't see, was how long it took; until after rebooting. I'd been working on it and apparently, the images were somewhere lurking around in my computer's memory, so I wasn't left waiting long - staring at a blank page - while the images were being downloaded across the internet.

I've done a little preliminary searching and there are some tricks. Speed is now the major issue.
[ April 21, 2007: Message edited by: Roger F. Gay ]

[Roger F. Gay]

Another issue I will eventually have to face -- memory. I'm trying to preload all my images. It's working so far on my computer. Will all computers handle the memory management gracefully? If I allow an arbitrarily large amount of data to be preloaded (in my design), will I risk catastrophic failure? Is the onerror event sufficient to handle the problem?

[Roger F. Gay]

BTW: Does anyone think this might be complicated enough, and would be of such general interest, that it might be worth starting an Open Source project? It's actually kind-of Open Source already ... just click the link and show source. I'm starting to consider creating a product of some kind; with Java components and such. But I don't really have the time to do it all myself. A friend of mine actually suggested the need for something. That's part of the reason I've been spending extra time loading images the hard way ... I mean ... generic and nice ... and cross-brower ....

I'm not really sure though. Even if this would be of interest to people -- running an Open Source project would also take time.

Maybe I should wait until my copy of Ajax in Practice arrives. Might be something there.
[ April 21, 2007: Message edited by: Roger F. Gay ]

[Bear Bibeault]

I'm not sure what the general need for such a facility would be. Personally, in over 10 years of writing web sites and web applications, I've never felt the need to preload images. But you might try posting at forums that are heavier on client-side development to get a sense for a more general need.

Image pre-loading is not a topic covered in Ajax in Practice.

[Roger F. Gay]

What's more client side than html and javascript?

[Bear Bibeault]

Originally posted by Roger F. Gay:
What's more client side than html and javascript?

I meant forums completely devoted to client-side issues that would have a larger interested user base than there is here.

[Roger F. Gay]

I want to use the same event handler for all images in a page. I've been doing it by adding the event handler to every image object that I create. It seems like I should be able to add it to the image object prototype instead. But I haven't figured out the syntax for it ... been looking around on the web and doing trial and error for an hour now.

Can it be done?

[Roger F. Gay]

Bear;

I am slowly moving toward you in regard to preloading. In fact, if I were to start all over again from where I am now, I'd probably give this thread a different name. It's a matter of dealing with an arbitrary number of arbitrary (size) images and somewhat arbitrary page layout (well, something must be known). First thought ... create image objects (preload) and pop them in place when the layout is complete and page is loaded (other than images).

Loading the text in the page takes a very short time compared to loading a bunch of large images ... my test case. At this point, I'm up to "preloading" images AFTER the rest of the page has loaded and displaying one image at a time. (That sounds crazy when you say it; so by preloading I mean creating an image object with src named; whether the intent is to "preload" or not.) It makes life simple, and doesn't have a significant impact on the time it takes for everything to get done. On the surface (and maybe somewhat deeper, just a little) ... what I'm doing is getting closer and closer to not preloading at all.

But I still like it when the image pops onto the page.

[Bear Bibeault]

Don't get me wrong: I'm not asserting that pre-loading is never necessary or appropriate, I'm just not sure it's a highly wide-spread need.

[Roger F. Gay]

I'm not at all sure that it is necessary. I could do the same thing by creating the whole web page in text and then document.write(page). I've actually given some thought to that today.

Anyway; I'm not sure I've every found anything in programming that's absolutely necessary. In my experience, there's always more than one way.