Image style (and thanks)

Discussion in 'HTML' started by Michael Satterwhite, Feb 23, 2005.

  1. First I want to thank those who answered my previous question).

    I have an image that I'm going to use javascript to fade in. Unfortunately,
    in IE I see the image blink as it's being loaded, then go to the fade-in.
    What can I do to prevent the image from displaying at all until the form is
    loaded - at which point I'll fade it in.

    tia
    ---Michael
    Michael Satterwhite, Feb 23, 2005
    #1
    1. Advertising

  2. Michael Satterwhite

    Noozer Guest

    "Michael Satterwhite" <satterwh.X$NO$S$> wrote in message
    news:Ua1Td.37105$...
    > First I want to thank those who answered my previous question).
    >
    > I have an image that I'm going to use javascript to fade in.

    Unfortunately,
    > in IE I see the image blink as it's being loaded, then go to the fade-in.
    > What can I do to prevent the image from displaying at all until the form

    is
    > loaded - at which point I'll fade it in.


    Set the default "display" style to "none" so the image won't be visible when
    the page loads?

    Got a link?
    Noozer, Feb 23, 2005
    #2
    1. Advertising

  3. Michael Satterwhite

    Steve Pugh Guest

    "Noozer" <> wrote:
    >"Michael Satterwhite" <satterwh.X$NO$S$> wrote in message
    >news:Ua1Td.37105$...
    >> First I want to thank those who answered my previous question).
    >>
    >> I have an image that I'm going to use javascript to fade in.

    >Unfortunately,
    >> in IE I see the image blink as it's being loaded, then go to the fade-in.
    >> What can I do to prevent the image from displaying at all until the form

    >is
    >> loaded - at which point I'll fade it in.

    >
    >Set the default "display" style to "none" so the image won't be visible when
    >the page loads?


    visibility: hidden; would be better as it reserves the space for the
    element, so the pag won't need to reflow when the fade in starts.

    Also, don't do this in the main stylesheet. Do it via a style that's
    created by JavaScript (I'm assuming that the fade effect is JS
    powered) so that users without JS don't miss out on the image
    altogether.

    So in the <head> of the page include a script that's executed
    immediately:
    if (check for methods used during the fade effect, can't check for all
    objects yet as the page hasn't finished loading) {
    document.write('<style type="text/css">.foo
    {visibility:hidden;}</style>');
    }

    and then the image <img class="foo"> will be initially hidden. Later
    an onLoad event can change the visibilty and launch the fade in.

    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, Feb 23, 2005
    #3
    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. Noah
    Replies:
    5
    Views:
    780
  2. ankit
    Replies:
    1
    Views:
    340
    Alex Martelli
    Dec 22, 2005
  3. Kza
    Replies:
    4
    Views:
    419
    Andrew Koenig
    Mar 3, 2006
  4. Ken Varn
    Replies:
    0
    Views:
    447
    Ken Varn
    Apr 26, 2004
  5. Amir Hardon
    Replies:
    0
    Views:
    259
    Amir Hardon
    May 31, 2004
Loading...

Share This Page