Как проверить, полностью ли загружена веб-страница с использованием JavaScript

Question

Мне нужно отключить изображение, которое я использую в <a "href"> до полной загрузки страницы.

Я не могу использовать document.ready(), потому что мне нужно отключить ДО того, как документ будет готов.

Может кто-нибудь помочь мне с этим?

С уважением, Gnanesh

Answer 1

Определите его в своем HTML как отключенный:

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

А затем при загрузке страницы включите его снова.

Это имеет обратную сторону ломать функциональность для пользователей без Javascript. Другой способ сделать это - добавить небольшую строку кода сразу после кнопки:

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

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

... и затем снова включите для document.load ()

Редактировать с новой информацией :
Это input с типом "изображение"? Если это так, выше все равно будет работать. Если нет, то это тег <a> с изображением внутри, я бы не рекомендовал делать то, что предлагает принятый ответ, извините. Внезапное появление изображения в конце может стать довольно неприятным или отвлекающим, учитывая, что загрузка страницы занимает так много времени, что вам нужно отключить ссылку. Вместо этого я бы предложил следующее:

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

и затем в функции document.ready измените определение функции:

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

В качестве альтернативы, вы можете поставить проверку внутри функции, чтобы увидеть, загружена страница или нет.

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

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

Answer 2

В случае с изображением, просто установите стиль отображения: нет в теге <img>, а затем используйте другие предложения для удаления атрибута CSS или измените его:

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

Таким образом, изображение даже не появится, пока документ не будет готов, а затем пользователь сможет щелкнуть по нему. Если вам нужно пройти лишнюю милю, сделайте то, что предложили другие, и скрыте / отключите ссылку также в теге и используйте jQuery, чтобы показать / включить ее.

Answer 3

Полный пример кода с использованием jQuery:

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