Preloader Not Working

[wolfcry044]

I am using a preloader on the site I'm building, and it works fine on my own server, but it does not work at all on my churches server (the server the site is going to be on). I have been trying to figure it out all day long, but I can't. I uploaded the same exact site to my server and it works perfectly. They also, work fine in Firefox on both sites but on the columbiaheights.org one they don't work properly in IE.

The links to the sites are as follows:

1. The one that does not work:
http://columbiaheights.org/columbiaheightsnew/index.php

2. The one that works:
http://www.uafclan.com/columbiaheightsnew/index.php

I have the following code in my files for the preloader:

This code is in the index.php file (index.php is the only page I have so far):

<style type="text/css">
.hiddenPic {display:none;}
</style>



And here is the code I have in my header.php file which is an include:

<!-- Display the hidden preload images to cache so page loads in a zap -->

<!-- Buttons -->
<img src="http://www.uafclan.com/wolfcry/columbiaheights/hoveredcategory.png"
alt="preloadimage" title="preloadimage"
height="21" width="103" class="hiddenPic">


<img src="http://www.uafclan.com/wolfcry/columbiaheights/firststate.png"
alt="preloadimage" title="preloadimage"
height="21" width="103" class="hiddenPic">


<img src="http://www.uafclan.com/wolfcry/columbiaheights/hoveredbutton.png"
alt="preloadimage" title="preloadimage"
height="21" width="103" class="hiddenPic">


<img src="http://www.uafclan.com/wolfcry/columbiaheights/topbuttonfirststate.png"
alt="preloadimage" title="preloadimage"
height="21" width="103" class="hiddenPic">


<img src="http://www.uafclan.com/wolfcry/columbiaheights/topbuttonhover.png"
alt="preloadimage" title="preloadimage"
height="21" width="103" class="hiddenPic">




<!-- Website Images -->

<img src="http://www.columbiaheights.org/columbiaheightsnew/main/assets/banner.png"
alt="preloadimage" title="preloadimage"
height="71" width="876" class="hiddenPic">

<img src="http://www.columbiaheights.org/columbiaheightsnew/main/assets/buttonbackground.png"
alt="preloadimage" title="preloadimage"
height="71" width="876" class="hiddenPic">

<img src="http://www.columbiaheights.org/columbiaheightsnew/main/assets/picturebackground.png"
alt="preloadimage" title="preloadimage"
height="71" width="876" class="hiddenPic">

<img src="http://www.columbiaheights.org/columbiaheightsnew/main/assets/underpicturebar.png"
alt="preloadimage" title="preloadimage"
height="71" width="876" class="hiddenPic">

<!-- END Preloader Images -->

[koyama]

Hi wolfcry044,

Try to switch off styles on each of the two sites and you'll see the error. The 'preloaded' images are not displayed on that first site. Check the src-attributes in the preloaded images.

[wolfcry044]

I'm sorry, I'm not understanding what you said. I've read it a few times, and it's escaping me. The two sites were identical when I tried it out, the only difference between them was they were on different servers. I've changed some things since I put the second one up, but what I've done shouldnt affect the outcome of this problem.

What is causing the one to work and the other not to? The only thing I could think of, is that my server *The uafclan.com one* has something turned on that the other one does not have.

[koyama]

For example you have this tag on the columbiaheights.org site

<img src="http://www.uafclan.com/wolfcry/columbiaheights/hoveredcategory.png"
alt="preloadimage" title="preloadimage"
height="21" width="103" class="hiddenPic">
When I point my browser to this

http://www.uafclan.com/wolfcry/columbiaheights/hoveredcategory.png

I don't get to see an image (which is not good).

On the uafclan.com site you have this tag:

<img src="http://www.uafclan.com/columbiaheightsnew/main/assets/hoveredcategory.png"
alt="preloadimage" title="preloadimage"
height="21" width="103" class="hiddenPic">

When I point my browser to this

http://www.uafclan.com/columbiaheightsnew/main/assets/hoveredcategory.png

I get to see the image (that is good).

[wolfcry044]

oh, oops. I was trying to remotely host the images and forgot to put them back. I did that after I had made this post by accident.
I fixed it, and that did not solve the problem though.

[wolfcry044]

I just took the whole header file from columbiaheights.org, replaced all the columbiaheights.org links with uafclan.com links, and then replaced the uafclan.com header file with the other one, and the uafclan.com images are still preloading correctly. So the problem can't be in the header.php file.

[wolfcry044]

I know this is a triple post, but no one has answered in a while. Does anyone know if some sort of server settings could be stopping the buttons from successfully preloading? Because the same exact site is working on my uafclan.com server, but is not working on the columbiaheights server.

[Arbitrator]

I don’t believe that browsers are required to load hidden content until it’s rendered, so you shouldn’t rely entirely on this technique if readability is an issue. One such browser is Opera 9.

You should assign a background color to the menus for readability; that way, if the images need to load on demand (or don’t load at all) users will still be able to read the text. Of course, the images will be substituted for the color, once they load, so there’s no need for accessibility to hurt your design.