Question

我有一个使用jQuery和chosen设置样式的选择框但是因为脚本在$(document).ready之后执行，所以会显示原始选择框的瞬间，特别是如果连接速度很慢。

因为我把选择框放在一个表中，所以已经有一个分配的空间，所以它不会损害页面的渲染。

在加载页面后，我可以将此元素操作为解析吗？这样，选择框的原始样式就不会显示这是解决这个问题的正确方法吗？

示例代码：

<div id="header">
    <table>
        <tr>
            <td style="width:25%"></td>
            <td style="width:50%"></td>
            <td style="width:25%"><select class="chosen">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select></td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $(".chosen").chosen({width: "75%", disable_search: true});
    });
</script>

Answer 1

以下是我将如何处理这种情况。默认情况下，您可以将.chosen设置为display: none;。

然后你可以像这样编写你的JavaScript。

var sChosen = $(".chosen");
sChosen.chosen({width: "75%",disable_search: true});
sChosen.show(); // show the element after chosen() has taken effect

<强>更新

CSS

.chosen {
    visibility: hidden;
}

的JavaScript

var sChosen = $(".chosen");
sChosen.chosen({width: "75%",disable_search: true});
sChosen.css('visibility', 'visible'); // show the element after chosen() has taken effect

文档加载后我可以解析DOM元素吗？

1 个答案: