How to handle PNG image loading time in html, css

Question

When I have a <a> tag set for a specific background of an image, for example:

 HTML: <a href="..." title="click here">Click Here</a> CSS: a { background: transparent url(button.png); } 

and I want the background to change whenever the user hovers over, for example:

 CSS: a { background: transparent url(button_HOVER.png); } 

The background image of the guidance flickers (it takes 1-2 seconds until it is fully loaded) when the user hovers over the link.

I could save the file as a GIF and reduce its size and load time, but it would harm my specific image tremendously (it is large and very graphic).

That's why I was looking for the best solution, for example, relying on the ability of browsers to cache images. Therefore, I would apply a style to such a button:

 CSS: a { background: transparent url(button_HOVER.png); background: transparent url(button.png); } 

So the button_HOVER image is cached first. Apparently, this affected the “flicker”, but not completely. I was thinking of creating a hidden tag with a HOVER image, so maybe the result will be different.

What do you think is the best way to solve this problem? (I emphasize that I want to save the file as PNG, it weighs 6-7 thousand.). Is my method effective?

Answer 1

Your solution would be to put both images (hover and active) in the same image file. Located one above the other. Also known as Image Sprites. The browser will download the entire image file. When freezing, you simply change the position of the background.

Assuming the active image is at the top and the hover image is located directly below it. Your css code will look something like this:

 a.link { width:70px; height:24px; background: url(image.png) top no-repeat; } a.link:hover { background-position: bottom; } 

Pay attention to the background position. Here I use the top and bottom. You can specify exactly in pixels. The entire image in this example will have a width of 70 pixels and a height of 48 pixels. Some sites put all of their small icons in one image. Loads everything except requests. :)

In this case, there is no need for preload scripts.

Answer 2

The main options available are using the html element hidden from the viewer, or using javascript.

The html approach is probably the easiest:

 <div id="preloadedImageContainer"> <img src="img/to/preload_1.png" /> <img src="img/to/preload_2.png" /> </div> with the css: #preloadedImageContainer {position: absolute; top: -1000px; left: -1000px; } 

or using javascript:

 (function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement('img'); cacheImage.src = arguments[i]; cache.push(cacheImage); } } })(jQuery) 

The jQuery approach has been completely taken off this page: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript .

Although a better approach is likely to be, as Lyon offers , css image help.

Answer 3

You should search for "preload images" on this topic . You will find ways to preload images using css and JavaScript.
I believe that if you put a hidden image with a source equal to src from the png images that you will use in css files, this will force the images to load when the page loads, and CSS will just switch the preloaded images.