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

kd3sttzy  于 2022-12-28  发布在  Java
关注(0)|答案(3)|浏览(102)

我需要禁用我在<a "href">中使用的图像,直到页面完全加载。
我不能使用document.ready(),因为我需要在文档准备好之前禁用。
有人能帮我一下吗?

kgsdhlau

kgsdhlau1#

在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()

使用新信息编辑

它是一个类型为“image”的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;
};
uxhixvfz

uxhixvfz2#

对于图像,只需在<img>标签中将样式设置为display:none,然后使用其他建议删除CSS属性或更改它:
$(document).ready(function(){ $("#myImage").css("display","block"); });
这样的话,图像甚至不会出现,直到文档准备好,然后用户可以点击它。如果你需要做额外的工作,按照另一个建议,隐藏/禁用标签中的链接,并使用jQuery来显示/启用它。

piok6c0g

piok6c0g3#

使用jQuery的完整代码示例:

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

相关问题