Quantcast

Web Design: Three Great Ways to Preload Images

Get the WebProNews Newsletter:
[ Business]

If you want to preload images to your website, there are actually a few options available.

The following is a brief list of what you can try:

The Ol’ Tried and True Method – Preload using JavaScript. In two lines, you’re able to preload images into the memory of the browsers. Once the image is in the memory of the browser, it will provide an almost immediate display. This is the old traditional way to preload images for a rollover effect.

There will be two lines of JavaScript required for every image that you want to preload into the browser, naming the image that you’ll want preloaded.

This method generally works very well when using programs such as Fireworks, which is used for automatically forming and creating rollovers. The problem is that if the browser does not have JavaScript, or it is not turned on, it will not work. Though all browsers out right now will support JavaScript, there is still a surprising 10 percent of the people who use the net who have turned off their JavaScript enabling for increased security and virus protection.

CSS – CSS can be used to hide images that you wish to preload. Since browsers load pages from the top down, anything at the top of the page must appear before the bottom of the page will be displayed. Therefore, to have a fast loading, you simply need to your rollover images to occur at the top of the page. Then simply hide the images by using a hidden div. This technique loads the image into the memory of the browsers.

Place images in a hidden frame – what is a hidden frame? Simply a window that is set at 0 percent. As frames are undesirable, this option isn’t really viable anymore. However, the same can be done with CSS and iframe, if you for some reason don’t want to use a hidden div.

Tag:

Add to Del.icio.us | Digg | Yahoo! My Web | Furl

Bookmark WebProNews:

Mark is the director and face behind FifteenDegrees-North http://www.15dn.com , where you will find articles and resources to help with SEO, marketing and Web design.

Web Design: Three Great Ways to Preload Images
Comments Off
Top Rated White Papers and Resources

Comments are closed.