Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 302
  • Last Modified:

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!
0
brettsky07
Asked:
brettsky07
  • 5
  • 5
1 Solution
 
leakim971PluritechnicianCommented:
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


0
 
brettsky07Author Commented:
That takes the rollover functionality out of the side navigation... I have also tried "stacking" with zindex and changing but no luck.
0
 
leakim971PluritechnicianCommented:
If you want we can set the background with javascript
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
brettsky07Author Commented:
i tried a few javascript already but sure if you have another suggestion.
0
 
leakim971PluritechnicianCommented:
<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
0
 
Eddie ShipmanAll-around developerCommented:
You can set the display to none and then using a document.ready function set them to visible.
0
 
brettsky07Author Commented:
The images in the navigation dont appear at all when I use that code..
0
 
brettsky07Author Commented:
EddieShipman: hmm ok. i havent tried that yet!
0
 
leakim971PluritechnicianCommented:
>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

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

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now