Sam,

We just came across a similar problem where in IE sends requests for the same 
image when appended through DOM.

To overcome this we incorporated image preloading.

It turns out that simple image object won't do the trick...the image request 
will keep getting aborted if you append the image using DOM before the previous 
one downloaded.

I can't send you the code, but I can send you the reference from which we 
generated our code.

Here you go - Image Preloading class with callbacks - onload, onabort, onerror, 
oncomplete.

Hope this helps!

Thanks,
Mandy.

-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] Behalf Of Eric
Anderson
Sent: Monday, June 12, 2006 8:02 PM
To: [email protected]
Subject: [Rails-spinoffs] Re: Ajax - preloading images


Sam wrote:
> Using Ajax, if I wanted to preload several (20) small (<1K) images, 
> behind the scenes... would I...

Why not just use the Image object that is built into all browsers. I 
guess to say wouldn't it just be easy to use the image preloading 
techniques used for years?

If you don't have a simple list of image files but instead have a HTML 
fragment that contains the images you are looking for take a look at the 
script here:

http://afaik.us/element_rotate/element_rotate.js

Towards the bottom I extend the "String.prototype" object so that you 
can preload any images that are located in a HTML string fragment. So:'

htmlFragment = "<b>Here is a <img src="fragment.gif" /> html fragment</b>";
htmlFragment.preloadImgs();

Feel free to rip out these utility functions for your own purposes. Also 
if you have lots of small images you may want to look into loading only 
one image which contains all your images. This technique is used often 
by complex widgets such as WYSIWYG editors. See:

http://tinymce.moxiecode.com/tinymce/docs/option_button_tile_map.html

which talks about that option for the TinyMCE editor. Obviously see the 
source code for that project for implementation details. This technique 
can greatly increase the load time because you are greatly reducing the 
number of HTTP requests. It also gives good feedback to the user because 
all the images load at once instead of having to watch them load one-by-one.

Eric

_______________________________________________
Rails-spinoffs mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
_______________________________________________
Rails-spinoffs mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Reply via email to