PDA

Click to See Complete Forum and Search --> : Preloading Images

klbjornme
12-01-2003, 06:45 PM
I am trying to preload images using the following on the main page:

<style type="text/css">
preload {display:none;}
</style>

and at the bottom of the page I have put:

<img src="dad1.jpg" alt="Adoptadad" title="Adoptadad" height="610"

width="365" class="preload">
<img src="deer1.jpg" alt="Deer Watson" title="Deer Watson" height="

504" width="302" class="preload">
<img src="jack1.jpg" alt="Jack" title="Jack" height="498" width="

354" class="preload">

I was led to believe that this would preload the images into the cache, but not display them, and they are being displayed. What have I done wrong??

KL
Vladdy
12-01-2003, 06:50 PM
forgot the dot before selector
klbjornme
12-01-2003, 07:09 PM
Vladdy,

Sorry :confused: ...I am so exceptionally new to this...can you clarify your answer?

KL
(Who once lived in Amherst, NH) :D
pyro
12-01-2003, 08:04 PM
<style type="text/css">
.preload { /*dot specifies a class*/
display:none;
}
</style>
jochem
12-04-2003, 09:50 AM
So, is this the proper way to preload images with CSS? Should anything else be added?<head>
<style type="text/css">.preload {display:none;}</style>
</head>

<body>
<img src="01.gif" class="preload"/>
<img src="02.gif" class="preload"/>
<img src="03.gif" class="preload"/>
</body>If this code is correct, I guess that means that the image will be called upon again later on the page, for instance for an image swap. But then of course without the class.

Cheers, Jochem :cool:
DaveSW
12-04-2003, 09:57 AM
That is correct.

The only errors in there do not relate to the preload code. ;)
jochem
12-04-2003, 09:59 AM
Please tell me, what are the errors?

Cheers, Jochem :cool:
klbjornme
12-04-2003, 10:28 AM
Originally posted by jochem
If this code is correct, I guess that means that the image will be called upon again later on the page, for instance for an image swap. But then of course without the class.

Well it seems to work now....but it is on the first page of my site, and then when I call for the pictures on subsequent pages, it is supposed to be already loaded in the temp file on their computer, so the subsequent pages won't take forever to load. At least that is the way that I understand it. :)

KL
jochem
12-04-2003, 10:51 AM
Have a look at this thread: http://forums.webdeveloper.com/showthread.php?s=&threadid=21898

The discussion there has been going on for a while, and is about just the same subject.

Cheers, Jochem :cool:
DaveSW
12-04-2003, 02:47 PM
Originally posted by jochem


<head>
<style type="text/css">.preload {display:none;}</style>
</head>

<body>
<img src="01.gif" class="preload"/>
<img src="02.gif" class="preload"/>
<img src="03.gif" class="preload"/>
</body>

Ok here goes.

1) Missing Doctype. You may have left this off deliberately to post it in the forum, but it is important. See http://www.webdevfaqs.com/html.php#doctype
Also http://www.webdevfaqs.com/html.php#validate for a charset.

2) Missing <html> start and end tags - not essential but it's a good idea to put them in, since you've put the rest of the optional tags in.

3) Missing title attribute.
<title>Title of page</title>
This one actually is required.

4) You've used xhtml style img tags, but:
- There should be a space before the /> in order for it to depreciate well in older browsers if you are using xhtml.
- No alt attribute in the image tag. Even if it has display:none; any screen reader will spend ages reading the image urls out. So even if it's just putting alt="" in, it still helps.

5) I think the body element cannot directly contain an inline element. Basically, there should be a block level element in there first, e.g. a div around the whole lot.

Hope this is helpful - much of it is being accessibility friendly and pedantic, but it does help to have good code. Your page will probably work fine in IE, but IE is very forgiving. Older browsers and good browsers may not be.

Have you got a copy of moz? www.mozilla.org - it's far more standards compliant than IE, and is useful to see what your code will really do.

Cheers

Dave
jochem
12-04-2003, 04:14 PM
Thank you Dave for your reply. I was very aware of the elements I left out of the code. I posted just the bit needed for this forum. However, what is new to me is that the closing / in the img tag should have a space before it. Also new to me is that an (even empty) alt will speed up the site.

I'll add it to my own code that I'm working on in the HTML thread "image swap without JavaScript" that I linked to above.

Cheers, Jochem :cool:
jochem
12-04-2003, 09:05 PM
OK, here's the full script that passed the W3C validator successfully:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>CSS preloader</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">#void .preload {display:none;}</style>
</head>

<body>
<div id="void">
<img src="image1.gif" alt="" class="preload" />
<img src="image2.gif" alt="" class="preload" />
<img src="image3.gif" alt="" class="preload" />
</div>
</body>

</html>I am just not sure if #void .preload {display:none;} is correct CSS. Is it?

Cheers, Jochem :cool:
DaveSW
12-05-2003, 10:37 AM
It is perfectly correct css - it means only those .preloads nested in a #void will disappear.
So if you intend using .preload anywhere else, you should just refer to it without the #void in front.
jochem
12-05-2003, 11:49 AM
I guess that settles this thread. I hope klbjornme will be sattisfied, since he started it.

Cheers, Jochem :cool:
klbjornme
12-05-2003, 11:54 AM
Yes I am more than happy....I got it to do what I wanted to do.

Although, I am a she, not a he ;)

KL
jochem
12-05-2003, 12:06 PM
Ahh!!!! And that makes ME happy. Just to know that this forum is not an all male thing. ;)
klbjornme
12-05-2003, 12:30 PM
Oh yes we females are here....there are probably more out there than you think....possibly lurking ;)

KL
klbjornme
12-05-2003, 04:27 PM
Out of curiosities sake. Could I use the same code to preload .wav files?

I want to preload it with the pictures and call it later on a subsequent page.

KL
jochem
12-05-2003, 04:33 PM
That would be interesting but I doubt it. Streaming audio might be an option, but I have no experience on that. You might find some threads about that in this forum. Otherwise, just search the net.

Good luck, Jochem :cool: