如何使用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>標記中將樣式設置為display：none，然后使用其他建議刪除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>