如何在页面加载之前隐藏 HTML 元素
Posted
技术标签:
【中文标题】如何在页面加载之前隐藏 HTML 元素【英文标题】：How to hide HTML elements before they load on the page 【发布时间】：2014-09-29 15:18:43 【问题描述】：我有一个包含自定义“新建”和“编辑”表单的 SharePoint 列表。我正在使用 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();
【问题讨论】：
您基本上自己回答了这个问题。只需使用display:none 用纯 CSS 隐藏它们。也许在body 中添加一个类 - 用于隐藏所有子项的标签，并在加载所有内容时删除该类
使用 CSS 而不是 javascript？
@GNi33 嗨，问题是 SharePoint 没有为这些 就个人而言，我会使用纯 CSS 来隐藏元素，并通过向 body - 标签添加一个类来实现。
<body class="initial-hide">
...
</body>
CSS 看起来像这样
body.initial-hide #element1, body.initial-hide #element2
display: none;
这样，显示隐藏元素所需要做的就是从body-tag中移除class来显示元素：
$(document).ready()
$('body').removeClass('initial-hide');
不必单独选择每个元素来调用.show() - 函数。
【讨论】：
啊，我用 body display: none; 并在加载完所有字段后显示它。 @MarloC 好吧，如果您希望隐藏整个页面而不仅仅是特定元素，这是实现此目的的简单方法。 我只想隐藏特定元素，但为了让他们看不到过渡，我决定将 body 样式设置为“隐藏”。并在 jQuery 隐藏元素完成后显示它。 @GNi33 这真的很聪明。我比我更喜欢你的回答:) 我使用了这个答案，但在页面完全加载之前，我仍然可以看到 div 片刻。知道可能出了什么问题吗？【参考方案2】：这是因为您的 javascript 仅在文档准备好时才会触发。 使用 Css 而不是 javascript 来隐藏元素并将其加载到您的页面中
<style>
#field-1,#field-3
display : none;
</style>
【讨论】：
我只是使用了field-1和field-3作为参考，对此我深表歉意。 SharePoint 并没有真正将任何 id 或类放入如果你设置 style="display:none;"在元素上，然后稍后使用 jquery 可以调用 .show 方法使它们出现。
【讨论】：
我为 body display: none 做了它，并在一切完成后使用 $('body').show() 。谢谢！以上是关于如何在页面加载之前隐藏 HTML 元素的主要内容，如果未能解决你的问题，请参考以下文章