Preloading Images and Removing Screen Flicker While SWF Loads

There are many options to preload images in HTML pages. The simplest would be to create a div and move it off the screen.

In this div, I created a list to preload background images into (using CSS). The other images that are loaded up are header images for the other pages in the website. Once loaded they stay in the cache, thus the header images appear instantly when the user navigates to those pages.

 <div id="img_preloader">
  <ul>
   <li>button hover</li>
  </ul>
  <img src="images/contact.jpg" />
  <img src="images/fabulous.jpg" />
  <img src="images/fabulous_text.jpg" />
  <img src="images/new_me.jpg" />
  <img src="images/nutrition.jpg" />>
  <img src="images/services.jpg" />
 </div>

I used the following CSS rules:

#img_preloader
{
width:200px;
position:absolute;
left:-9999px;
top:-9999px;
}
#img_preloader ul li {
background-image:url("../images/button_hover.png");
}


Flash SWF content may show a block of white in it's place until it had finished loading. To remove the white box, I added the following parameter to the OBJECT tag:

 <param name="wmode" value="transparent">

For more information about editing HTML tags manually for SWF content, see Object Tag Syntax.

And here is a link to the Adobe support page: Create a transparent background in a SWF file

Posted in: CSS,HTML,Preloading