Question

我有一个带有自定义＆＃34;新＆＃34;的SharePoint列表。和＆＃34;编辑＆＃34;形式。我使用jQuery隐藏$(document).ready()上的某些字段。

页面加载时发生的情况是，在隐藏之前，您会看到显示的所有字段（一瞬间）。看到闪光般的过渡有点不愉快。

有没有办法在加载HTML元素之前操纵它们的样式？（即：显示：无）

示例代码：

$(document).ready() {
    // Hides fields 1 and 3 on page load
    // Users can see it being hidden in fraction of a second
    $('#field-1').hide();
    $('#field-3').hide();
}

Answer 1

就个人而言，我会使用纯CSS来隐藏元素，并通过在body - 标记中添加一个类来实现。

<body class="initial-hide">
  ...
</body>

CSS会看起来像这样

body.initial-hide #element1, body.initial-hide #element2{
   display: none;
}

这样，显示隐藏元素所需要做的就是从body中删除类 - 标记以显示元素：

$(document).ready() {
    $('body').removeClass('initial-hide');
}

而不是必须选择其上的每个元素来调用它们上的.show() - 函数。

Answer 2

这是因为只有在文档准备就绪时才会触发javascript。使用Css代替javascript来隐藏元素并将其加载到页面中

<style>
#field-1,#field-3{
   display : none;
}
</style>

Answer 3

如果设置style =“display：none;”在元素上，然后使用jquery，你可以调用.show方法使它们出现。

如何在HTML元素加载到页面之前隐藏它们

3 个答案: