Robust Image Preloads - on the fly

[RogerFGay]

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

images = new Image();
images.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.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.

 

[BillyRayPreachersSon]

You'll need to attach an "onload" event to each image, which keeps track of which images have loaded. The simplest way is to incrememnt a global variable every time one has loaded, and check if it's equal to the number of images you expect. If it is, do your stuff... Something like:

var imageCount = 0;
var numExpectedImages = 17;

// ... start "i" loop...
{
   images[i] = new Image();
   images[i].src = "image_file_name";
   images[i].onload = function() {
      imageCount++;
      if (imageCount == numExpectedImages) {
         // Run some code here
      }
   }
}
// ... end "i" loop...

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[RogerFGay]

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.

 

[RogerFGay]

hmmmmm ... I'd figured out another way to do it after reading what's posted above, but posting it got me thinking again. Why not dump into the div and then check to see if the images are displayed? If not, dump again .....

might work

 

[RogerFGay]

That display and display again trick works, but is much slower.

 

[BillyRayPreachersSon]

Until you can prove otherwise, I'd take that link with a pinch of salt. Try the code I gave you - does it do what it says on the tin?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[RogerFGay]

By golly, it works.

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

Nice way to do it. I saw a similar attempt at setting up event handlers that seemed a lot more complicated. Of course, I suppose I should set up an additional event handler in case of error. Maybe by the time I'm done, it will be just as complicated.

 

[BillyRayPreachersSon]

It just goes to show you can't believe everything you read online. Especially conserveapaedia even my answers ;-)

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[RogerFGay]

Thanks for giving me that extra push. onload really is a nice way to handle it. I now face the next issue. IE executes onloads in the body tag after it has loaded the html ... i.e. whole page. Calling a function using a body tag onload event assures that the div I'm dumping to exists before I write to it. Firefox / Opera (if I'm not mistaken) jump to the onload event as soon as the body tag is loaded. This, I believe, is why I often have to place the cursor in the address window and press return to get the images to appear in Firefox / Windows (unless I'm lucky). Any good tricks to assure that the html is all loaded in Firefox / Opera before writing to it?

 

[trollacious]

If you put your JS in the page between the </body> and </html> tags, does that perform the way you want?

Lee

 

[RogerFGay]

I don't know. I was going to try something like that ... only thought being to put it late in the page. I'll report back later after I've had a chance to experiment ... will try what you suggest. In the mean time, I was hoping someone with good Firefox / Opera experience might have a tip. I only get to do this stuff in spare moments, so if I can get tips to help me head in the right direction it's a big plus.

 

[BillyRayPreachersSon]

Try using "window.onload = someFunc;" in the script section to see if that makes any difference.

AFAIK, a body onload event happens after the content has loaded... so it's weird if Fx / Opera do things differently...

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[RogerFGay]

OK, thanks. I'll try window.onload in a sec, and report back if I get good results. In the meantime, I got something working. Opera still acts up when I try to reload, but I'm at the point where I'm starting to think that's Opera's fault.

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

 

[RogerFGay]

My gosh, using windows.onload seems to work.

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

I'll check back a few times to make sure ... change some things. But I think I'll add that to what works above. It won't hurt to use window.onload instead of onload in the body tag. Since it seems to be a solution in itself, I have to conclude that it's better.

 

[monksnake]

window.onload is the exact same thing as <body onload>, it's just being called with script instead of within an event handler.


<select id="thisBox" [!]onclick="doThis()">

same as

document.getElementById("thisBox").onclick = doThis;



<.

 

[monksnake]

disregard the [!]

<.

 

[RogerFGay]

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.

 

[RogerFGay]

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?

 

[johnwm]

Suspect that the real problem is not a JS problem at all! A quick look at properties for your images shows that you are using uncompressed pics averaging around 300K each. On an ADSL connection each pic will take around 8 secs to load. 7 pics means around a minute to load, or probably 20 mins on a dialup connection.

You could compress your images to around 70k without much loss of quality (4 x increase inspeed) and/or look at using clickable/mouseover thumbnails either in a new window or AJAXed

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[RogerFGay]

That's one of the tricks I want to learn about. First pass reading: JPEG is a compressed file format.

I won't always be able to control the size of the images; that's the thing here. If I were just building a web page, I probably wouldn't bother with the fancy techniques I'm trying to figure out.

This image display image, will display a set of images. That's it. Right now, that's about all I get to specify. So, using these large images gives me a sense of what can happen. It forced me to display one image at a time rather than waiting for all to load. Compression? Is there a way to further compress JPEGs?