仅在页面完全加载时显示按钮答案

【问题标题】：display button only when page loads completely仅在页面完全加载时显示按钮
【发布时间】：2012-01-24 02:07:48
【问题描述】：

我有一个这样的按钮：

<input type="submit" id="product_197_submit_button" class="wpsc_buy_button" name="Buy" value="Add To Cart">

现在的问题是，如果用户在加载所有脚本之前单击按钮 -> 我在购物车中出现错误。有没有办法禁止点击按钮（或隐藏它）直到完整的页面加载到用户浏览器中？

谢谢，彼得

【问题讨论】：

【解决方案1】：

通过css隐藏，页面加载时显示。

CSS

.wpsc_buy_button{
   display:none;
}

JS

$(document).ready(function(){
    $("#product_197_submit_button").show();
});

或者，您可以默认禁用该按钮，然后在页面加载时启用。试试这个。

标记更改

  <input type="submit" disabled="disabled" id="product_197_submit_button" 
class="wpsc_buy_button" name="Buy" value="Add To Cart">

JS

$(document).ready(function(){
    $("#product_197_submit_button").prop("disabled", false);
});

【讨论】：

【解决方案2】：

默认禁用按钮，

<input disabled="disabled" type="submit" id="product_197_submit_button"

然后在你的 dom 准备好时启用它：

$(function() {
    $("#product_197_submit_button").prop("disabled", false);
});

【讨论】：

【解决方案3】：

$(document).ready(function() {
  $('#product_197_submit_button').show();
});

【讨论】：

【解决方案4】：

$("input.wpsc_buy_button").hide(); // unless you can use CSS
$("document").ready(function() {
    $("input.wpsc_buy_button").show();
});

如果您想等待所有图像加载而不仅仅是 DOM 使用

$(window).load(function() {

比

$("document").ready(function() {

【讨论】：

【解决方案5】：

在这种情况下不要使用$(document).ready();，因为这是在加载文档时执行的。更推荐$(window).load();，因为它是在页面完全加载（包括图像）时执行的。

编辑只需阅读它只是关于正在加载的脚本，在这种情况下使用$(document).read(); 是完全可以的@

【讨论】：