Preload graphics

Mike Johnson · Nov 28, 2003

Hi

Is there a way to load the graphics (eg. buttons) in advance before showing
the page.

The problem is as follows

My buttons are wery slowly shown (even though their 3-5k size). I would like
to load a standard button for all of my buttons until they have been
downloaded.

TIA

MJ

brucie · Nov 28, 2003

Is there a way to load the graphics (eg. buttons) in advance before showing
the page.

several different ways. just google for preloading graphics but only
preload background images.

Richard · Nov 28, 2003

Mike! said:
Hi

Is there a way to load the graphics (eg. buttons) in advance before
showing the page.

The problem is as follows

My buttons are wery slowly shown (even though their 3-5k size). I would
like to load a standard button for all of my buttons until they have been
downloaded.

MJ

The javascript method is:

If {document.images}
{ images = new array();
images[0]=new array();
images[0].src="source.jpg";
}

Tests if javascript is on and if the browser accepts the method or not.
The default for the "new array" value is 10. Zero through 9.
For any other value, simply put that value in the ( ).

Leslie · Nov 28, 2003

several different ways. just google for preloading graphics but only
preload background images.

brucie! Welcome back. Haven't seen you around here in ages.

Leslie
"I refuse to have a battle of wits with an unarmed person."

Nico Schuyt · Nov 28, 2003

Mike said:
Is there a way to load the graphics (eg. buttons) in advance before
showing the page.

In the head section:
<script type="text/JavaScript">

</script>
In combination with:
<body onLoad="MM_preloadImages(xxx.jpg',yyy.jpg',zzz.jpg')">

Alternative: Display the pictures as 1x1pixel before showing the buttons

Alternative 2: Use *one* picture for normal link and hover effect:
http://www.tanfa.co.uk/css/examples/rollover-images-no-preload2.asp

Nico

Steve Pugh · Nov 28, 2003

Your posts are showing up on my server again. Oh well, here goes...

The javascript method is:

If {document.images}

JavaScript is case sensitive, so that should be if not If
Those should be round brackets - if (document.images)

{ images = new array();

Again JavaScript is case sensitive so that should be Array not array.

The images array already exists (you've just tested for it's existence
on the line before) so creating a new array with the same name is
risky.

images[0]=new array();

That should, of course, be new Image()

images[0].src="source.jpg";
}

The default for the "new array" value is 10. Zero through 9.

Rubbish. If you don't specify a length for the array then its length
is zero until you start adding items to the array.
Try it:
myArray = new Array();
alert(myArry.length);
Gosh, it says 0 not 10.

But the problem with doing this is that it needs to be on the page
_before_ the one where the images are used.

If you include this sort of JavaScript in the head of the page then
the browser will start downloading the images at that point, but it
won't stop downloading and rendering the rest of the page.

See http://steve.pugh.net/test/test63.html for a demonstration.

Unless the HTML of the page is very, very long, or the images are
very, very small this doen't actually solve the OP's problem.

To achieve that some additional code making use of the .complete
property would be needed.

Steve

Richard · Nov 28, 2003

Steve! said:
"Richard" <[email protected]> wrote:

Your posts are showing up on my server again. Oh well, here goes...

JavaScript is case sensitive, so that should be if not If
Those should be round brackets - if (document.images)

Again JavaScript is case sensitive so that should be Array not array.

The images array already exists (you've just tested for it's existence
on the line before) so creating a new array with the same name is
risky.

images[0]=new array();

Click to expand...

That should, of course, be new Image()

images[0].src="source.jpg";
}

The default for the "new array" value is 10. Zero through 9.

Click to expand...

Rubbish. If you don't specify a length for the array then its length
is zero until you start adding items to the array.
Try it:
myArray = new Array();
alert(myArry.length);
Gosh, it says 0 not 10.

But the problem with doing this is that it needs to be on the page
_before_ the one where the images are used.

If you include this sort of JavaScript in the head of the page then
the browser will start downloading the images at that point, but it
won't stop downloading and rendering the rest of the page.

See http://steve.pugh.net/test/test63.html for a demonstration.

Unless the HTML of the page is very, very long, or the images are
very, very small this doen't actually solve the OP's problem.

To achieve that some additional code making use of the .complete
property would be needed.

Steve

Oh bless you kind sire for the lesson.
I was speaking of the maximum numbers of entries one can make into the array
as being 10 by default, not the length of them.
This stems from the old BASIC default for arrays.
If you have only array() and attempt to include item[10] in the array,
item[10] will not be recognized.
Once you specify a definitive value, such as 99, then item[10] will be
recognized.
If you have array(99) and have item[100], guess what's going to happen?
Item[100] will not be recognized because it is beyond the defined value.
Likewise, if you define array(5) and attempt to use item[6], it ain't gonna
be recognized either because you mandated that there is to be only 5 items.

Try it out for yourself and see what happens.

Steve Pugh · Nov 28, 2003

Richard said:
Oh bless you kind sire for the lesson.

Maybe you'll actually learn someting, but on past evidence you won't

I was speaking of the maximum numbers of entries one can make into the array
as being 10 by default, not the length of them.

myArray = new Array();
myArray[0] = "Zero";
myArray[1] = "One";
myArray[2] = "Two";
myArray[3] = "Three";
myArray[4] = "Four";
myArray[5] = "Five";
myArray[6] = "Six";
myArray[7] = "Seven";
myArray[8] = "Eight";
myArray[9] = "Nine";
myArray[10] = "Ten";
alert(myArray[10])

Seems to accept that eleventh entry just fine.

This stems from the old BASIC default for arrays.

JavaScript is not Basic. JavaScript is not derived from basic. What
makes you think you can blindly take a principle from one programming
language and apply it to another?

If you have only array() and attempt to include item[10] in the array,
item[10] will not be recognized.

Wrong. See above.

Once you specify a definitive value, such as 99, then item[10] will be
recognized.

There's hardly ever any need to specify the length of an array in
JavaScript when creating the array.

If you have array(99) and have item[100], guess what's going to happen?

The array will be increased in length by one.

myArray = new Array(9);
myArray[0] = "Zero";
myArray[1] = "One";
myArray[2] = "Two";
myArray[3] = "Three";
myArray[4] = "Four";
myArray[5] = "Five";
myArray[6] = "Six";
myArray[7] = "Seven";
myArray[8] = "Eight";
myArray[9] = "Nine";
myArray[10] = "Ten";
alert(myArray[10])

Still works!

Item[100] will not be recognized because it is beyond the defined value.
Wrong.

Likewise, if you define array(5) and attempt to use item[6], it ain't gonna
be recognized either because you mandated that there is to be only 5 items.

new Array(X) doesn't "mandate" that the array be X items long for all
time, it just says that the array is initially X items long. Adding
more than X items just makes the array longer, that's all.

new Array() creates an array that is initially of zero length, you can
then add any number of items to it.

Try it out for yourself and see what happens.

Maybe you should have tried it out.

Steve

Richard Clark · Dec 4, 2003

"Mike Johnson" said:
Is there a way to load the graphics (eg. buttons) in advance before showing
the page.

The problem is as follows

My buttons are wery slowly shown (even though their 3-5k size). I would like
to load a standard button for all of my buttons until they have been
downloaded.

Hi Mike,

Other replies have mentioned script and other issues. Let me ask why your
button image file sizes are so BIG!? My home page has a 242x44 animated GIF
that alternates 2 images, and it is only 2.11K. The largest background image on
the pages in that folder is less than 1K. Most are less than a half K. Are you
using 256 color mode for images with less than 16 colors? There are a number of
graphics/paint programs that can be use to reduce the file size of images
without losing quality. Pages load faster if you include WIDTH and HEIGHT
attributes in the IMG tag. The only time when it might be a bad idea to set the
size of the image, is when the (always included) ALT text will not fit in the
image area. Another thing that can slow down page loading is a TABLE that has
to wait for the entire page to load before it can be sized to fit. Pages
waiting for a script loop to complete can be sluggish sometimes too. And of
course, overloaded ISP servers can be sluggish.

What kind of buttons? If text: Is the point size set to 16 points or more and
bold, for dim-sighted people and low-resolution WebTV displays? Instead of
using images for buttons, it is possible to display simple buttons with one
background color and one text color using BGCOLOR in a TABLE, or using SPAN
with CSS style background. And you can have border colors and designs/effects
with CSS too. The additional advantage with table or span buttons, is that the
text is resizable for people that can't see small text and have their browser
set to "Largest" font size; And the text can change color, depending on the
Link, Visited, Hover, and Active color settings, without using mouseover
commands if you don't change the default link colors with a CSS
style="color

range" or such-like attribute.

Example of non-image text buttons:
Page title = Ancient Refrigerators
http://members.aol.com/RichClark7\pass\wine\anrefrig.htm

Note the 3 buttons at the bottom of that page. An Index button on the left, a
Home button in the middle and a Next button on the right. If you View Source,
you will note that the order of the 3 buttons in the code is 1st, 3rd, 2nd. The
Index and Next buttons are in floating tables using align=left and align=right,
but the home button is not in a table, only using CSS background color and text
color to simulate a button.

The class=Lg is defined in the style sheet as--
..Lg {background: #99ffcc; text-decoration: none; font: bold 10pt Arial;}

(Oops, I need to update the style sheet to 16pt for elderly eyed peeps.

BTW: If PC users want to see a fair approximation of how web pages look to
WebTV viewers, un-Maximize your browser and re-size it so the page display area
is 544x372, and switch your default font display size from medium to Larger or
Largest. Then take some clear plastic, like a cut-open refrigerator food bag
and drape it over the screen to slightly blur the crispness of the text.

(Yeah! Well, maybe it doesn't look quite that bad on on a TV.

There ya go! (Still eating turkey leftovers?

Pilgrims and the Mayflower Compact
http://members.aol.com/RichClark7/pilgrims.htm

Jesus' Birth (and related issues)
http://members.aol.com/RichClark7/read/birth_JC.htm

Mike Johnson · Dec 9, 2003

Thankzz, I'll try to shrink my buttons (whitch by the way is a graphical
button with text included).

Adding embed countdown	1	Nov 5, 2022
"Loading" Graphic (Preload issue)	1	Jun 6, 2004
Weird Behavior with Rays in C and OpenGL	4	Feb 13, 2024
Proposal: Using the debugger or 'diagnostics' should preload Carp::Heavy	3	Oct 21, 2010
Set 'disabled' attribute of 'input' based on value of radio button?	5	Jul 27, 2011
[SUMMARY] Turtle Graphics (#104)	2	Dec 7, 2006
matploblib communication problem, graphics question	0	May 23, 2008
Button Clicked?	0	Dec 9, 2012

Preload graphics

Mike Johnson

brucie

Richard

Leslie

Nico Schuyt

Steve Pugh

Richard

Steve Pugh

Richard Clark

Mike Johnson

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads