Preload graphics

Discussion in 'HTML' started by Mike Johnson, Nov 28, 2003.

  1. Mike Johnson

    Mike Johnson Guest

    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
    Mike Johnson, Nov 28, 2003
    #1
    1. Advertising

  2. Mike Johnson

    brucie Guest

    in post <news:29Jxb.4406$2net.dk>
    Mike Johnson said:

    > 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.

    --
    brucie
    brucie, Nov 28, 2003
    #2
    1. Advertising

  3. Mike Johnson

    Richard Guest

    Mike! wrote:

    > 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


    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 ( ).
    Richard, Nov 28, 2003
    #3
  4. Mike Johnson

    Leslie Guest

    On Sat, 29 Nov 2003 00:57:31 +1000, brucie
    <> wrote:

    >in post <news:29Jxb.4406$2net.dk>
    >Mike Johnson said:
    >
    >> 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.



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

    Leslie
    "I refuse to have a battle of wits with an unarmed person."
    Leslie, Nov 28, 2003
    #4
  5. Mike Johnson

    Nico Schuyt Guest

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


    In the head section:
    <script type="text/JavaScript">
    <!--
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;
    i++)
    if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
    }
    //-->
    </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
    Nico Schuyt, Nov 28, 2003
    #5
  6. Mike Johnson

    Steve Pugh Guest

    "Richard" <anonymous@127.000> wrote:

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

    > Mike! wrote:
    >
    > > 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.

    >
    >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

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Nov 28, 2003
    #6
  7. Mike Johnson

    Richard Guest

    Steve! wrote:

    > "Richard" <anonymous@127.000> wrote:


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


    >> Mike! wrote:
    >>
    > >> 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.

    >>
    >>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


    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.
    Richard, Nov 28, 2003
    #7
  8. Mike Johnson

    Steve Pugh Guest

    "Richard" <anonymous@127.000> wrote:
    > Steve! wrote:
    > > "Richard" <anonymous@127.000> wrote:
    > >>
    > >>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.

    >
    >
    >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

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Nov 28, 2003
    #8
  9. In article <29Jxb.4406$2net.dk>, "Mike Johnson"
    <> writes:

    >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:eek: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
    Richard Clark, Dec 4, 2003
    #9
  10. Mike Johnson

    Mike Johnson Guest

    :)

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


    "Richard Clark" <> wrote in message
    news:...
    > In article <29Jxb.4406$2net.dk>, "Mike Johnson"
    > <> writes:
    >
    > >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:eek: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
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    0
    Views:
    1,236
  2. Joan

    preload filechooser

    Joan, Aug 1, 2005, in forum: Java
    Replies:
    2
    Views:
    372
    Knute Johnson
    Aug 1, 2005
  3. Marcus Leon

    How to preload jar classes?

    Marcus Leon, Oct 3, 2005, in forum: Java
    Replies:
    4
    Views:
    2,652
    Marcus Leon
    Oct 4, 2005
  4. Morris

    preload images

    Morris, Nov 12, 2003, in forum: HTML
    Replies:
    5
    Views:
    605
    Beauregard T. Shagnasty
    Nov 14, 2003
  5. Davmagic .Com

    To Preload pages

    Davmagic .Com, Apr 23, 2004, in forum: HTML
    Replies:
    1
    Views:
    2,195
    David Dorward
    Apr 23, 2004
Loading...

Share This Page