How To Verify If A Webpage Is Completely Loaded Using Javascript

I need to disable an image which I am using in until the page completely loads. I cannot use document.ready() because I need to disable the the BEFORE the document

Solution 1:

Define it in your HTML as disabled:

<buttondisabled="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:

<buttonid="myButton">My Button</button><scripttype="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:

<ahref="whatever"onclick="return myLinkHandler();"><imgsrc="..." /></a><scripttype="text/javascript">var myLinkHandler = function() {
        alert('Page not loaded.');  // or something nicerreturnfalse;
    };
</script>

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

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

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

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

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

Solution 2:

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.

Solution 3:

A full code sample using jQuery:

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