Image-preloading is a supplementary function for ensuring smooth image changeover upon mouse hovering. This technique is widely incorporated in the creation of scrolling-effects – frequently seen in navigation bar, or in cases where an image is substituted with a sequence of thumbnails as part of a slideshow.
There are countless scripts suggested for preloading the images in order to execute a smooth rollover animation, but most fail to work on the client side (i.e. the user). Some common reasons are: Windows’s Security Center has blocked the script; user’s browser does not support the language of the script; or the user has inadvertently set a tight security settings in such a way that the script is not recognized as legitimate. The end result of these events often lead to a time delay in the appearance of the new image, or in the extreme case, dysfunction of a component of the web page, causing confusion among the users.
In today’s entry, I have come up with an alternative that utilizes only HTML – a universal language guaranteed to work with all web browsers. This is how it goes:
The above line specifies a substitution of the displayed image (i.e. a substitution of svbefore.png with svafter.png when hovered). The would-be substituted image is preloaded as below:
border=”0″ />
The new and old images are “displayed” when the web page is loaded. However, the new image has been set to use a width and height of 0px so that it is not visible on the web page; in effect, the new image has been “pre-cached”, but not displayed. In the line above, I have also added the attributes “padding=’0′” and “border=’0′” as an inline precaution to prevent unexpected pushing of the parent <div> frame. Finally, I would put this line of image-preload at the end of the web page (e.g. before </body> ends) as an additional safety measure.
If you wish to make the above line W3C valid, you can employ the modification below:
alt=”Image Preload” />
Should a user have multiple images that he or she wishes to preload, one can simplify the attributes and save them as a CSS style.
width: 0px;
height: 0px;
border: 0px;
padding: 0px;
}
Followed by the respective specification in the web page:
<img src=”svafter2.png” class=”preload” alt=”Image Preload” />
Keywords: Preloading images, Pre loading, Pre-loading, Pre-caching, Pre caching, Caching Images, HTML, CSS, Javascript, rollover, scrolling effect, animation
