Fake An Ajax Loading Sequence - use a background GIF to do it

I wrote a Tutorial about a Faux Ajax Loading technique and planted it over on the Trap17 sister site. Actually, most of the information can be gleaned from the direct link. Tutorial: http://www.trap17.com/forums/faux-ajax-loa...nly-t52030.html Thought the Astahost crew needed to see it, too. Enjoy.

Comment/Reply (w/o sign-up)

Interesting technique congrats, but i just view it with Internet Explorer 6 and only the first time works as you say because the background image is cached by the browser.

Best regards,

Comment/Reply (w/o sign-up)

thats a nice technique, never wouldve thought of anything like that, lol

and although it sed it would take a long time, i still hardly got to see the loading picture cos it only took like a second to load.

Comment/Reply (w/o sign-up)

It's an interesting technique, but, thinking from both a server side and client side perspective, I'm not sure it's a very useful one that would ever see high usage. It might, because I haven't looked at the comparative sizes of the javascript used for AJAX versus the gif image size, but since javascript is plain text, I imagine it would be smaller. Here's my short, quick (and possibly incorrect) analysis:

Server Side:
So, the animated gif needs to be stored on the server, this takes up extra space. Although it is not much extra space, imagine having several different versions of these images, or a complex image, both of which can more or less be done via css tricks and javascript tricks and AJAX without requiring the overhead of the image storage on the server. And since you need a specially sized image for each image the gif is going to serve as a loading screen for, instead of being able to dynamically perform the function with javascript, the overhead will begin to increase. Unless you make every image the same size. Also, bandwidth issues, the extra image must be sent which takes more bandwidth. Note that both of these issues rely on the assumed fact that the image is larger than the javascript file. Even if it isn't, there is always the possibility that the javascript file is being sent anyway, so it already has header information sent and a request made for it, whereas the image would need another one.

Client Side:
Same bandwidth issue as the server, possibly the same space issue if someone permanently caches everything, but then, it is their own fault. However, the extra load time for the gif, if it is a larger than the comparable javascript, load time goes up, which means the larger image takes even longer to load. A page with several of these images with the background loading gif of different sizes would be a large increase in bandwidth and load time over one dynamic file of javascript.

Just some things to consider. I'm not saying this is bad, in fact, I am quite impressed by it. I'm just saying it may not be a very beneficial replacement for AJAX loading screens. However, its simplicity in setup and design does mean more people will be able to use it easily.

~Viz

 

 

 

Comment/Reply (w/o sign-up)

Good points, viskywalker, but many folks don't like javascript or don't understand it, or are scared of it, can't use it, disable it, or have it disabled by others beyond their control but can use Html/CSS.

And it isn't simply the javascript file size versus the css and image size which comes into play. Javascript and css get loaded at different times in different sequences which affect page loading, too.
Loading a js file will have a more severe impact on the site loading times, according to everything I have read, whereas the css to run this script is minimal, as is a correctly built background image, which can be a single Image for several Large images per page or site.

I only hack at graphics, but I am sure a photoshop whiz could get an image for this effect down to a minimal file size.

Anyway, hope someone can use the effect, or that it inspires someone to take it beyond where I have it.

Comment/Reply (w/o sign-up)

I'm sure it will. It is interesting what you can do with css. Although, I actually just had a thought which renders part of my argument moot. I forgot that you can resize images using css, so you won't need several images to handle images of different sizes. And your point about people who disable javascript is a valid one. Although, I wonder how many people would prefer not to have a loading screen at all. It is an interesting technique, and I may try using it on my site, or extending it somehow.

~Viz

Comment/Reply (w/o sign-up)