Forum Moderators: open
Usually pre-loaders (javascript or otherwise) help but more for cases where you have a rollover button and want to make sure the rollover image loads at the same time as everything else on your page. Even with that, text comes before images.
so i would like to let the pictures go first, because the text isn't readable when the images are loading anyway.
Why is the text not readable? If you've provided dimensions for your images and done your CSS properly, then the text should load immediately into it's final rendering places on the page and then the images fill in their spots.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="nl">
<head>
<title>Example</title>
<meta name="title" content="example" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="contact" content="info@example.com" />
<meta name="url" content="http://www.example.com/" />
<meta name="keywords" content="Example" />
<meta name="description" content="example" />
<meta name="robots" content="index, follow" />
<link href="/image2/example css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainheader"><!--[if lt IE 8]></div><div id="internet-explorer"><![endif]-->
<div id="header">
<div><div class="example"><center>
<img src="/image2/example.jpg" alt="" /></center></div>
<img src="/image2/foto-home.jpg" alt="example" title="" />
</div>
<div>
<div class="navlink"><img src="/image2/homev.jpg" alt="" /></div>
<div class="navlink"><a class="menukaart" href="/menukaart.html" ><img src="/image2/menukaart.jpg" alt="" /></a></div>
<div class="navlink"><a class="arrangementen" href="/arrangementen.html"><img src="/image2/arrangementen.jpg" alt="" /></a>
</div>
<div class="navlink"><a class="routebeschrijving" href="/routebeschrijving.html"><img src="/image2/routebeschrijving.jpg" alt="" /></a>
</div>
<div class="navlink"><a class="omgeving" href="/omgeving.html"><img src="/image2/omgeving.jpg" alt="" /></a></div>
<div class="navlink"><a class="contact" href="/contact.html"><img src="/image2/contact.jpg" alt="" /></a></div>
<img src="/image2/space.jpg" alt="" />
</div>
</div>
</div>
<!-- Header ends, main frame begins -->
<div class="papier">
<table cellspacing="0" cellpadding="0" border="0" >
<tr>
<td><img src="/image2/papiertje-linksboven.jpg" alt="" /></td>
<td class="papier-boven" ></td>
<td><img src="/image2/papiertje-rechtsboven.jpg" alt="" /></td>
</tr>
<tr>
<td class="papier-left"></td>
<td class="tekst">
example<br />
example".<br />
example<br />
example<p />
example,<br />
example<br />
</td>
<td class="papier-right"></td>
</tr>
<tr>
<td><img src="/image2/papiertje-linksonder.jpg" alt="" /></td>
<td class="papier-onder"></td>
<td><img src="/image2/papiertje-rechtsonder.jpg" alt="" /></td>
</tr>
</table>
</div>
</body>
</html>
body {
margin: 0px;
font: 16px "Lucida Calligraphy", "Lucida Handwriting", "Comic Sans MS";
color: #46120a;
text-align: left;
background: #bf9663 url(/image2/achtergrond-achter.jpg) repeat;
padding: 0px;
}
img {
border-width: 0;
}
a:link {
color: #46120a; text-decoration: underline}
a:visited {
color: #46120a; text-decoration: underline}
a:hover {
color: #46120a; text-decoration: none
}
a:active {
color: #46120a; text-decoration: none
}
#mainheader {
background-image: url(/image2/achtergrond-top.jpg);
width: 100%;
padding: 0px;
}
#internet-explorer {
background-image: url(/image2/achtergrond-top-IE7-.jpg);
width: 100%;
padding: 0px;
}
#header {
width: 800px;
margin-left: auto; margin-right: auto;
padding: 0px;
}
#veluws-eethuis img {
margin-left: auto; margin-right: auto;
}
#veluws-eethuis-wissel {
width: 100%;
}
.papier {
margin-top: 15px;
width: 100%;
}
.papier table { margin-left: auto; margin-right: auto;}
.papier-boven {
background-image: url(/image2/papiertje-boven.jpg);
width: 700px;
}
.papier-onder {
background-image: url(/image2/papiertje-onder.jpg);
width: 700px;
}
.papier-left {
background-image: url(/image2/papiertje-left.jpg);
}
.papier-right {
background-image: url(/image2/papiertje-right.jpg);
}
.tekst {
background-image: url(/image2/achtergrond2.jpg);
width: 700px;
}
.navlink {
float: left;
margin: 0px;
padding: 0px;
}
a.home
{width:109px; height:42px; display:block;
background-image:url(/image2/homev.jpg);}
a.home:hover
{background-image:url(/image2/homev.jpg);}
a.home:hover img {visibility: hidden;}
a.menukaart
{width:120px; height:42px; display:block;
background-image:url(/image2/menukaartv.jpg);}
a.menukaart:hover
{background-image:url(/image2/menukaartv.jpg);}
a.menukaart:hover img {visibility: hidden;}
a.arrangementen
{width:152px; height:42px; display:block;
background-image:url(/image2/arrangementenv.jpg);}
a.arrangementen:hover
{background-image:url(/image2/arrangementenv.jpg);}
a.arrangementen:hover img {visibility: hidden;}
a.omgeving
{width:114px; height:42px; display:block;
background-image:url(/image2/omgevingv.jpg);}
a.omgeving:hover
{background-image:url(/image2/omgevingv.jpg);}
a.omgeving:hover img {visibility: hidden;}
a.routebeschrijving
{width:167px; height:42px; display:block;
background-image:url(/image2/routebeschrijvingv.jpg);}
a.routebeschrijving:hover
{background-image:url(/image2/routebeschrijvingv.jpg);}
a.routebeschrijving:hover img {visibility: hidden;}
a.contact
{width:100px; height:42px; display:block;
background-image:url(/image2/contactv.jpg);}
a.contact:hover
{background-image:url(/image2/contactv.jpg);}
a.contact:hover img {visibility: hidden;}
[edited by: engine at 1:14 pm (utc) on Oct. 22, 2008]
[edit reason] no specifics: examplified [/edit]
<img src="blah.jpg" width="100" height="100" />
If you meant getting it from the server: the text of a page is most likely in the html of the page and as such it will be downloaded with the html. Since the CSS, images and other media are linked from the html or the CSS (background images) the text will be necessity always be loaded first.
Browsers decide on their own what gets loaded first once they have the html. Most will first go for the CSS first.
Know that HTTP 1.1 connections (should be most of them nowadays) will only open 2 concurrent connections, not the typical 10 connections from HTTP 1.0 anymore.
If you meant what gets displayed in what order, you can speed it up a but for slow connections by doing some tricks like making sure all images have a size set (so the flow can be done and the text positioned without having the images already downloaded.
Also using things like CSS sprites can seriously reduce the download time as getting a single image will be faster than getting a lot of them in modern browsers.
Most users do not like the flash of un-styled content that would happen due to the CSS being loaded after the html (be necessity), and hence browsers seem to hold off on displaying the text somewhat till they got hold of the CSS (within limits).
I think you have a number of things to aim for, that each might give you a partial solution:
because the text isn't readable when the images are loading anyway.If that is because the colour of the text is only readable after the images provide a contrasting background, then give the element a background-color that makes the text readable while the images are downloading. Providing a background-colour that makes text readable without images is a good coding practise - and as a user may have images turned off, or they may not download, quite important.
I will set image sizes that could probably do the trick, is it possible to set image sizes in css? and if it is, how? or could i better put them in the <img> tag?For images in the html, best coding practise is to put the dimensions into the image element. As londrum said, this allows the browser to identify the space required by the image and layout the page accordingly, even if the image has not yet been downloaded. Aim to code in a way that works "with" the browser rather than trying to force the browser to do things to overcome code deficiencies.
If you are using one, "full-size"image for each background image in the css, then the image dimensions are already known to you. Help the browser out by putting the dimensions into the css via "height" and width". If you can, make it even easier for the browser by setting a height and width on the cells.
also you told me not to use tables, i tried to do that, but whit no luck,This is possible, although it might seem difficult at first if used to using tables. It will also depend on what you are trying to achieve. The provided code suggests images being used to convey meaning (such as for links) rather than text. If the site does use images that way, then my opinion is that utter enormity of the accessibility and seo disadvantages make the additional issue of "tables for layout" barely worth a mention.
because my text gets stuck at the right side of my headerOn the provided code, for me, both winSafari and ff draw the table in div.papier to the right of the document (although below the header), rather than centred full width - which is what I think you wanted. This is despite div.papier itself being drawn below the header and centered. I cannot immediately see the exact cause, but applying
clear:left.papierhow to get the <center> tag out of my htmlThere are several ways to do this, but because div.example only contains an image, remove the <center> and create a new class in your css:
.example {text-align:center}I shall give you the css and the html maybe something is wrong whit that, ... because i want to have xhtml 1.1Your html and css both validated, which is fantastic! So, technically, there is nothing "wrong" with either. However, the html suffers from "divitis" and "classitis", and the css has lots of redundancies, so could easily be improved. However, as said earlier, I think these are minor considerations if the site is using images to convey information.
Unless you have some real reason (and that's not apparent in the provided code) for xhtml, then I suggest you aim for html strict. Why most of us should NOT use XHTML [webmasterworld.com] and Choosing the best doctype for your site [webmasterworld.com] have good discussions on the issue.
Code created in blocks that strictly follows a top to bottom hierarchy (visually) renders the fastest.
Here is the ideal layout (IMHO):
<body>
<div>
logo image + some keyword laden slogan
</div>
<div>
nav bar
</div>
<div>
Content including H1 etc.
</div>
<div>
Footer stuff
</div>
</body>
Naturally the middle content area is where you're going to have some contexually related navigational links related to what section you are and nesting that in there isn't going to slow things down much at all. What you want to avoid is avoidable nesting. It can be done. ;)
ok thanks i will put them in the <img> tag
don't know exactly what you said about full sized imaged (since english is my second langluage and i am still learning it at school), but there aren't full sized so it doesn't really matter ;)
well what i use my table for is an image-border. which the top, bottem, right and left side can become smaller when you are making your window smaller, this is possible whit css i heard from someone, but then whit 10 <div>'s which won't speed anything up at all. When css3 is out then it will be easy to implent ;) (it has an image border option)
actually the strange thing is it loads at the right side of an image in the header, which is in a whole other <div> tag and the text is even in a <table> tag. but i try clearing it to the left :)
yeah i know the css has some redundancies but those aren't that big (some margin etc. things aren't needed, but i don't know which ones)
and only the hyperlinks tot the other pages are picture-links ;)
Well i did look at your links about xhtml, and read a bit, but it is not that easy for me to understand it all. all i understood that was there was that you easely make mistakes whit uppercase and "/" etc. but i never made those so... and that there is nearly an extra in xhtml. but i don't see any negative things what would go for me. it is that i like xhtml because it has to be clean typed (no uppercase and to close everything) and that about:_blank does not work etc. is also positive for me. it makes the internet much cleaner.
thanks for your help :)
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
They are each factors in the Yslow tool that we discused here: [webmasterworld.com...]
If you follow the links in that thread, you'll begin to learn about each of those areas.
html:
<div id="mainheader"><!--[if lt IE 8]></div><div id="internet-explorer"><![endif]-->
<div id="header">
<div>
<img src="/image2/veluwseethuiswissel.jpg" width="270" height="43" alt="" />
<img src="/image2/foto-home.jpg" width="800" height="165" alt="veluws eethuis wissel" title="" />
</div>
<div>
<div class="navlink"><img src="/image2/homev.jpg" width="109" height="42" alt="" /></div>
<div class="navlink"><a class="menukaart" href="/menukaart.html" ><img src="/image2/menukaart.jpg" width="120" height="42" alt="" /></a></div>
<div class="navlink"><a class="arrangementen" href="/arrangementen.html"><img src="/image2/arrangementen.jpg" width="152" height="42" alt="" /></a></div>
<div class="navlink"><a class="routebeschrijving" href="/routebeschrijving.html"><img src="/image2/routebeschrijving.jpg" width="167" height="42" alt="" /></a></div>
<div class="navlink"><a class="omgeving" href="/omgeving.html"><img src="/image2/omgeving.jpg" width="114" height="42" alt="" /></a></div>
<div class="navlink"><a class="contact" href="/contact.html"><img src="/image2/contact.jpg" width="100" height="42" alt="" /></a></div>
<img src="/image2/space.jpg" width="38" height="42" alt="" />
</div>
</div>
</div>
css:
body {
margin: 0px;
font: 16px "Lucida Calligraphy", "Lucida Handwriting", "Comic Sans MS";
color: #46120a;
text-align: left;
background: #bf9663 url(/image2/achtergrond-achter.jpg) repeat;
padding: 0px;
}
img {
border-width: 0;
}
#mainheader {
background-image: url(/image2/achtergrond-top.jpg);
width: 100%;
padding: 0px;
background-repeat: repeat-x;
}
#internet-explorer {
background-image: url(/image2/achtergrond-top-IE7-.jpg);
width: 100%;
padding: 0px;
background-repeat: repeat-x;
}
#header {
width: 800px;
margin-left: auto; margin-right: auto;
padding: 0px;
}
#header div{
text-align:center;
}
/* mousover css */
.navlink {
float: left;
margin: 0px;
padding: 0px;
}
a.home
{width:109px; height:42px; display:block;
background-image:url(/image2/homev.jpg);}
a.home:hover
{background-image:url(/image2/homev.jpg);}
a.home:hover img {visibility: hidden;}
a.menukaart
{width:120px; height:42px; display:block;
background-image:url(/image2/menukaartv.jpg);}
a.menukaart:hover
{background-image:url(/image2/menukaartv.jpg);}
a.menukaart:hover img {visibility: hidden;}
a.arrangementen
{width:152px; height:42px; display:block;
background-image:url(/image2/arrangementenv.jpg);}
a.arrangementen:hover
{background-image:url(/image2/arrangementenv.jpg);}
a.arrangementen:hover img {visibility: hidden;}
a.routebeschrijving
{width:167px; height:42px; display:block;
background-image:url(/image2/routebeschrijvingv.jpg);}
a.routebeschrijving:hover
{background-image:url(/image2/routebeschrijvingv.jpg);}
a.routebeschrijving:hover img {visibility: hidden;}
a.omgeving
{width:114px; height:42px; display:block;
background-image:url(/image2/omgevingv.jpg);}
a.omgeving:hover
{background-image:url(/image2/omgevingv.jpg);}
a.omgeving:hover img {visibility: hidden;}
a.contact
{width:100px; height:42px; display:block;
background-image:url(/image2/contactv.jpg);}
a.contact:hover
{background-image:url(/image2/contactv.jpg);}
a.contact:hover img {visibility: hidden;}
