[Potato313]

Hi, i just want to know what is the purpose of using javascript to preload image? Because i saw many people have that script in their code. And what is the different between using javascript to swap image and simply using rollover in dreamwaver? Thank you very much!

[cam]

Preloading an image in javascript can be useful if you're using one image several times on a page, as if it doesn't load you'd be left with a lot of horrible red-X's (or whatever). Preloading solves this problem by ensuring the image is loaded.

Not being a Dreamweaver user I can't be certain, but there's every chance it actually uses JS for it's rollovers, just hides it from you under a nice interface. Then again, it may use CSS (I do believe it's been converted to feature CSS extensively in newer versions) which would make them quicker to load & accessible to more people (not all people have JS enabled).

[Potato313]

Ic ic...thank you. CSS seems to be a new trend for making website nowadays. I saw many sites which were created soley with CSS and they look great. I am not a code person therefore i do find CSS alittle intimdating and hard to visualize. But i guess i can always mix and match.

[cam]

It's not so much a "trend" .. more the way to make websites.

I know what you mean about it being daunting, but we've all been there before and to be honest it's actually quite easy to pick up once you know the basics! Check around this forum and you'll find plenty of links to sites that you can learn from

[Bill Posters]

Originally Posted by i_am_cam

Preloading an image in javascript can be useful if you're using one image several times on a page, as if it doesn't load you'd be left with a lot of horrible red-X's (or whatever). Preloading solves this problem by ensuring the image is loaded.

Fwiw…
'Being left with a lot of horrible red Xs' means that the image(s) cannot be found at the src location used in the <img> tag(s) and preloading them won't fix that.

[evanc]

Preloading is for, say, an image slideshow. This way, when you go from image to image, there is no 'lag' when the browser has to load each image seperately. It loads B while viewing A and C while viewing B.

[stickmus]

Originally Posted by Potato313

Hi, i just want to know what is the purpose of using javascript to preload image? Because i saw many people have that script in their code. And what is the different between using javascript to swap image and simply using rollover in dreamwaver?

Dreamweaver uses javascript for it's rollovers. It also uses a javascript preloader.

The preloaders main function in this case is to try to load the rollover images before the user rolls over them, otherwise there's a big pause while the browser locates and loads the image.

Hope that makes sense...

[cam]

Originally Posted by Bill Posters

Fwiw…
'Being left with a lot of horrible red Xs' means that the image(s) cannot be found at the src location used in the <img> tag(s) and preloading them won't fix that.

Hm.

I've had the problem before where the file wouldn't be loaded even though the image file was in the src location. Refreshing would load the image (even after emptying the cache), and JS preloading did indeed solve the problem. It's something to do with the length of time taken to load all the elements on the page (slow server) I do believe..

[Bill Posters]

In that instance, preloading would constitute a bug workaround for an iffy browser (presumably MSIE) rather than standard procedure. I had assumed you were giving it as general advice.

Of course, without seeing the original, problematic page, it's impossible to say for sure that the problem didn't originate from some small detail in the markup.

[cam]

Twas indeed with MSIE, spit.