/    Sign up×
Community /Pin to ProfileBookmark

change order …

Copy linkTweet thisAlerts:
Nov 07.2006

Hi,

I have a trouble with the loading of my page. Basically, it is composed of a table with 3 columns. In each, there is a picture. The important is the center one, the extremes ones are legend and advices. My problem is that the left one loads first, then the middle and finally the third. Is there a way to get the middle one to load first, and only after the left and the right ?

Here is a piece of the code :

[code=html]<table border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″class=”maincontainer”>
<tr>
<td width=”140″ valign=”top” align=”center” class=”leftwing”>
<img src=”slow1.gif”>
</td>
<td width=”652″ align=”center” valign=”top” class=”center”>
<img src=”main.gif”>
</td>
<td width=”140″ valign=”top” align=”center”class=”rightwing”>
<img src=”slow2.gif”>
</td>
</tr>
</table>[/code]

thanks for your help !!!!!

to post a comment
HTML

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@grumpyoldtechsNov 07.2006 — you could use javascript to preload the image.

also your html isn't valid i suggest you use this doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

then use the w3c HTML validation.

you have to remember tho most people are on faster connections now so image loading times are next to none. but if your on a fast connection and having to wait for more than 10 seconds for the page to load your not going to get very many people visiting your site.

no one likes loading times
Copy linkTweet thisAlerts:
@patimagesauthorNov 07.2006 — I know all this, people would be warned. Do not matter the html, it is just an extract. I still wonder how to load the middle and the rest ...

thanks!
Copy linkTweet thisAlerts:
@grumpyoldtechsNov 07.2006 — if you used the magical which is called google:


you would have found something like that:
[CODE]

<SCRIPT language="JavaScript">
<!--

if (document.images)
{
preload_image_object = new Image();
// set image url
image_url = new Array();
image_url[0] = "http://mydomain.com/image0.gif";
image_url[1] = "http://mydomain.com/image1.gif";
image_url[2] = "http://mydomain.com/image2.gif";
image_url[3] = "http://mydomain.com/image3.gif";

var i = 0;
for(i=0; i<=3; i++)
preload_image_object.src = image_url[i];
}

//-->
</SCRIPT>[/CODE]


also if know what all what i put why are you using badly written old code?
Copy linkTweet thisAlerts:
@22PixelsNov 07.2006 — First off, if there is a formatting problem you should first define the width and heights of the image, this way the browser wont have to load the image before it can tell how large it is. If the size is already defined the browser sets aside space for the image.

<img src="slow2.gif" width="100" height="100">

If the problem is that your images are loading too slowly, consider optimizing them for the web. The easyest way to do this is use the GIF format.

If using Photoshop, this can be done by File, Save For Web. There are many other utilities for optimizing images and most image programs have functions to create web safe images.
Copy linkTweet thisAlerts:
@WebJoelNov 07.2006 — I came across something like this recently, -it basically is a counting routine that counts milliseconds before allowing image to resolve. I think in the example used, it was to make the on-hover effect resolve slowly, by adding a couple of seconds. I guess it was to reduce the 'sharpness' or 'flutter' that an on-hover can cause. It looked as if it could be modified to work for non-anchor images too as it wasn't attached to any psuedo-class.

I tried to google it and couldn't find it. I might have snagged the snippette and have it in my archives (several CDs worth, -so give me some time). If I can find it I'll post the code.
×

Success!

Help @patimages spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...