In one of My Layout there are some large images (come from XML) which shown when I mouse hover on some some of the link, but when the Page loads and when i rollover It takes time to Load that Image.
Note: there are fix 5 images (not dynamic)
I dont want to use JavaScript to Preload Images any Solutions?
I am Not Using Hover menu or something like that, but this Images are Product Images and the links are Text link Got my Point??
-
Reference your images in invisible img tags. while page loading they will downloaded too.
-
Can't you add them as an
<img />tag to your page and hide them using css? -
You could use a hidden div to put images in. Like so
<html> <body> <div style="width:1px; height:1px; visibility:hidden; overflow:hidden"> <img src="img1.jpg" /><img src="img2.jpg" /> </div> <div>Some html</div> </body> </html>This only works for images though, ie. if you're trying to do the same for say .swf files there will be problems. Firefox doesn't run the .swf file if it's not visible.
Darryl Hein : Would you also not need display:none since visibility will still take up space? But I also believe that some browsers don't load hidden images till they are shown.Wazdesign : This is really Good Solution , we can also Use position absolute and ; height:0 in CSS, Isnt it?Svish : If it isn't loaded when hidden, maybe it would help have some "visible" span/div of height 0 with style="background:url(imgx.jpg)"? Just an idea... don't know if it helps or works :p -
There is no need to preload images. I can't understand why 99% people thinks, that hover effects have to use 2 images. There is no such need, and using 2 images makes it look bad. The only good solution I know is to use CSS for A elements (or easy JS for all other buttons). When button us hovered set background-position to some offset.
a { display:block; width:160px; height:26px; background:url(b_tagsdesc.png); } a:hover { background-position:0 26px }That's all, image used you can see below:
Edit: You can also use it other way. Instead of toggling image, you can hide your image. So starting point would be "background-position:0 -100px" and on hover "0 0".
Kriem : I can't stress this out enough. This is the (only) way to go.Wazdesign : Thanks.. for the Explaination -
As I'm not sure if hidden images are loaded, you'll probably want to use image sprites. Then the entire image is loaded before anything is displayed. You can even put all of your menu items in one image and therefore save a lot of HTTP requests.
-
From http://snipplr.com/view/2122/css-image-preloader
A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: Whenever the images are referenced throughout your pages they will now be loaded from cache.
#preloadedImages { width: 0px; height: 0px; display: inline; background-image: url(path/to/image1.png); background-image: url(path/to/image2.png); background-image: url(path/to/image3.png); background-image: url(path/to/image4.png); background-image: url(); }Wazdesign : Thanks a Lot AZIZ. This is really Good solution for the Preload. Still Hoping for more solutions. Then close the Answer,
0 comments:
Post a Comment