如何延迟某些 HTML 的显示，直到 javascript 加载后
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6119171/
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
How to delay the display of some HTML until after javascript has loaded
提问by Ken
When a page loads on my site, the HTML appears before the javascript, which leads to a flicker when the javascript loads. The answer to this stackoverflow postgave a great solution. But I would like to load at least some of the HTML before the Javascript so that the user is not faced with a blank page during a slow connection. For example, I would like to load the header immediately, but wait to load the HTML for the javascript enhanced accordion until after the javascript loads. Any suggestions?
当页面在我的网站上加载时，HTML 出现在 javascript 之前，这会导致在 javascript 加载时闪烁。这个stackoverflow帖子的答案提供了一个很好的解决方案。但我想在 Javascript 之前至少加载一些 HTML，以便用户在慢速连接期间不会遇到空白页面。例如，我想立即加载标题，但要等到 javascript 加载后加载 javascript 增强型手风琴的 HTML。有什么建议？
Here's the code that I borrowed from the answer linked above:
这是我从上面链接的答案中借用的代码：
CSS:
CSS：
#hideAll
{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: white;
z-index: 99; /* Higher than anything else in the document */
}
HTML:
HTML：
<div style="display: none" id="hideAll"> </div>
Javascript
Javascript
window.onload = function()
{ document.getElementById("hideAll").style.display = "none"; }
<script type="text/javascript">
document.getElementById("hideAll").style.display = "block";
</script>
采纳答案by David says reinstate Monica
I'd suggest that you define the base/JavaScript-enabled styles of elements you want to display with CSS in the regular styleblock:
我建议您定义要在常规style块中使用 CSS 显示的元素的基本/启用 JavaScript 样式：
<style type="text/css">
#javaScriptAccordion {
display: none;
}
</style>
And then use the noscripttags (in the head) to amend this in the absence of JavaScript:
然后在没有 JavaScript 的情况下使用noscript标签（在 中head）来修改它：
<noscript>
<style type="text/css>
#javaScriptAccordion {
display: block;
}
</style>
</noscript>
This ensures that the content is hidden on document load, preventing the flash, but visible to those users that have JavaScript disabled.
这确保内容在文档加载时隐藏，防止闪现，但对禁用 JavaScript 的用户可见。
The above has been amendedto prevent the 'flash of no content' (as described by @Josh3736 in his answer), and now uses opacityto hide the content:
上面已修改以防止“无内容闪烁”（如@Josh3736 在他的回答中所述），现在用于opacity隐藏内容：
<style type="text/css">
#elementToShowWithJavaScript {
opacity: 0.001;
width: 50%;
margin: 0 auto;
padding: 0.5em;
border-radius: 1em 0;
border: 5px solid #ccc;
}
</style>
<noscript>
<style type="text/css">
#elementToShowWithJavaScript {
opacity: 1;
}
</style>
</noscript>
现场演示。
I'm not, unfortunately, entirely sure that I understand your question. Which leaves me proposing a solution for the question I thinkyou asked (all I can offer, in excuse, is that it's early in the UK. And I'm not awake by choice...sigh); if there is anything further that I'm missing (or I'm answering the wrong question entirely) please leave a comment, and I'll try to be more useful.
不幸的是，我不完全确定我理解你的问题。这让我为我认为你问的问题提出了一个解决方案（我只能提供一个借口，这是在英国的早期。而且我不是选择醒来......叹气）；如果还有什么我遗漏了（或者我完全回答了错误的问题），请发表评论，我会尽力提供更多帮助。
回答by josh3736
The hack in the linked questionis—in my opinion—very poor advice. In this case, it is a better idea to include some script directly followingyour accordion elements.
在我看来，链接问题中的黑客是非常糟糕的建议。在这种情况下，最好在手风琴元素之后直接包含一些脚本。
<div id="accordion">...</div>
<script type="text/javascript">...</script>
However, inline script intermingled with your HTML markup is a Bad Idea and should be avoided as much as possible. For that reason, it is ideal to include inline only a function call to a function declared in your external script file. (When you reference an external script (<script src="...">), the rendering of your page will pause until it has loaded.)
但是，与 HTML 标记混合的内联脚本是一个坏主意，应尽可能避免。出于这个原因，理想的做法是仅包含对外部脚本文件中声明的函数的内联函数调用。（当您引用外部脚本 ( <script src="...">) 时，页面的呈现将暂停，直到加载完毕。）
<html>
<head>
<script type="text/javascript" src="script.js"></script> <!-- renderAccordion() defined in this file -->
</head>
<body>
...
<div id="accordion">...</div>
<script type="text/javascript">renderAccordion();</script>
...
</body>
</html>
Of course, the correctway to do this is to just attach to the DOM ready event from script.jsand not use any inline script at all. This does, however, open up the possibility of a content flash on extremelyslow connections and/or very large documents where downloading all of the HTML itself takes several seconds. It is, however, a much cleaner approach – your script is guaranteed to be loaded before anything is rendered; the only question is how long it takes for DOM ready. Using jQuery, in script.js:
当然，正确的方法是只附加到 DOM 就绪事件，script.js而根本不使用任何内联脚本。这不，但是，开辟内容闪光的可能性就非常缓慢的连接和/或非常大的文件，其中下载所有本身需要几秒钟的HTML。然而，这是一种更简洁的方法——保证在渲染任何内容之前加载您的脚本；唯一的问题是 DOM 准备好需要多长时间。使用 jQuery，在script.js：
$(document).ready(function() {
// Do whatever with your accordion here -- this is guaranteed to execute
// after the DOM is completely loaded, so the fact that this script is
// referenced from your document's <head> does not matter.
});
Clever use of <style>and <noscript>does a a good job of guaranteeing that there is no flash of all the content in your accordion; however, with that method there will be the oppositeeffect – there will be a flash of nocontent.
巧妙运用<style>并<noscript>做好了保证手风琴中所有内容不闪现；然而，使用这种方法会产生相反的效果——会出现一闪而过的无内容。
As the page loads, your accordion will be completely hidden (display:none;), then once your script finally executes and sets displayback to block, the accordion will suddenly materialize and push down everything below it. This may or may not be acceptable – there won't be as muchmovement, but things will still have to jump after they've initially rendered.
当页面加载时，您的手风琴将被完全隐藏 ( display:none;)，然后一旦您的脚本最终执行并设置display回block，手风琴将突然出现并将其下方的所有内容向下推。这可能会也可能不会被接受——不会有那么多的运动，但在最初渲染之后，事物仍然必须跳跃。
At any rate, don't wait until onloadto render your accordion.onloaddoesn't fire until everything—including all images— have fully loaded. There's no reason to wait for images to load; you want to render your accordion as soon as possible.
无论如何，不要等到onload渲染你的手风琴。onload直到所有内容（包括所有图像）都完全加载后才会触发。没有理由等待图像加载；你想尽快渲染你的手风琴。
