This is an interesting technique for preloading graphics. Resources: One here. This guy originated it, but it’s pulled down now.
-
#preloadedImages {
-
width: 0px;
-
height: 0px;
-
display: inline;
-
background-image: url(path/to/image1.gif);
-
background-image: url(path/to/image2.gif);
-
background-image: url(path/to/image3.gif);
-
background-image: url(path/to/image4.gif);
-
background-image: url();
-
}
This is much easier than using JS to do it. I need to experiment with it more.
Great solution, I assume I just put an empty div at the end of my page…
Yup.
this doesnt work with firefox 2, but it does with safari
Neither does work under Firefox 3.
Only loads the last declared ‘background-image’
Nice idea, though
Hmm, Ill have to work on a different technique.
im guessing it doesnt work cos css2* doesnt support multiple background images.
my solution was to create a div (i think i set it’s display:none) on the page with preloaded images with width=1 height =1 (height/width=0) seems to not load the image on some browsers.
from what i remember, it was compatible with firefox 2/3, safari 3, ie6/7
http://www.songbirdestate.com.au
I encountered a situation that I need to preload not only images but including swf file that will be used in other pages of our company site, so I ended up using iframe to do it, If someone have a better solution for this please help.
Here what I done:
in my css here’s my code
.preload {
position: absolute;
top: -9999px;
left: -9999px;
height: 20px;
width: 20px;
display:inline;
overflow: hidden;
}
then at the bottom of my page before the closing body tag i insert the iframe in the div with a class preload and insert there the iframe that loads the html document consisting of all images and flash file that I need to preload and will be used in other pages of my site, here how I do it.
<iframe src=
Continuation:
<iframe src=
see the actual page http://www.teamquest-inc.com.ph
it works fine in all browser i tested