如何使用javascript驗證網頁是否已完全加載

[英]How to verify if a webpage is completely loaded using javascript


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.

我不能使用document.ready()因為我需要在文檔准備好之前禁用它。

Can someone please help me with this?

有人可以幫我這個嗎?

Regards, Gnanesh

3 个解决方案

#1


Define it in your HTML as disabled:

在HTML中將其定義為已禁用:

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

這對於沒有Javascript的用戶而言具有破壞功能的缺點。另一種方法是在按鈕后直接添加一小段代碼:

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

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

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

...然后在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:

使用新信息進行編輯:是否為“image”類型的輸入?如果是這樣,以上仍然有效。如果沒有,並且它是一個帶有圖像的標簽,我不建議做那個接受的答案建議,對不起。在最后突然出現圖像可能會非常令人沮喪或分心,考慮到頁面需要很長時間才能加載,您需要禁用鏈接。我建議改為:

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

然后在你的document.ready函數中,更改函數的定義:

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

#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"); });

對於圖像,只需在標簽中將樣式設置為display:none,然后使用其他建議刪除CSS屬性或更改它:$(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.

這樣,在文檔准備好之后圖像甚至不會出現,然后用戶可以單擊它。如果您需要加倍努力,請按照其他建議進行操作,並在標記中隱藏/禁用鏈接,並使用jQuery顯示/啟用它。

#3


A full code sample using jQuery:

使用jQuery的完整代碼示例:

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

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2009/04/09/7254a5bd2655efe0a751ad36d0589821.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com