javascript $(document).ready 之前的事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7133514/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Events before $(document).ready
提问by Abishek
I have a functionality to hide controls conditionally before the document is loaded. If I put this functionality on $(document).ready, I see the page flickering to hide the controls conditionally. I would like to know if there is an event that can be called before $(document).readyis triggered.
我有一个功能，可以在加载文档之前有条件地隐藏控件。如果我将此功能放在 上$(document).ready，我会看到页面闪烁以有条件地隐藏控件。我想知道是否有可以在$(document).ready触发之前调用的事件。
采纳答案by kobe
As others mentioned do something like this
正如其他人提到的那样做这样的事情
<div id="test" class="hidden"> my hidden div tag </div>
.hidden
{
display:none;
}
in the document.ready , you can show , this is equivalent of onload , which waits till html is loaded
在 document.ready 中，你可以显示，这相当于 onload ，它等待 html 被加载
$(document).ready(function() {
$('#test').show();
});
jsfiddle example here
jsfiddle 示例在这里
回答by jfriend00
Common issue. Use CSS to have the controls hidden by default and then use JS upon $(document).readyto decide which controls to make visible. There will be no flicker. It will just look like the appropriate parts of the page are loading progressively.
常见问题。使用 CSS 默认隐藏控件，然后使用 JS$(document).ready决定让哪些控件可见。不会有闪烁。它看起来就像页面的适当部分正在逐步加载。
You can't safely run JS before the document is ready and parts of the document will be visible before you can run JS. So, the only solution is to make sure all non-flicker elements are hidden by default and you then only show the ones you want visible.
在文档准备好之前，您无法安全地运行 JS，并且在您可以运行 JS 之前，文档的某些部分将是可见的。因此，唯一的解决方案是确保默认情况下隐藏所有非闪烁元素，然后只显示您希望可见的元素。
The simplest way to do this is to just put a common class on all dynamic elements:
最简单的方法是在所有动态元素上放置一个公共类：
<div id="myControl1" class="initiallyHidden"></div>
and use CSS to make sure they all start out hidden:
并使用 CSS 确保它们一开始都是隐藏的：
.initiallyHidden {display: none;}
And then your javascript will override that when it decides an element should be visible:
然后你的javascript将在它决定一个元素应该可见时覆盖它：
document.getElementById("myControl1").style.display = "block";
回答by Austin Ginder
When I've needed to hide something before Javascript is loaded I would set it hidden in css like so:
当我需要在加载 Javascript 之前隐藏某些东西时，我会将它设置为隐藏在 css 中，如下所示：
display:none;
or:
或者：
visibility: hidden;
You can also use conditions in combination with Javascript to reveal it if need be.
如果需要，您还可以将条件与 Javascript 结合使用以显示它。
回答by Chamika Sandamal
call the JavaScript function in next to HTML element
在 HTML 元素旁边调用 JavaScript 函数
ex:
前任：
<span></span>
<script> call JS function</script>
回答by MaxiWheat
You can just open a script tag right after the HTML you want to hide condionnaly (jQuery must be declared before however) and then call hide directly, not inside a $(document).ready like this :
您可以在要隐藏的 HTML 之后立即打开一个脚本标记（但是必须在之前声明 jQuery），然后直接调用 hide，而不是在 $(document).ready 中，如下所示：
<div id="toHide">Lorem ipsum</div>
<script type="text/javascript">
$("#toHide").hide();
</script>
回答by genesis
You have to put your elements BEFORE running your javascript
您必须在运行 javascript 之前放置您的元素
<div>hi</div>
<script>
$("div").css('background-color', '#EEE');
</script>
