3 loading images, 1 won't disappear onload :(

[edfialk]

hello, I have a web app up at http://niceguy.wustl.edu/NEISGEI/OMIComp

If you click calculate, the current settings will be used to perform
some calculations on air quality datasets and present them using
OpenLayers. These calculations take a bit to load and I would really
like a loading animation that disappeared when the image was finished
loading.

I finally found this great code from Sion Willison over at:
http://www.dzone.com/r/simon_willisons_addloadevent.html

Unfortunately, the third loading image does not disappear. It just
keeps spinning after the image is done.

There are no errors that pop up on the page, and no misnamed divs.

Basically the code is:
function addLoadEvent1(func) {
var oldonload = window.onload;
if (typeof oldonload == 'function') {
window.onload = function(){
oldonload();
func();
}
} else {
window.onload = func;
}
}

addLoadEvent1(function() {
document.getElementById("loading1").style.display="none";
});

Same code 3 times (addLoadEvent2, 3, etc.) and the first 2 work
perfectly!

Does anyone have any ideas what would stop the third from
disappearing?

Thanks for any advice at all!
-Ed

 

[David Mark]

hello, I have a web app up athttp://niceguy.wustl.edu/NEISGEI/OMIComp

If you click calculate, the current settings will be used to perform
some calculations on air quality datasets and present them using
OpenLayers. These calculations take a bit to load and I would really
like a loading animation that disappeared when the image was finished
loading.

I finally found this great code from Sion Willison over at:http://www.dzone.com/r/simon_willisons_addloadevent.html

Unfortunately, the third loading image does not disappear. It just
keeps spinning after the image is done.

There are no errors that pop up on the page, and no misnamed divs.

Basically the code is:
function addLoadEvent1(func) {
var oldonload = window.onload;
if (typeof oldonload == 'function') {
window.onload = function(){
oldonload();
func();
}
} else {
window.onload = func;
}

}

Why do you need this? Create a three line function that hides the
three div's and then do this:

window.onload = myfunc;

addLoadEvent1(function() {
document.getElementById("loading1").style.display="none";
});

Same code 3 times (addLoadEvent2, 3, etc.) and the first 2 work
perfectly!

And there's your problem. Don't copy and rename the function three
times. Name it "addLoadEvent" and call it three times. Like this:

addLoadEvent(function() {
document.getElementById("loading1").style.display="none";
});

addLoadEvent(function() {
document.getElementById("loading2").style.display="none";
});

addLoadEvent(function() {
document.getElementById("loading3").style.display="none";
});

 

[edfialk]

Hey David, thanks for the help.

When I try window.onload = myfunc, the images don't show up at all.

I had those 3 seperate functions just because I was trying lots of
things to get this to work and apparently stuck with that.
Even when I change it down to 1 function and try what you suggested,
the same thing happens. The 3rd div refuses to hide.

Thanks though!
-Ed

 

[David Mark]

Hey David, thanks for the help.

When I try window.onload = myfunc, the

That was just an example. "myfunc" doesn't exist, so you can't call
it.

images don't show up at all.

I had those 3 seperate functions just because I was trying lots of
things to get this to work and apparently stuck with that.

No. What you were doing made no sense and will never work.

Even when I change it down to 1 function and try what you suggested,
the same thing happens. The 3rd div refuses to hide.

Post the URI of the updated page.

 

[edfialk]

Yeah, I know myfunc is made up, I caught that. Either way, I made a
function call onload that hid the 3 divs, they were obviously hidden
immediately and didn't show up at all.

No. What you were doing made no sense and will never work.

I wasn't spewing gibberish praying for it to work, it made sense to me
at the time and works as well as anything else I've seen or tried.

Post the URI of the updated page

http://niceguy.wustl.edu/NEISGEI/EmisComp

You have to select a dataset that allows you to see the gif, so let's
use a mexican dataset (MNEI_Point). Once you load the page, click the
selection box next to dataset, choose "create new grid", then in the
data selection box choose "MNEI_Point" (or any MNEI). You'll have to
do the same for Grid B.

Then, click Calculate near the top right and soon you'll see the image
keeps spinning.

 

[David Cox]

Yeah, I know myfunc is made up, I caught that. Either way, I made a
function call onload that hid the 3 divs, they were obviously hidden
immediately and didn't show up at all.


I wasn't spewing gibberish praying for it to work, it made sense to me
at the time and works as well as anything else I've seen or tried.


http://niceguy.wustl.edu/NEISGEI/EmisComp

You have to select a dataset that allows you to see the gif, so let's
use a mexican dataset (MNEI_Point). Once you load the page, click the
selection box next to dataset, choose "create new grid", then in the
data selection box choose "MNEI_Point" (or any MNEI). You'll have to
do the same for Grid B.

Then, click Calculate near the top right and soon you'll see the image
keeps spinning.

on ie6 I just get error on page

 

[David Mark]

on ie6 I just get error on page- Hide quoted text -

Same here with IE7. map1 is null or not an object.

 

[edfialk]

Same here with IE7. map1 is null or not an object.

Oops, I always use Firefox because I hate IE. I can't even tell what
the error is in IE or where it happens. Page loads fine in Firefox.

I need to work on my IE debugging. I've never really learned how to
use the java console, if that's where the errors actually show up.

 

[David Mark]

Oops, I always use Firefox because I hate IE. I can't even tell what
the error is in IE or where it happens. Page loads fine in Firefox.

Double-click the warning icon in the status bar.

I need to work on my IE debugging. I've never really learned how to
use the java console, if that's where the errors actually show up.

No. The Java console is for Java. JavaScript errors show up in the
status bar or in a message box, depending on your configuration. You
can also use an external debugger with IE (eg Visual InterDev.)