1

我的网页上有以下 HTML：

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

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

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

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

有谁知道我可以做些什么来减少这种延迟？例如，我可以让 wijcheckbox() 函数更早触发吗？我尝试用#htmlEdit 替换文档，但没有奏效。

4

2 回答 2

4

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

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

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

<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");
})
于 2012-04-06T16:32:28.073 回答
1

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

CSS：

#htmlEdit {
    display: none;
}

Javascript：

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

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

于 2012-04-06T16:23:26.347 回答