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)

Code:

<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

Originally Posted by mburt

Code:

onload = function() {
var obj = document.getElementById("img")
if (!document.readyState) {
	obj.style.display = "block"
	}
else {
	obj.style.display = "none"
	}
}

Code:

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.

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

Originally Posted by mwinter

Code:

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...:

Code:

<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:

Code:

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

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

In a script element in the document body:

Code:

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:

Code:

<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

Thread: Loading Image

Thread Tools

Search Thread

Loading Image

Bookmarks

Bookmarks

Posting Permissions