Log in

View Full Version : css images preloading


w2mt
04-14-2007, 06:07 PM
i'm making a site lots of images and animations and it doesnt run smoothly at all with slower connection so i was wondering maybe i can make the all the images pre-load before the site is displayed. but how can i make that in css?:confused:
or would javascript be better idea?
also i am planning to make a flash into to the site so my idea is to make the site images preload while intro page is displaying intro video. how can i make such thing happen?
all help's appreciated:)
and thanks in advance:)
andersmoen
04-14-2007, 06:10 PM
I think you need to use JavaScript for this. I don't know how though.
w2mt
04-14-2007, 06:14 PM
thanks, but what what if javascript is not availabe in browser? i want it to work regardless
andersmoen
04-14-2007, 06:19 PM
Well..you could write

<noscript>Please enable JavaScript</noscript>
w2mt
04-14-2007, 06:34 PM
ok but where would i need to write that code?
although since the site is made in css, i'd like this to be in css too so im a bit iffy about javascript lol...
also if find a way to do this, do i have to specify each image that should preload separately? cos i got so many of them
Ryan Fait
04-14-2007, 09:54 PM
You really don't have to worry about JavaScript being disabled unless your site is specifically for less computer illiterate people. Anyway, you could do this with CSS by doing something like:


.image1 {
position: absolute;
left: -5000px;
background: url(image1.jpg);
}

<div class="image1"></div>
mburt
04-14-2007, 09:58 PM
This type of preloading is pointless: it will only further slow down download time for the client. The CSS cache is different from the "img" tag cache. If you change the background on an img tag, it will change when you refresh the page, but if you use this type of CSS to preload the image, it will only load what was saved in the cache, thus having to load three images (or more) for one.
Unless you have a faster way of loading images, preloading itself is pointless, the image has to be loaded one way or another.
Ryan Fait
04-14-2007, 10:00 PM
Yeah, I agree to an extent. It's nice to have smooth rollovers, however. You can use the background switch method a lot of times, which is nice.

http://www.newguyinennis.com/samples/css_hover/
mburt
04-14-2007, 11:07 PM
If it wasn't for Internet Explorer, the pseudo class hover would be very efficient. The fact that you have to use JavaScript for image hovers is kind of band, considering some people disable JavaScript. CSS is always better, if you can do it.
Ryan Fait
04-15-2007, 12:11 AM
Yeah. That example does work in IE, though. As long as you use the hover pseudo selector on an anchor it'll always work. There are some nice htc's that will allow the :hover element to be used on things other than anchors if JavaScript is enabled. It's cleaner than a straight up JavaScript file anyway.
w2mt
04-15-2007, 07:37 AM
^^explain please. im not a pro lol
thanks everyone, btw rollovers is the main reason i wanna do it:)
w2mt
04-15-2007, 07:39 AM
and how can i make the site not dislpay before all images area loaded?
also do i have to specify all images one by one?
jscheuer1
04-15-2007, 09:20 AM
You can preload as many images as you like:


<style type="text/css">
.preload {
position:absolute;
top:-5000px;
visibility:hidden;
}
.preload img {
position:absolute;
top:0;
left:0;
}
<body>
<div class="preload">
<img src="image1.png"><img src="image2.jpg">
</div>

But, just as with javascript preloading, it isn't all that useful unless it is for small rollover images or other small images. Additionally, it will not work out well in legacy browsers.

The thing with preloading of any sort is, it still takes just as long to load the images. Preloading just gives them a head start.
Twey
04-15-2007, 09:59 AM
You really don't have to worry about JavaScript being disabled unless your site is specifically for less computer illiterate people.Wrong. You should aim for the greatest possible accessibility in your sites, which means always providing non-JS fallback. Sure, maybe only 3% of people have Javascript disabled, but when you consider all the millions of people who browse the Web, that's still a significant number. It doesn't matter in this case, of course, because the effect for which Javascript would be used isn't vital to the working of the site.
Ryan Fait
04-15-2007, 10:17 PM
I agree entirely, and I only use and code unobtrusive JavaScript that gracefully degrades, but for the use of a preloader... who cares?!
w2mt
04-16-2007, 05:35 AM
thanks guys u helped so much
i will try it out:)
Victor
05-09-2007, 05:28 AM
You might want to try this
http://www.dynamicdrive.com/dynamicindex4/preloadimage.htm
Good Luck !