如何使用javascript验证网页是否已完全加载

时间:2009-04-09 04:32:21

标签: javascript javascript-events

我需要在<a "href">中禁用我正在使用的图像,直到页面完全加载。

我无法使用document.ready(),因为我需要在文档准备好之前禁用它。

有人可以帮帮我吗?

此致 Gnanesh

3 个答案:

答案 0 :(得分:7)

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

答案 1 :(得分:5)

对于图像,只需在<img>标记中将样式设置为display:none,然后使用其他建议删除CSS属性或更改它:

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

这样,在文档准备就绪后,图像甚至不会出现,然后用户可以单击它。如果您需要加倍努力,请按照其他建议进行操作,并在标记中隐藏/禁用链接,并使用jQuery显示/启用它。

答案 2 :(得分:2)

使用jQuery的完整代码示例:

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