View Full Version : image preloading issue

06-09-2012, 03:41 PM
I can't seem to find a way to preload images in Chrome? In other words, I want the images to already be loaded from the start, so then when you go to hover over a div which changes its background image on hover, the new bg image is shown instantly with no delay. With IE and Firefox I just use the visibility hidden property, but this method is not working for Chrome. I've tried several different methods now and nothing has worked for me. What is best way to preload images, that works in IE + Firefox + Chrome?

06-09-2012, 08:57 PM
You should use CSS Image sprites. Here is explained how http://www.w3schools.com/css/css_image_sprites.asp

06-09-2012, 10:49 PM
Hi, could this technique also work with image maps (with irregular shapes)? If so how?

06-10-2012, 11:39 AM
Sorry I don't quite understand what do you mean by that :confused: Can you explain more in detail?

06-10-2012, 01:17 PM
For example, I have a image that I assigned an image map to, so that the only clickable area in that image is in the shape of a circle (because I don't want the corners of the image to be clickable). And image maps can't be placed as background images. The image sprite technique only seem to apply to bg images right?

06-10-2012, 03:24 PM
Image maps must have an actual image in <img> tags. But you can use some trick to use Image sprites anyway. Here is how:
src attribute of <img> tags can not be empty so we put 1px by 1px transperant picture as image source. Than we add background image for <img> tags in CSS. Each <img> tag has unique ID. For this background images we can use image sprites. Below you have a working example how it is being done.

I hope this is what you meant.

<style type="text/css">
#t1 {
width: 60px;
height: 60px;
background: url("http://shrani.si/f/2R/j6/1st5EmWN/button3.png") 0 0;

#t2 {
width: 60px;
height: 60px;
background: url("http://shrani.si/f/2R/j6/1st5EmWN/button3.png") -60px 0;

#t3 {
width: 60px;
height: 60px;
background: url("http://shrani.si/f/2R/j6/1st5EmWN/button3.png") -120px 0;

<img id="t1" src="http://www.w3schools.com/css/img_trans.gif" usemap="#map1"></img><br />

<img id="t2" src="http://www.w3schools.com/css/img_trans.gif" usemap="#map1"></img><br />

<img id="t3" src="http://www.w3schools.com/css/img_trans.gif" usemap="#map1"></img>

<map name="map1">
<area shape="circle" coords="30,30,20" alt="t1" href="#" />