Desperately need an image to disappear when page is fully loaded

[edfialk]

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]

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?

 

[David Mark]

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.

 

[james.ducker]

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

 

[David Mark]

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]

David Mark said the following on 10/4/2007 9:31 PM:



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.

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.

 

[edfialk]

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.