Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Slicker Web page loading using JS help

Only loading images when page has fully loaded

6:53 am on May 7, 2003 (gmt 0)

10+ Year Member

Hi all,

I need to create a JavaScript that will only begin loading images after the page has fully loaded. This way, the browser will quickly load the text, and while the reader is reading the text, the browser will load the pictures. I'm guessing that a document.write method is the only way to do this since I need Netscape 4.7 compatibility, which rules out the use of DOM since innerHTML isn't supported.

I have tried many methods, but with limited to no success. One of these was this:

1. For each image, I would write this code inside the BODY:
<SCRIPT LANGUAGE="javascript">
function loadPica() {
document.write("<a href=pagea.htm><img src=pica.jpg width=100 height=50 alt='Page 1' border=4></a>");

<SCRIPT LANGUAGE="javascript">
function loadPicb() {
document.write("<a href=pageb.htm><img src=picb.jpg width=100 height=50 alt='Page 2' border=4></a>");

And so forth...

Then, just before the </BODY> tag, I would call the function for each pic:

<script language="Javascript">

But this would just result in partially rendered pages.

Any help is greatly appreciated.

Thank you.

11:27 am on May 7, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Hi Smilesalot, and welcome to WebmasterWorld!

Ain't it a real pain when you ask a straight question and instead of getting a straight answer, the answer you get is something like 'don't do it' or 'why do you want to do that', or ...?

Most browsers do what you are trying to get them to do, without you explicitly asking. i.e. They load up the pictures last. (Well, actually, they kick off the downloading of each picture as they come across the image tag, and then move on to the next thing while the picture is downloading in parrallel). That is one of the historical reasons for the height and width attributes of the <image...> tag; it tells the browser how much space to leave. Even cruddy old NN 4.x does this, so you don't have to worry about it.

As a general rule, avoid javascript if you can, except for bells and whistles. Your page should be able to function properly without it, as not everyone has it or turns it on. In particular, avoid using javascript to write <a..> tags as search engines and some visitors won't see them.

Just to answer your question slightly more directly, It doesn't matter where you define your javascript function, its action happens where you call it, so in your example, the pics should appear at the bottom, not where you defined the functions.


[Added after - thought: ]
But hey, if you REALLY want to pursue it, one way might be to have 2 css files. One a vanilla one, and another which defines your images as background-image: url(...); for various divs as apropriate. Load up the page with the vanilla style sheet, and then use the onload event to swap style sheets. Haven't tried it, its just an idea; so I'd be interested to know the results if you do try it.

[edited by: ShawnR at 11:35 am (utc) on May 7, 2003]

11:32 am on May 7, 2003 (gmt 0)

WebmasterWorld Senior Member chiyo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Following up on Shawns reply, why is there a problem? if you use tables for layout just make sure they are no nested, but one ater the other, and dont make your pages too long! Could it be as simple as making sure you have width and height atts on all image SRC's?
11:50 am on May 7, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

If you really want to go down this road then you could just put all the image tags at the very end of your HTML and then re-position them using CSS.

But as Shawn says, browsers handle all this for you so don't worry about it.

3:22 pm on May 7, 2003 (gmt 0)

10+ Year Member

Specify your images as backgrounds for DIVs or TABLEs, and they'll be loaded last. Not technically elegant, but works in practice.
7:37 pm on May 7, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Most browsers DO act the way you want, but I've noticed that:

1) While the HTML standards REQUIRE an IMG tag to have height and width attributes,
2) Browsers can generally make do without it, BUT
3) If the size attributes are omitted, the browser may not render anything after that point in the page until it knows (by downloading the image file) what size the image should be.
4) Certain so-called website development tools -- including FontPlague -- sometimes omit those attributes.

Moral: check your HTML for valid IMG tags, and watch all the browsers work better.

8:16 pm on May 7, 2003 (gmt 0)

WebmasterWorld Administrator buckworks is a WebmasterWorld Top Contributor of All Time 10+ Year Member

To change direction a bit, check your source code for "code bloat". Anything you can do to reduce clutter in your source code will help your pages load more quickly. I noticed a worthwhile speed increase when I learned how to use CSS to advantage. (I'm still learning.)

Some HTML editors add a lot of unneeded white space to the source code. Remove it if you can; getting rid of those extra characters can also help speed things up a bit.

Also, try not to use images to do any job that could be done by text.

8:28 pm on May 7, 2003 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Another way to get text to load quickly - for some layouts at least - is to place the text in an absolutely positioned div and move that div to the top of the <body> section in your code. When it is rendering the page, a browser works through an HTML document from top to bottom, so the text will pop-in like lightning.
8:49 pm on May 7, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

1) While the HTML standards REQUIRE an IMG tag to have height and width attributes,

The height and width attributes on an image are not required:

height %Pixels #IMPLIED -- suggested height in pixels --
width %Pixels #IMPLIED -- suggested width in pixels --
-- ... -->

So if the browser hasn't yet downloaded the referenced image it should instead display the alternate text (alt attribute) if any, if not, continue parsing and rendering the document.

HTML 2.0:

HTML user agents may process the value of the ALT attribute as an alternative to processing the image resource indicated by the SRC attribute.


The alt attribute specifies alternate text that is rendered when the image cannot be displayed (see below for information on how to specify alternate text). User agents must render alternate text when they cannot support images, they cannot support a certain image type or when they are configured not to display images.

(Note also that the alt attribute is #IMPLIED in HTML3.2 and earlier, and #REQURIED in HTML4 and later.)


9:39 pm on May 7, 2003 (gmt 0)

10+ Year Member

hutcheson what version of FP have you noticed a lack of size attributes in?

The reason I ask is I make test pages in ver. 2000 for an hta. Last week I was trying to write image tags without size attributes and it would add them as soon as I clicked out of HTML view. I couldn't stop it from adding the attributes.

1:42 am on May 8, 2003 (gmt 0)

10+ Year Member

Hi everyone, and thanks for your kind and informative answers!
The site design requires that most images be inside a single table, and while I try to keep every page as small as possible, the images need to be around 150k in size.
Even when loading from the hard drive, navigation is somewhat sluggish, since everything inside the tables gets loaded first, before it is displayed. On a modem, it would take at least a minute before one could see anything of value. As far as I know, nothing simple can prevent this.

The CSS, DIV and background image ideas are great and I thank you. I guess all my problems would be fixed if I were to throw out the tables and use DIV and CSS. But since I'm working on a big and old site (no CSS, thousands of font tags, thousands of images, differing styles of coding, completely structured with tables), this is an option that I'll blissfully put near the bottom of my solutions list for now.

Shawn, your comment on leaving out JavaScript whenever possible is a very valid one. I feel that I have no choice, however. The reason I'm clinging for dear life on my JS idea is because I want to rewrite as little of the site as possible, and since I'm very optimistic in light of the task awaiting me, try to go for a "cut and paste" solution. :)

To cater for people with JS turned off, I would place an IMG tag inside NOSCRIPT tags, immediately following the JS code that writes the IMG tag to that location. I have rewritten my JS function, so it will (theoretically) show the pics where I want them and trigger when the page has fully loaded. But how can I get the JS function to write a tag into a rendered and fully loaded page? Everything I tried, simply renders a new page with only the images showing.

2:02 am on May 8, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Hi Smilesalot

First, the tables and the div/css solution are not mutually exclusive. You could put the divs inside the <td...> table cells (or not have divs, just use the css on the cells themselves).

Second, another suggestion: Have all your <image src="shim.gif" ...> where shim.gif is a 1 pixel x 1 pixel file, but set height and width to what they should be for the real pictures. Then once the page has loaded, use javascript to change the src of the pictures, just like an old-fasioned roll-over routine changes an image.