Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts

    image preloading issue

    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?
    Last edited by resin; 06-09-2012 at 02:50 PM.

  • #2
    New Coder
    Join Date
    Mar 2012
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You should use CSS Image sprites. Here is explained how http://www.w3schools.com/css/css_image_sprites.asp

  • #3
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hi, could this technique also work with image maps (with irregular shapes)? If so how?

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry I don't quite understand what do you mean by that Can you explain more in detail?

  • #5
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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?

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <html>
    <head>
    <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;
    }
    </style>
    </head>
    <body>
    
    <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="#" />
    </map>
    
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •