Speed Up MouseOver/Out Image Changes Using Pre-loaded Images

Speed Up MouseOver/Out Image Changes Using Pre-loaded Images

The fastest way to do mouseover/mouseout image changes for hyperlinks would be the following:


You can see that when your mouse goes over and off of the hyperlink, it changes the source image of the image tag with the name “imgHotLink”. So what is the source pointing to:


“hotlinkOn” and “hotlinkOff” are the names of preloaded images that you can set up to go into memory at the start of your client-side page. This is how you pre-load your images:


Put this tag between the ending HEAD tag and the beginning BODY tag. Then, the images will load at the start of the client-side document. As soon as the “client” sees the page, the images will be completely available in client-side memory.

Warning: You can use animated GIFs, but different browsers respond to client-side pre-loaded animated GIFs differently. I recommend not using animated GIFs, but if you must, use non-terminating animated GIFs (i.e., ones that iterate through the animation more than once).

See also  How IoT Tech Will Transform Logistics

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist