如何使jQuery样式更早地成为我的元素？

我的网页上有以下HTML：

<input id="htmlEdit" type="checkbox"/>

这是可行的，但我有一个问题，页面之间有1-2秒的延迟 显示并设置元素的样式。在这段时间里，我看到了旧样式的复选框

有人知道我能做些什么来减少延误吗？例如，我可以做一个例子吗 wijcheckbox函数是否提前启动？我试着用htmlEdit替换文档，但是

---

不起作用。

您无法减少文档加载时间，但您可以尝试以下方法：

CSS:

Javascript:

$(document).ready(function() {
    // add style to all checkboxes and make them visible
    $('.styledCheckbox').wijcheckbox().css("visibility", "visible");
})

---

这将隐藏元素，直到其样式正确。

您无法减少文档加载时间，但您可以尝试以下方法：

CSS:

Javascript:

$(document).ready(function() {
    // add style to all checkboxes and make them visible
    $('.styledCheckbox').wijcheckbox().css("visibility", "visible");
})

---

这会隐藏元素，直到其样式正确。

这里的挑战是，为了通过javascript访问DOM元素，浏览器必须已经解析了DOM元素，一旦浏览器解析了它，它可能已经显示在屏幕上，除非它被设置为不可见

这里最好的答案是通过CSS样式控制初始外观，因为这将在解析项目时生效，并且它的第一次显示将包含CSS样式

在给定对象上运行javascript的最快方法是将内联javascript直接放在HTML源中的元素之后：

<input id="htmlEdit" type="checkbox"/>
<script type="text/javascript>
$('#htmlEdit').wijcheckbox();
</script>

注意：我使用了visibility:hidden here而不是display:none，因为您的页面将正确布局，并且当复选框变为可见时，页面将不会重新显示，因为这会导致事情发生跳跃。这似乎比在没有复选框的情况下查看布局更可取，然后在复选框可见时看到布局重新定位。如果新的复选框样式有显著的不同，则在添加新样式时，复选框样式仍可能会有一点变化，但在使用可见性时不会有太大的变化

如果你有一堆这样的东西，你可以用一个类使它自动化：

<input class="styledCheckbox" id="htmlEdit" type="checkbox">

Javascript:

$(document).ready(function() {
    // add style to all checkboxes and make them visible
    $('.styledCheckbox').wijcheckbox().css("visibility", "visible");
})

---

这里的挑战是，为了通过javascript访问DOM元素，浏览器必须已经解析DOM元素，一旦浏览器解析了它，它可能已经显示在屏幕上，除非它被设置为不可见

这里最好的答案是通过CSS样式控制初始外观，因为这将在解析项目时生效，并且它的第一次显示将包含CSS样式

在给定对象上运行javascript的最快方法是将内联javascript直接放在HTML源中的元素之后：

<input id="htmlEdit" type="checkbox"/>
<script type="text/javascript>
$('#htmlEdit').wijcheckbox();
</script>

注意：我使用了visibility:hidden here而不是display:none，因为您的页面将正确布局，并且当复选框变为可见时，页面将不会重新显示，因为这会导致事情发生跳跃。这似乎比在没有复选框的情况下查看布局更可取，然后在复选框可见时看到布局重新定位。如果新的复选框样式有显著的不同，则在添加新样式时，复选框样式仍可能会有一点变化，但在使用可见性时不会有太大的变化

如果你有一堆这样的东西，你可以用一个类使它自动化：

<input class="styledCheckbox" id="htmlEdit" type="checkbox">

Javascript:

$(document).ready(function() {
    // add style to all checkboxes and make them visible
    $('.styledCheckbox').wijcheckbox().css("visibility", "visible");
})

---

非常感谢你花时间给出一个好的答案。非常感谢你花时间给出一个好的答案。

$(document).ready(function() {
    // add style to all checkboxes and make them visible
    $('.styledCheckbox').wijcheckbox().css("visibility", "visible");
})