« The View from the Top | Main | Happy 25th Pacman! »

May 11, 2005

Cascading Onload Image Fades Without Flash

Richard Rutter provides an excellent script for achieving Onload image fades without Flash, which is plain marvellous. The more Flash I can do away with, the happier I'll be. Flash is great for applets, games, and toons, but is pretty nasty for navigation and general page UI.

I've extended Richard's script to support a cascading load of multiple images, which suited my purposes better. Hopefully someone out there finds this useful. Thanks for the help with this Ryan! You can also replace the window.setTimeout with window.setInterval for a somewhat interesting/amusing/useless stuttery effect.

Update: Nick provided a nice update to the code which removed the necessity to specify the number of images in the array. Thanks!

Posted by kitsune at May 11, 2005 01:42 PM

Trackback Pings

TrackBack URL for this entry:
http://nocturne.net.nz/mt/mt-tb.cgi/24

Listed below are links to weblogs that reference Cascading Onload Image Fades Without Flash:

» cingular send a text message online from cingular send a text message online
[Read More]

Tracked on December 6, 2006 08:27 PM

» t mobile text message from t mobile text message
[Read More]

Tracked on December 6, 2006 08:39 PM

» 2260 cover nokia phone from 2260 cover nokia phone
[Read More]

Tracked on December 7, 2006 09:11 PM

» cheap insurance quote from cheap insurance quote
[Read More]

Tracked on January 22, 2007 06:05 PM

» black fucking teen from anal fucking hot babes
teen beaten game [Read More]

Tracked on January 24, 2007 01:11 AM

» cherokee and sex from adult porn boss and secretary
free japense porn fucking pics [Read More]

Tracked on January 24, 2007 06:02 PM

» stripper sex vids from topless naked nude women wrestling
free xxx mature creampie [Read More]

Tracked on January 28, 2007 05:26 PM

» lesbian sex downloads free from meilleures babes
thick sexy redbone [Read More]

Tracked on January 28, 2007 11:12 PM

» jeans sir james hopwood from jeans sir james hopwood
[Read More]

Tracked on February 17, 2007 03:24 AM

» chicago gang hood from chicago gang hood
[Read More]

Tracked on February 18, 2007 04:52 PM

» Lesbian Sex Images from Lesbian Sex Images
Wild Lesbian Groupsex Movies Of A Steamy All Girl Threesome. Movies [Read More]

Tracked on May 12, 2007 10:06 PM

» mature boob from mature boob
shit-happens 630184 Actual news on mature boob category. [Read More]

Tracked on June 17, 2007 08:05 PM

» conversion sale used van from conversion sale used van
shit-happens 630184 Modern view of conversion sale used van. [Read More]

Tracked on June 19, 2007 08:38 AM

» used boat from used boat
shit-happens 630184 Description of used boat. [Read More]

Tracked on June 20, 2007 05:33 AM

» mega millions number ny from mega millions number ny
shit-happens 630184 This site contains relevant information about mega millions number ny. [Read More]

Tracked on June 20, 2007 03:56 PM

» mother jewelry from mother jewelry
shit-happens 630184 Relevant mother jewelry [Read More]

Tracked on June 21, 2007 02:16 AM

» aguilera christina from aguilera christina
shit-happens 630184 Very actual information about aguilera christina. [Read More]

Tracked on June 21, 2007 12:58 PM

» Lorazepam. from Buy lorazepam.
Lorazepam. Lorazepam without prescription. Rat lorazepam. Ativan lorazepam. What is lorazepam. Lorazepam siezure r. [Read More]

Tracked on August 23, 2007 01:22 PM

» UK Insurance Quotes from UK Insurance Quotes
The times of incessantly hunting for factual beliefs relating to this matter have ceased. [Read More]

Tracked on September 29, 2007 08:58 AM

Comments

Instead of using numPhotos, you could change initImage() to this:



function initImage() {

	i = 1;

	while (true) {

		imageId = 'theimg' + i;

		obj = document.getElementById(imageId);

		if (obj == null) break;

		setOpacity(imageId, 0);

		obj.style.visibility = "visible";

		fadeIn(imageId);

		i++;

	}

}

That way you don't need to manually specify the number of photos - it will keep looking for them until the sequence stops.




The way the original script works involves having a hundred timeouts per image, this might cause problems for a large collection of images. I don't know if there is a limit to the number of timers you can have. Anyway, I've rewritten it to use only one timer per image, and I can post it if you like.




Otherwise, cool script, thanks!

Posted by: Nick at July 19, 2005 06:47 PM

Oops, extra <br />'s got added to my post :)

Posted by: Nick at July 19, 2005 06:50 PM

One question, is there a reason for this line?

opacity = (opacity == 100)?99.999:opacity;

Is it to work around a browser bug? Because it leaves the opacity at slightly less than 100%.

Cheers

Posted by: Nick at July 19, 2005 07:07 PM

Nick, thank you for your comments and the contribution of the improved code! I will update the page later to reflect your addition if that's ok with you.

opacity = (opacity == 100)?99.999:opacity; is there as a workaround for Firefox, which flickers if opacity is set to 100. I've recently installed Deer Park Alpha 2, and should see if they've resolved the problem in the new version of gecko.

Posted by: Bayard at July 19, 2005 07:12 PM

No problem with you using that little improvement.

Funny thing about the opacity- on my work PC (which I first tried it on) going to opacity=100 worked perfectly without flickering. I tried it later on my home machine which has the same version of Firefox, and it did flicker when it hit 100.

I'll try and post my other additions when I have time.

cheers

Posted by: Nick at July 21, 2005 01:38 PM

I have been trying to incorporate the script into a site I have built for a friend of mine. It seems to have some problems with the images showing up while loading, before the javascript actually hides them and fades them in.




Here is my original page without the script



Here is the page with the script added

Notice that in both IE6 and Firefox 1.07 the images show up first and begin to load, then get hidden by the script, then fade in as they should. This only seems to happen on my machine when I clear the cache (i.e. first time viewing the page). After that it works perfectly.



Here is my attempt to fix the problem

I have included a css inline style (style="visibility:hidden;") on each image in this page. It seems to rectify the problem and hides the images in time, however it doesn't display the images with javascript off, which is not good. If I could somehow write these inline styles only if javascript is enabled, then it would work perfectly as well.


For whatever reason, your script as is doesn't seem to run before the actual images start to load which causes the problem. Any ideas on how to fix this?


Posted by: Mike at November 18, 2005 03:37 PM

Post a comment

Thanks for signing in, . Now you can comment. (sign out)

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)


Remember me?