Member Avatar for shanthu

hi,
I am developing a site which contains 2 menus which contain hover images,and change buttons, background images etc and so i decided to pre-load all images. What i did is given below:

<img src="images/green-over/about_green_hover.png" alt="" title="" class="preload_hover" />
<img src="images/green-over/branches_green_hover.png" alt="" title="" class="preload_hover" />
<img src="images/green-over/contact_green_hover.png" alt="" title="" class="preload_hover" />
<img src="images/green-over/home_green_hover.png" alt="" title="" class="preload_hover" />
<img src="images/green-over/gold_green_hover.png" alt="" title="" class="preload_hover" />
<img src="images/green-over/diamond_green_hover.png" alt="" title="" class="preload_hover" />
<img src="images/green-over/pearls_green_hover.png" alt="" title="" class="preload_hover" />
<img src="images/green-over/watches_green_hover.png" alt="" title="" class="preload_hover" />
<img src="images/green-over/stones_green_hover.png" alt="" title="" class="preload_hover" />

and in css i just gave display as none. This works fine in firefox 3,opera 9, chrome,safari 4 and flock...But when i checked it in IE 6 it just did not work ..There was a delay while the hover-image was downloaded..how do i solve this without using scripts..

  • 3 Contributors
  • 2 Replies
  • 84 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by essential

Dani AI

Generated

This thread shows the classic cross‑browser preload pitfall: hiding inline images with CSS can appear to work in modern browsers but behave inconsistently in older Internet Explorer (as observed). For a CSS‑only fix, keep the preload elements in the render tree so the browser actually requests them — do not remove them from layout. Two reliable, minimal approaches are visibility:hidden or off‑screen positioning.

A simple off‑screen example (place near the top of the body so downloads start early):

<div class="preload">
  <img src="images/hover-1.png" alt="">
  <img src="images/hover-2.png" alt="">
</div>

.preload {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  visibility: hidden;
}

A better long‑term solution is to use CSS sprites: combine normal and hover states into a single image and change background-position on :hover. That eliminates per‑image preloads and reduces HTTP requests.

If these still fail, verify paths and caching, clear IE cache during testing, and try a tiny standalone test page to isolate the problem. As suggested, posting the full HTML/CSS helps diagnose layout rules that might stop downloads. If a script becomes acceptable, is correct that a small JavaScript preloader using new Image() is the most consistent option for very old IE versions.

Recommended Answers

All 2 Replies

Member Avatar for sreein1986

send me the full html and css code for thread. here its not showing even in dreamweaver also

Member Avatar for essential

This will be alot more easier to solve, if you can provide the script that generates your preload function.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.