PDA

View Full Version : Loading Image



mburt
09-27-2006, 10:19 AM
I made a script that displays a very small image when the page is loading, and makes it disapeer once finished loading: (http://mburt.mb.funpic.org/loading.htm)


<html>
<head>
<script type="text/javascript">
onload = function() {
var obj = document.getElementById("img")
if (!document.readyState) {
obj.style.display = "block"
}
else {
obj.style.display = "none"
}
}
</script>
</head>
<body>
<div align="center" id="img" style="display:none">
<img src="generater.gif">
</div>
</body>
</html>

The problem is that it only works in Internet Explorer. I think it may have to do with document.readyState. So if anyone could help me, a great thanks

djr33
09-27-2006, 10:24 AM
Heh. That image is funny. Have you seen the mac startup screen? It's similar. Don't worry... not similar in a copyright violation kinda way... just funny.

As for the problem, you could just use onLoad....
<body onLoad="stopFunction();">

mwinter
09-27-2006, 11:09 AM
onload = function() {
var obj = document.getElementById("img")
if (!document.readyState) {
obj.style.display = "block"
}
else {
obj.style.display = "none"
}
}




if (document.getElementById)
onload = function() {
var element;

if ((element = document.getElementById('img')) && element.style)
element.style.display = '';
};



<div align="center" ...

Use CSS to position contents of the div element (or the element itself). I presume you're after the text-align property, here.



<img src="generater.gif">

No alt attribute?



The problem is that it only works in Internet Explorer. I think it may have to do with document.readyState.

Yes, it's a proprietary property, and I don't see why it's relevant here: the value of that property should have changed long before the onload event would have fired.

Mike

mburt
09-27-2006, 03:18 PM
if (document.getElementById)
onload = function() {
var element;

if ((element = document.getElementById('img')) && element.style)
element.style.display = '';
};

I'm not sure how to apply this to want I want to do. In fact, I can't even see what relevence this has compared to my script. In short; How can I apply it to my script?

jscheuer1
09-27-2006, 04:57 PM
It's never a good idea to use a tag name as an id.

Also:

document.readyState

is a string value (where supported, in IE and Opera, not in FF, it will always return true), not a boolean as your code seems to imply.

You might want to use the image tag's onload event to test to see if the image object's complete property is boolean and if so, if it is true or not.

Mike's (mwinter's) code is meant as an entirely different approach to the matter. Did you try it?

mburt
09-27-2006, 06:54 PM
It doesn't work...:


<html>
<head>
<script type="text/javascript">
if (document.getElementById)
onload = function() {
var element;

if ((element = document.getElementById('img')) && element.style)
element.style.display = '';
};
</script>
</head>
<body>
<div align="center" id="img">
<img src="generater.gif">
</div>
</body>
</html>

mwinter
09-27-2006, 07:06 PM
I had reimplemented what you wrote, albeit with feature detection, a defensive style, and omitting the readyState property check. It wasn't until a few hours ago (whilst I was eating dinner) that I realised that you were doing things backwards: hiding the image whilst the document was loading, and showing it once it had completed.

In a script element in the document head:


onload = function() {
var image = document.images.loading;

if (image.style) image.style.display = 'none';
};


In a script element in the document body:


document.write('<img id="loading" name="loading" alt="Loading..." src="generater.gif">');

There's no point in displaying the image unless scripting is enabled. Position it using CSS using the id attribute value.

Mike

mburt
09-27-2006, 07:13 PM
Ah I see. I saw the blank value for the img's style property and kind of scratched my head before. Thanks again mwinter :)

jscheuer1
09-27-2006, 07:17 PM
Well, that would make the element always (by default) display:block. If you were to do it like so:


<html>
<head>
<style type="text/css">
#iload {
display:none;
}
<script type="text/javascript">
function isloaded(){
var element;

if ((element = document.getElementById('iload')) && element.style)
element.style.display = element.style.display=='block'? '' : 'block';
}
if (document.getElementById)
onload = isloaded;
</script>
</head>
<body>
<div align="center" id="iload">
<img src="generater.gif">
</div>
<script type="text/javascript">
isloaded();
</script>
</body>
</html>

Then the element wouldn't ever be displayed in non-javascript enabled browsers and those not supporting getElementById. In javascript enabled browsers that support getElementById, it would be displayed only while the page is loading.

mburt
09-27-2006, 07:19 PM
You forgot the </style> after the style tag

mwinter
09-27-2006, 07:25 PM
if (document.getElementById)
onload = isloaded;

...

<script type="text/javascript">
isloaded();
</script>

Heh. Make up your mind, John. :p

Mike

mburt
09-27-2006, 07:26 PM
Ya I wondered about that myself lol

jscheuer1
09-27-2006, 08:11 PM
Heh. Make up your mind, John. :p

Mike

Try it, you'll like it. The one call, in the body of the page will set the loading graphic's container division's display property to block as the page loads. The onload call will set it back to the default style in the style sheet, which is none, when the page completes its loading.




element.style.display = element.style.display=='block'? '' : 'block';

mwinter
09-27-2006, 08:23 PM
Try it, you'll like it.

No, I wouldn't. My point still stands about including the image in the first place, about using a div element, and about feature detection.

Mike

jscheuer1
09-27-2006, 08:40 PM
No, I wouldn't. My point still stands about including the image in the first place, about using a div element, and about feature detection.

Mike

Sorry mwinter Mike (we have two Mikes in this thread), the 'try it you'll like it' part and the explanation of why it will fulfill mburt's (the OP's) requirements was in response to:


Ya I wondered about that myself lol

This assumes that mwinter's:


if ((element = document.getElementById('iload')) && element.style)

is OK (probably is) and that it does what I expect it would do (set the variable and test if the element exists and if its object has a style property). I would have done that part differently but, am always willing to learn. The way mwinter does this looks more thorough and at the same time economical (for what it does) to me.

I will leave the debate over whether to do the thing at all or not, up to others.

Too many Mike's in this thread. (grumble, chuckle, grumble) Too many Mike's in this thread. (grumble, chuckle, grumble) . . .

mburt
09-28-2006, 06:15 PM
Err... Thanks Mike and John, and sorry for the confusion. The problem was solved :)

mburt
09-28-2006, 06:28 PM
I still have a problem though. I have to load this script onto every page on my site, and where I have to make changes to the head and the body it would be kind of confusing. So I would it to all be in a .js file. I tried to do it dynamically:


document.body.innerHTML = '<div id="iload" align="center"><img src="image.gif"></div>'

But it doesn't work. Any ideas?

jscheuer1
09-28-2006, 10:15 PM
I still have a problem though. I have to load this script onto every page on my site, and where I have to make changes to the head and the body it would be kind of confusing. So I would it to all be in a .js file. I tried to do it dynamically:


document.body.innerHTML = '<div id="iload" align="center"><img src="image.gif"></div>'

But it doesn't work. Any ideas?

If that worked at all, it would wipe out all the other content on the page. You could do a += but, that is a bad idea for several reasons. The two scripts I have in my previous example can be combined into one and used as an external script linked to the body. Save the below as iload.js -


if (document.getElementById)
document.write('<div style="position:absolute;text-align:center;z-index:100;top:43%;dispaly:none;" id="iload"><img src="generater.gif"></div>')
function isloaded(){
var element;

if ((element = document.getElementById('iload')) && element.style)
element.style.display = element.style.display=='block' ? 'none' : 'block';
}
if (document.getElementById){
onload = isloaded;
isloaded();
}

Put this just after the opening <body> tag on the page(s) that will use it:


<script src="iload.js" type="text/javascript"></script>

That's it, all you need.

mburt
09-29-2006, 12:08 AM
Thanks :)
But



...
document.write('<div style="position:absolute;text-align:center;z-index:100;top:43%;dispaly:none;"
...

?

Lol, we all make mistakes. (I make the most :p)

jscheuer1
09-29-2006, 02:21 AM
Thanks :)
But



...
document.write('<div style="position:absolute;text-align:center;z-index:100;top:43%;dispaly:none;"
...

?

Lol, we all make mistakes. (I make the most :p)

You just don't get it but, that's OK. However, I tire of having to explain what is obvious to me, especially when being made the butt of laughter.

mburt
09-29-2006, 10:40 AM
I'm sorry if I offended you though, that was not my intention.

jscheuer1
09-29-2006, 04:10 PM
I'm sorry if I offended you though, that was not my intention.

Thanks. The tone of this entire thread was getting a bit odd, perhaps that was why you posted your previous question in such a manner.

Anyways, the display:none you highlighted would be changed to display:block in any browser capable of both writing the division and of changing its style properties. This would happen, just like in my previous example, as the page loads, only then to be made display none upon completion of the page load. You really don't want this graphic ever to be displayed in a browser that cannot change its display property dynamically, even if it can do getElementById. The likelihood of there being such a browser is slim but, nothing like this is impossible, that's what object testing is all about.

mburt
09-29-2006, 04:27 PM
Ah I see. So that's why you set the display to none.