Question

我的网页上有以下HTML：

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

页面加载后，复选框使用wijmo进行样式设置，如下所示：

   $(document).ready(function () {
      var store = window.localStorage;
      $('#htmlEdit').wijcheckbox();

这有效，但我遇到的问题是页面之间有1-2秒的延迟显示和元素风格。在那段延迟期间，我看到旧式的复选框。

有谁知道我可以做些什么来减少这种延迟？我可以举例说 wijcheckbox（）函数更早开火？我尝试用#htmlEdit替换文档，但是没用。

Answer 1

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

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

在给定对象上运行javascript的最快方法是在HTML源代码中的元素之后立即放置内联javascript：

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

然而，如果你必须做很多事情，这很快就会变得混乱，散布你的标记和JS通常不是一个好主意。

所以，如果你不能用CSS来设置它的样式，那么你可能最好先将对象隐藏起来，然后只有在你的JS设置它之后再显示它。

<input id="htmlEdit" type="checkbox" style="visibility: hidden" />

然后，在你对其进行适当的样式设置之后，让它在你的JS中可见：

$(document).ready(function() {
    $('#htmlEdit').wijcheckbox().css("visibility", "visible");
})

注意：我在这里使用了visibility: hidden而不是display: none，因为您的页面将正确布局，当复选框变得可见时，页面将不会重新布局，从而导致事物跳转。这似乎比看到没有复选框的布局更好，然后在复选框变得可见时看到它重新定位。如果新的复选框样式显着不同，则在添加新样式时它仍然可能会稍微移位，但在使用可见性时则不会显着。

如果你有很多这些，你可以用课程自动化：

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

CSS：

/* initially hidden until wij style is applied */
.styledCheckbox {visibility: hidden;}

使用Javascript：

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

Answer 2

您无法减少文档加载时间，但您可以尝试这样做：

<强> CSS：

#htmlEdit {
    display: none;
}

<强>使用Javascript：

$(document).ready(function() {
    var store = window.localStorage;
    $('#htmlEdit').wijcheckbox();
    $('#htmlEdit').show();
});

隐藏元素直到它的样式正确。

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

2 个答案: