How to check if a webpage is fully loaded using javascript

Question

I need to turn off the image that I use in <a "href"> until the page has fully loaded.

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

Can someone please help me with this?

Regards, Gnanesh

Answer 1

Define this in your HTML as disabled:

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

And then on page load, turn it back on.

This has a lack of hacking functionality for users without Javascript. Another way to do this is to add a small line of code immediately after the button:

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

... and then turn it back on document.load ()

Edit with new information :
Is it input with an image type? If so, then the above will still work. If not, and this is the <a> tag with the image inside it, I would not recommend doing what the accepted answer offers, sorry. Having an image that suddenly appears at the end can be quite unpleasant or distracting, given that the page has taken so long to load, you need to disable the link. Instead, I suggest the following:

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

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

Alternatively, you can put a check inside the function to see if the page is 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

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

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

Thus, the image will not even appear until the document is ready, and then the user can click on it. If you need to go the extra mile, do what you propose another and hide / disable the link in the tag and use jQuery to show / enable it.

Answer 3

Full sample code using jQuery:

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