When using the jQuery .hover() function to switch out two images, I often find a flicker when they are being switched on the first load. I assume this is because the second of the two isn’t loaded along with the main page, and so the transition isn’t completely smooth and there’s a slight flicker.
In theory, this should be then rectifiable by placing a 1px by 1px image with display: none; set as styling, which will load the image when the main page loads, thus cacheing it at the same time and removing the flicker.
However, I’m wondering if there’s any other/better solutions that are commonly used to force an image to load, as surely I’m not the only one who has this issue.
Any comments or advice would be greatly appreciated :).
A far better way to prevent hover image flickering is to use CSS sprites.
Even if you decide to use JavaScript to achieve the hovering effect (although hover effect is perfectly achievable with plain CSS ) you will still have your “second” (hovered) image loaded by the time it needs to be displayed.