Pre Load Images

I want to preload some images with my page and after searching in google I found this code but it doesn't seem to work. Cany anyone tell me what is wrong?<script language="JavaScript"> <!-- Image1= new Image() Image1.src = "Slice3_over.gif" Image2 = new Image() Image2.src = "Slice4_over.gif" Image3 = new Image() Image3.src = "Slice5_over.gif" Image3 = new Image() Image3.src = "Slice6_over.gif" --> </script>

I use XHTML and CSS code for preloading some images that are used in layout of my page.

 

This is HTML code for one image:

 

<div class="hiddenPic"><img src="images/layout/over.jpg" alt="hidden"/></div>

 

Whereas images/layout/over.jpg is path to yours image file, div class="hiddenPic" defines DIV class.

 

And CSS code is this:

 

.hiddenPic {display:none;}

 

This CSS rules defines that div class HIDDEN is not displayed on the screen, only is preloaded.

 

I guess Javascript isn't too good choice in your case, cause some, but this is very few people have Javascript disabled, thats why I must do my Pop-Up image in XHTML/CSS way.

 

Best regards, Robert.

i think the XHTML/CSS solution is too theoric. i mean, it would work with most of your visitors, but not all of them. because MANY people uses old browsers, which doesn't support whether XHTML or CSS.and, sometimes, those browsers aren't too old. check it out on Firefox. it won't work; i tried something similar to it some time ago: i put SEO information about a page in the begging of it (so Google gives it more value), but it looked awful in the layout, so i tried to hide that info with a CSS code like rvovk's, and it didn't work with Firefox (it did with IE5).

Check it out on my site, here, and you will see that it works. I tried it IE6 and Firefox.

i think the XHTML/CSS solution is too theoric. i mean, it would work with most of your visitors, but not all of them. because MANY people uses old browsers, which doesn't support whether XHTML or CSS.

and, sometimes, those browsers aren't too old. check it out on Firefox. it won't work; i tried something similar to it some time ago: i put SEO information about a page in the begging of it (so Google gives it more value), but it looked awful in the layout, so i tried to hide that info with a CSS code like rvovk's, and it didn't work with Firefox (it did with IE5).

62338[/snapback]

<img src="blah.jpg" width="1px" height="1px" />

Stick this on the homepage (or whatever, the page before the one you want the preloading done on). This will load the image, but will only display 1px of it (which you can't see). Do this for every image, and in theory it'll act as a preload because it will load the image first.

 

Its a quick fix, but it works for me....

 

- Vacant.

hmm... i forgot wat i used to preload images. i think it was a javascript but i really can't remember. anyway, if u ask me i really wouldn't use a preload script. it's alright for dial-up users but nowadays everyone is on broadband. having loading scripts only slows broadband in the end, really not worth implementing them anymore.in the end it's ur choice, i just think they're a waste of time.

it's alright for dial-up users but nowadays everyone is on broadband.

in the end it's ur choice, i just think they're a waste of time.

65885[/snapback]

Everyone, in fact, is NOT on broadband. Places like Japan may be on 12 mb connections but over here in the UK we've only just discovered broadband... and most people don't have it here. You need to think about every user to your site.

 

However, I think that in most cases the preload is not essential anyway...

With Javascript i preload images with:if (document.images){ folderopen= new Image(16,16); folderopen.src="buttons/node_open.png"; folderclose= new Image(16,16); folderclose.src="buttons/node_close.png"; textimage = new Image(16,16); textimage.src="buttons/text.png"; arrowopen = new Image(16,16); arrowclose = new Image(16,16); arrowopen.src="buttons/arrow_open.png"; arrowclose.src="buttons/arrow_close.png";}Then for example if you want to change the image of an element into your Javascript code you write simply:foldericon=arrowclose.src

Mizako, I wouldn't say that's quite so simple. The others that posted before you are much less code. I like rvovk's way the best, and it seems to work on his site for me, and I'm using Firefox (who isn't?). It doesn't work as well on IE (I only have it because my family uses it ), but my IE has been screwed up for a long time. It doesn't work with custom javascripts anymore, and the css is screwed up a lot of time, and installing SP2 with the new version of IE didn't help at all.

Mizako, I wouldn't say that's quite so simple.  The others that posted before you are much less code. 

70773[/snapback]

To preoload just an image takes 5 lines of code. Two images 7. Not that much :-)

I want to preload some images with my page and after searching in google I found this code but it doesn't seem to work. Cany anyone tell me what is wrong?

 

<script language="JavaScript">

<!--

Image1= new Image()

Image1.src = "Slice3_over.gif"

Image2 = new Image()

Image2.src = "Slice4_over.gif"

Image3 = new Image()

Image3.src = "Slice5_over.gif"

Image3 = new Image()

Image3.src = "Slice6_over.gif"

-->

</script>

62252[/snapback]

Well, first of all, you have <!-- and --> placed and that'll make it null for this script. You are also missing the ; at the end of each line. So make your adjustments as follows:

 

<script language="JavaScript">

 

Image1= new Image();

Image1.src = "Slice3_over.gif";

Image2 = new Image();

Image2.src = "Slice4_over.gif";

Image3 = new Image();

Image3.src = "Slice5_over.gif";

Image3 = new Image();

Image3.src = "Slice6_over.gif";

 

</script>

 

I have actually used this script in the past. As my list of graphics that I wanted to preload in order to amplify the web surfing experience, I changed all my graphics name to 1.gif, 2.gif, etc. And I simply added i=="0", Image(i)... i++.

 

Honestly, I'm not even sure if it's working right since I moved all that scrip into seperate .js file and just call from the body section.

 

Good luck.

 

P.S. If it does not make any sense of what I wrote...it's probably due to lack of sleep. I'll come back to this if you need me to.

Can someone please explain to me why one would acctualy use PRE LOADING IMAGES...What is the whole idea??Is it possible that it would pre load some images which are on lets say music.html and i am currently on the index.html page?? This would be nice because the other page would load when someone is looking the index page and then don't have to wait for the next one to load cos' it would have already beed loaded...Thx for any help...GREETZ

heavensounds

 

I do not believe one needs to have preload images. One's browser accesses images, for this discussion sake, when the browser calls for and when the viewer clicks on the link (does this make sense?). But here is a thought:

 

What if one's page contains a tree menu made up with graphics as a background or such? And within that tree menu there are submenus that also require graphics as a background...etc? When a viewer expands a particular menu tree, it will take a short time to load graphics it needed to show it as one programmed. But in the mean time, the viewer would see that "ugly" X picture until that graphic is fully loaded. So, the conclusion is that it just makes the viewing page a little enjoyable (as I tried to say on my previous post).

 

However, if one's hosting service has limited bandwidth one might face a problem. By preloading images one is using up bandwidth that perhaps might not have needed by the viewer. And thus, the browser downloads that entire graphics to the viewer?s cache and never gets the chance to be "used."

 

I have a tree menu style that mimics window's help menu (with closed and open folders, little dotted lines to connect them) and each graphics are 1k. Now it may not be much but, 1kB x 26 categories x 3 graphics per category = 78kB. I have an average unique visitor of 58 a day so that's 78kB x 58 = 4,524kB (4.5MB). That's 31.668MB a week, 126.672MB a month (4 weeks)... it adds up.

 

So, decide how you want to present your web page and use it discretionally.

 

Good luck.