I could experiment to figure this out, but maybe the work has been done so I''m going to ask. Using Ajax, if I wanted to preload several (20) small (<1K) images, behind the scenes... would I... 1 - Queue the loading of the images with Ajax one at a time, asynchronously, and ignore the completion results. Would this result in the image being in the browser''s cache even if the Ajax returned result was not attached to the DOM? 2 - Queue the loading of an HTML page that refers to all of the images Must the Ajax page loaded content be attached to the DOM for the images to be loaded, or can I forget about that and assume the images will load? Sam _______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
For both methods, my untested assumption is that you have to attach some element(s) to the DOM which actually triggers the browser to load the images from the server, or use the javascript Image() object to do the same. The XHR object is only getting XML/text... not the binary data. On 6/12/06, Sam <sam.google-Uc2IQQBAS6sAvxtiuMwx3w@public.gmane.org> wrote:> > I could experiment to figure this out, but maybe the work has been done > so I''m going to ask. > > Using Ajax, if I wanted to preload several (20) small (<1K) images, behind > the scenes... would I... > > 1 - Queue the loading of the images with Ajax one at a time, > asynchronously, and ignore the completion results. Would this result in the > image being in the browser''s cache even if the Ajax returned result was not > attached to the DOM? > > 2 - Queue the loading of an HTML page that refers to all of the images Must the > Ajax page loaded content be attached to the DOM for the images to be loaded, > or can I forget about that and assume the images will load? > > Sam > > _______________________________________________ > Rails-spinoffs mailing list > Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org > http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs > > >_______________________________________________ Rails-spinoffs mailing list Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
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
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: rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org [mailto:rails-spinoffs-bounces-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org]On Behalf Of Eric Anderson Sent: Monday, June 12, 2006 8:02 PM To: rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org 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 Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs