Link to home
Start Free TrialLog in
Avatar of brettsky07
brettsky07Flag for Canada

asked on

Preloading Background Images

Hi experts. I have created a site with a css navigation similar to: http://css-tricks.com/video-screencasts/82-css-image-switcher/ But my images are larger and when the page is loaded it flickers through them all before landing on the right one.

Is there a good cross browser compatible way to avoid this? I have tried some hidden div css solutions but nothing seems to be working. Example of the issue I'm referring to: http://tinyurl.com/3jpyqx5

Any suggestions would be great. Thanks!
Avatar of leakim971
leakim971
Flag of Guadeloupe image
Put this in the head section :

<style type="text/css">
#home_one, #home_two, #home_three, #home_four, #home_five, #home_six {
    display:none;
}
</style>

Open in new window


Avatar of brettsky07
brettsky07
Flag of Canada image

ASKER

That takes the rollover functionality out of the side navigation... I have also tried "stacking" with zindex and changing but no luck.
Avatar of leakim971
leakim971
Flag of Guadeloupe image
If you want we can set the background with javascript
Avatar of brettsky07
brettsky07
Flag of Canada image

ASKER

i tried a few javascript already but sure if you have another suggestion.
Avatar of leakim971
leakim971
Flag of Guadeloupe image
<script>
window.onload = function() {
   document.getElementById("home_one").style.background = "../images/recycling.jpg";
   document.getElementById("home_two").style.background = "../images/automotive.jpg";
   document.getElementById("home_three").style.background = "../images/vacuum.jpg";
   document.getElementById("home_four").style.background = "../images/industrial_cleaning.jpg";
   document.getElementById("home_five").style.background = "../images/emergency.jpg";
   document.getElementById("home_six").style.background = "../images/environmental.jpg)";
}
</script>

you need to remove all the background in the css file for the six link, we let the background for the main one
Avatar of Eddie Shipman
Eddie Shipman
Flag of United States of America image
You can set the display to none and then using a document.ready function set them to visible.
Avatar of brettsky07
brettsky07
Flag of Canada image

ASKER

The images in the navigation dont appear at all when I use that code..
Avatar of brettsky07
brettsky07
Flag of Canada image

ASKER

EddieShipman: hmm ok. i havent tried that yet!
Avatar of leakim971
leakim971
Flag of Guadeloupe image
>The images in the navigation dont appear at all when I use that code..

I miss the URL keyword :
window.onload = function() {
   document.getElementById("home_one").style.background = "url(http://www.envirotec.ca/beta2/images/recycling.jpg)";
   document.getElementById("home_two").style.background = "url(http://www.envirotec.ca/beta2/images/automotive.jpg)";
   document.getElementById("home_three").style.background = "url(http://www.envirotec.ca/beta2/images/vacuum.jpg)";
   document.getElementById("home_four").style.background = "url(http://www.envirotec.ca/beta2/images/industrial_cleaning.jpg)";
   document.getElementById("home_five").style.background = "url(http://www.envirotec.ca/beta2/images/emergency.jpg)";
   document.getElementById("home_six").style.background = "url(http://www.envirotec.ca/beta2/images/environmental.jpg)";
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of brettsky07
brettsky07
Flag of Canada image

ASKER

That seems to be working! I'll work on implementing it and let you know if I have any issues. THanks!