How can I put in javascript to preload the images when all the images are mentioned in my CSS file?
Is there a way to do it in CSS?Properly designed web site does not require preloading of images.Originally posted by Vladdy
Properly designed web site does not require preloading of images.
And this is because..........Originally posted by Mr Herer
And this is because.......... Because when you only have one image for each state of the rollover no preloading is required. Check out Fast Rollovers Without Preload (<!-- m --><a class="postlink" href="http://wellstyled.com/css-nopreload-rollovers.html">http://wellstyled.com/css-nopreload-rollovers.html</a><!-- m -->) for a good tutorial.Yes I'm well aware of that technique, I was merely attempting to entice Vladdy into helping, as well as not pleasing A_O.well, and forgive me for being rude, my site is "properly designed" as per your link. That, however does not ensure quick loading.
Maybe I asked the wrong question. I have designed a site that uses CSS for rollover effects. After properly designing it, when visited by friends, the hover pic doesn't load right away, but instead disappears for a couple seconds until it loads. this problem is then eliminated once the visitor hovers over the link the first time.
Would preloading images quicken the loading times so this doesn't happen? If so, how can I do it in CSS? Thanks for any helpful assistance.Read fredmv's link; use one image to show three.Originally posted by fredmv
...Check out Fast Rollovers Without Preload (<!-- m --><a class="postlink" href="http://wellstyled.com/css-nopreload-rollovers.html">http://wellstyled.com/css-nopreload-rollovers.html</a><!-- m -->) for a good tutorial.
Neat stuff.
Bah, I'm afraid that info doesn't make sense to me.
I have one picture that serves as my "a" and another as my "a:hover" - i don't understand how i can use only one picture will work. Or how background shifts work.Originally posted by A_O
Bah, I'm afraid that info doesn't make sense to me.
I have one picture that serves as my "a" and another as my "a:hover" - i don't understand how i can use only one picture will work. Or how background shifts work.
The concept is that you have a container (div, li, p, whatever) of fixed dimensions...
+----------+
| |
+----------+
...that you want to display one of 2 (or more) different backgrounds...
+----------+ +----------+
+ XXXXXXXX | or | YYYYYYYY |
+----------+ +----------+
...so you create 1 image file with both background images...
XXXXXXXX YYYYYYYY
...then use CSS background position parameters to choose which part of the image shows...
+----------+
| XXXXXXXX | YYYYYYYY
+----------+
...or...
+----------+
XXXXXXXX | YYYYYYYY |
+----------+
Is there a way to do it in CSS?Properly designed web site does not require preloading of images.Originally posted by Vladdy
Properly designed web site does not require preloading of images.
And this is because..........Originally posted by Mr Herer
And this is because.......... Because when you only have one image for each state of the rollover no preloading is required. Check out Fast Rollovers Without Preload (<!-- m --><a class="postlink" href="http://wellstyled.com/css-nopreload-rollovers.html">http://wellstyled.com/css-nopreload-rollovers.html</a><!-- m -->) for a good tutorial.Yes I'm well aware of that technique, I was merely attempting to entice Vladdy into helping, as well as not pleasing A_O.well, and forgive me for being rude, my site is "properly designed" as per your link. That, however does not ensure quick loading.
Maybe I asked the wrong question. I have designed a site that uses CSS for rollover effects. After properly designing it, when visited by friends, the hover pic doesn't load right away, but instead disappears for a couple seconds until it loads. this problem is then eliminated once the visitor hovers over the link the first time.
Would preloading images quicken the loading times so this doesn't happen? If so, how can I do it in CSS? Thanks for any helpful assistance.Read fredmv's link; use one image to show three.Originally posted by fredmv
...Check out Fast Rollovers Without Preload (<!-- m --><a class="postlink" href="http://wellstyled.com/css-nopreload-rollovers.html">http://wellstyled.com/css-nopreload-rollovers.html</a><!-- m -->) for a good tutorial.
Neat stuff.
Bah, I'm afraid that info doesn't make sense to me.I have one picture that serves as my "a" and another as my "a:hover" - i don't understand how i can use only one picture will work. Or how background shifts work.Originally posted by A_O
Bah, I'm afraid that info doesn't make sense to me.
I have one picture that serves as my "a" and another as my "a:hover" - i don't understand how i can use only one picture will work. Or how background shifts work.
The concept is that you have a container (div, li, p, whatever) of fixed dimensions...
+----------+
| |
+----------+
...that you want to display one of 2 (or more) different backgrounds...
+----------+ +----------+
+ XXXXXXXX | or | YYYYYYYY |
+----------+ +----------+
...so you create 1 image file with both background images...
XXXXXXXX YYYYYYYY
...then use CSS background position parameters to choose which part of the image shows...
+----------+
| XXXXXXXX | YYYYYYYY
+----------+
...or...
+----------+
XXXXXXXX | YYYYYYYY |
+----------+