Desperately need an image to disappear when page is fully loaded

Discussion in 'Javascript' started by edfialk, Oct 4, 2007.

  1. edfialk

    edfialk Guest

    Hi all, I have an application that overlays some WMS images on an
    openlayers map, but the only important part is that I'm downloading
    some decent sized images and it can take up to a minute or two.

    I really need a loading gif that accurately displays and disappears if/
    when there is still data being transferred.

    I've seen a couple code examples, but they don't seem to work for me.

    My document onLoad is calling a function that sets up my maps and
    fetches default values, etc., etc. and after this is all done, I call
    getElementById("loading").style.display="none", but the loading gif
    disappears immediately on page load, instead of when all the image
    loading is done.

    Does anyone know of a good script that can change a div display AFTER
    the page is COMPLETELY loaded (i.e. no more transferring data, etc.)?

    I would be just incredibly grateful if anyone could help me out.

    Thanks!
    -Ed
    edfialk, Oct 4, 2007
    #1
    1. Advertising

  2. edfialk

    edfialk Guest

    >
    > uh, perhaps...
    >
    > getElementById("loading").style.display="none"
    >
    > ... should go at the end of the function that sets up your maps and fetches
    > default values, etc etc rather than a seperate "onload" function.
    >
    > the page is doing what it should; after the document loads, the image
    > disappears. if you want the image to disappear after your *data* is
    > loaded, put the 'disappear' command at the end of the data-loading
    > function.


    I've tried putting loading.style.display="none" at the end of the
    function that fetches maps, etc. It still gets executed after values
    are set, after images START to download, but long before they're
    finished.

    I'm completely unfamiliar with this 'disappear' command, and can't
    seem to find much on it my first search through. Could you explain
    how to use that for me?
    edfialk, Oct 4, 2007
    #2
    1. Advertising

  3. edfialk

    David Mark Guest

    On Oct 4, 4:01 pm, edfialk <> wrote:
    > Hi all, I have an application that overlays some WMS images on an
    > openlayers map, but the only important part is that I'm downloading
    > some decent sized images and it can take up to a minute or two.
    >
    > I really need a loading gif that accurately displays and disappears if/
    > when there is still data being transferred.
    >
    > I've seen a couple code examples, but they don't seem to work for me.
    >
    > My document onLoad is calling a function that sets up my maps and
    > fetches default values, etc., etc. and after this is all done, I call
    > getElementById("loading").style.display="none", but the loading gif
    > disappears immediately on page load, instead of when all the image
    > loading is done.


    Which is what you told it to do. You could attach onload handlers to
    each image you create in script to bump and check a counter. But I
    think Opera will have issues with this if the images are already
    cached.

    Why not use server side script to generate CSS that sets the
    background images of hidden DIV's to these large images? Then the
    onload event won't fire until the images are loaded. If your current
    onload script is needed to make the page interactive, move that logic
    to a script at the bottom of the page.
    David Mark, Oct 4, 2007
    #3
  4. edfialk

    Guest

    On Oct 5, 6:01 am, edfialk <> wrote:
    > Hi all, I have an application that overlays some WMS images on an
    > openlayers map, but the only important part is that I'm downloading
    > some decent sized images and it can take up to a minute or two.
    >
    > I really need a loading gif that accurately displays and disappears if/
    > when there is still data being transferred.
    >
    > I've seen a couple code examples, but they don't seem to work for me.
    >
    > My document onLoad is calling a function that sets up my maps and
    > fetches default values, etc., etc. and after this is all done, I call
    > getElementById("loading").style.display="none", but the loading gif
    > disappears immediately on page load, instead of when all the image
    > loading is done.
    >
    > Does anyone know of a good script that can change a div display AFTER
    > the page is COMPLETELY loaded (i.e. no more transferring data, etc.)?
    >
    > I would be just incredibly grateful if anyone could help me out.
    >
    > Thanks!
    > -Ed


    Can't you load your images with the JS first? For example

    var myImage = new Image();
    myImage.src = "somefile.jpg";

    if (myImage.complete) document.getElementById("loading").style.display
    = "none";

    Obviously an if statement isn't the best approach, but I don't see
    what's stopping you from using that method to check.

    - James
    , Oct 5, 2007
    #4
  5. edfialk

    David Mark Guest

    On Oct 4, 8:17 pm, Randy Webb <> wrote:
    >
    > I have made the suggestion, the last time this was asked, to simply
    > place an img element in the page itself for each image and then the
    > body/window.onload doesn't fire until they were loaded. It either got


    I think it is better to use background images to preserve the
    semantics of the page and prevent them from showing up when CSS is
    disabled or unavailable.

    > ignored or people simply can't do research to find out how to do something.


    It seems clear that most people don't search the old posts or the FAQ
    for answers.
    David Mark, Oct 5, 2007
    #5
  6. edfialk

    David Mark Guest

    On Oct 5, 3:10 am, Randy Webb <> wrote:
    > David Mark said the following on 10/4/2007 9:31 PM:
    >
    > > On Oct 4, 8:17 pm, Randy Webb <> wrote:
    > >> I have made the suggestion, the last time this was asked, to simply
    > >> place an img element in the page itself for each image and then the
    > >> body/window.onload doesn't fire until they were loaded. It either got

    >
    > > I think it is better to use background images to preserve the
    > > semantics of the page and prevent them from showing up when CSS is
    > > disabled or unavailable.

    >
    > Semantics of a page, perhaps. <img src="something.png" width="1"
    > height="1"> has no ill effects when CSS is disabled or unavailable though.
    >


    That's one pixel too many.

    > >> ignored or people simply can't do research to find out how to do something.

    >
    > > It seems clear that most people don't search the old posts or the FAQ
    > > for answers.

    >
    > That is because people ask and a few people trip over themselves to post
    > a complete solution to the problem instead of forcing the OP's to learn
    > something.


    That is hardly the norm for this group and users who post blindly
    without searching wouldn't know if it was.
    David Mark, Oct 5, 2007
    #6
  7. edfialk

    edfialk Guest

    I looked for loading animation, loading image, image disappear onload,
    and a bit more, unable to find the answer to my question. I didn't
    post blind without searching. If you are better at searching than I
    am, I'm sorry, but you could have just posted a link to the post.

    >I have made the suggestion, the last time this was asked, to simply
    >place an img element in the page itself for each image and then the
    >body/window.onload doesn't fire until they were loaded. It either got
    >ignored or people simply can't do research to find out how to do something.


    there's about a million possible images that can be loaded. Every
    single hour has 2 parameters for about 10 datasets for an entire
    year. It's impossible for me to load the images. Whether I saw your
    post previously or not, it doesn't help me at all. I did the
    research, like I said i saw a few examples but none of them work for
    me. Obviously, that part must have been ignored.

    I guess I should have said these previously, but there's no way I can
    preload images, there's just too many. All I would need is a way to
    see if data is still being transferred, but like said previously, I
    guess I don't have that control.

    I greatly appreciate the help, you guys, this problem has plagued me
    for a while, so asking for help like this was just one of my last
    ditch efforts.
    edfialk, Oct 5, 2007
    #7
    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. Fenno
    Replies:
    0
    Views:
    514
    Fenno
    Nov 6, 2005
  2. Frank LaRosa
    Replies:
    1
    Views:
    386
    Andrew Thompson
    Nov 30, 2003
  3. Chris
    Replies:
    5
    Views:
    3,896
    liangdong
    Jul 31, 2011
  4. sonic_soul
    Replies:
    5
    Views:
    125
    Fred Oz
    Nov 7, 2004
  5. paratge

    Url of a fully loaded page

    paratge, Apr 17, 2007, in forum: Javascript
    Replies:
    0
    Views:
    71
    paratge
    Apr 17, 2007
Loading...

Share This Page