How to verify if a webpage is completely loaded using javascript

Question

Hi,

I need to disable an image which I am using in <a "href"> until the page completely loads.

I cannot use document.ready() because I need to disable the the BEFORE the document is ready.

Can someone please help me with this?

Regards, Gnanesh

Answer 1

Define it in your HTML as disabled:

<button disabled="disabled">My Button</button>

And then on page load re-enable it.

This has the downside of breaking functionality for users without Javascript. The other way to do it is to add a small line of code directly after the button:

<button id="myButton">My Button</button>

<script type="text/javascript">
    document.getElementById('myButton').disabled = true;
</script>

...and then re-enable on document.load()

Edit with new info:
Is it an input with type "image"? If so, the above will still work. If not, and it's an <a> tag with an image inside it, I wouldn't recommend doing what the accepted answer suggests, sorry. Having an image suddenly appear at the end could get quite frustrating or distracting, considering that the page takes so long to load that you need to disable the link. What I'd suggest instead is this:

<a href="whatever" onclick="return myLinkHandler();"><img src="..." /></a>
<script type="text/javascript">
    var myLinkHandler = function() {
        alert('Page not loaded.');  // or something nicer
        return false;
    };
</script>

and then in your document.ready function, change the definition of the function:

myLinkHandler = function() {
    alert("Yay, page loaded.");
    return true;
};

Alternatively, you could put a check inside the function to see if the page has loaded or not.

var documentReady = false;
function myLinkHandler() {
    alert (documentReady ? "Ready!" : "Not ready!");
    return documentReady;
}

document.onload = function () { // or use jQuery or whatever
    documentReady = true;
};

Answer 2

A full code sample using jQuery:

<input type="button" value="My Button" id="mybutton" disabled="disabled" />
<script type="text/javascript">
  $(document).ready(function() { $('#mybutton').removeAttr('disabled'); });
</script>

Answer 3

In the case of the image, just set the style to display:none in the <img> tag and then use the other suggestions to remove the CSS attribute Or change it:

$(document).ready(function(){ $("#myImage").css("display","block"); });

This way, the image won't even appear until the document is ready and then the user can click on it. If you need to go the extra mile, do as the other suggested and hide/disable the link also in the tag and use jQuery to show/enable it.