如何将某些 HTML 的显示延迟到 javascript 加载后
[英]How to delay the display of some HTML until after javascript has loaded
问题描述
When a page loads on my site, the HTML appears before the javascript, which leads to a flicker when the javascript loads.
在我的网站上加载页面时，HTML 出现在 javascript 之前，这会导致 javascript 加载时闪烁。 The answer to this stackoverflow post gave a great solution. 这个stackoverflow帖子的答案给出了一个很好的解决方案。 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.但是我想在 Javascript 之前至少加载一些 HTML，这样用户在连接缓慢时就不会遇到空白页。 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.例如，我想立即加载 header，但等到加载 javascript 增强型手风琴之后再加载 HTML。 Any suggestions?有什么建议么？
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>
2 个解决方案
解决方案1
3 已采纳 2011-05-25 03:39:10
I'd suggest that you define the base/JavaScript-enabled styles of elements you want to display with CSS in the regular style block:我建议您在常规style块中定义要使用 CSS 显示的元素的基本/启用 JavaScript 的 styles ：
<style type="text/css">
#javaScriptAccordion {
display: none;
}
</style>
And then use the noscript tags (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.这可确保在文档加载时隐藏内容，防止 flash，但对禁用 JavaScript 的用户可见。
The above has been amended to prevent the 'flash of no content' (as described by @Josh3736 in his answer ), and now uses opacity to 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 think you 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.如果还有什么我遗漏的（或者我完全回答了错误的问题），请发表评论，我会尽量变得更有用。
解决方案2
0 2011-05-25 04:31:59
The hack in the linked question is—in my opinion—very poor advice.在我看来， 链接问题中的技巧是非常糟糕的建议。 In this case, it is a better idea to include some script directly following your 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.但是，与您的 HTML 标记混合的内联脚本是一个坏主意，应尽可能避免。 For that reason, it is ideal to include inline only a function call to a function declared in your external script file.出于这个原因，理想的做法是仅包含对在外部脚本文件中声明的 function 的 function 调用。 (When you reference an external script ( <script src="..."> ), the rendering of your page will pause until it has loaded.) （当您引用外部脚本（ <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 correct way to do this is to just attach to the DOM ready event from script.js and not use any inline script at all.当然，正确的做法是从script.js附加到 DOM 就绪事件，根本不使用任何内联脚本。 This does, however, open up the possibility of a content flash on extremely slow connections and/or very large documents where downloading all of the HTML itself takes several seconds.但是，这确实会在极慢的连接和/或非常大的文档上打开内容 flash 的可能性，其中下载所有 HTML 本身需要几秒钟。 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.唯一的问题是准备好 DOM 需要多长时间。 Using jQuery, in script.js :在script.js中使用 jQuery：
$(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 aa good job of guaranteeing that there is no flash of all the content in your accordion; <style>和<noscript>的巧妙使用可以很好地保证手风琴中的所有内容都没有 flash； however, with that method there will be the opposite effect – there will be a flash of no content.但是，使用该方法会产生相反的效果 - 将出现没有内容的 flash。
As the page loads, your accordion will be completely hidden ( display:none; ), then once your script finally executes and sets display back to block , the accordion will suddenly materialize and push down everything below it.当页面加载时，您的手风琴将被完全隐藏（ display:none; ），然后一旦您的脚本最终执行并将display设置回block ，手风琴将突然实体化并按下它下面的所有内容。 This may or may not be acceptable – there won't be as much movement, but things will still have to jump after they've initially rendered.这可能会或可能不会被接受——不会有太多的运动，但在最初渲染之后，它们仍然必须跳跃。
At any rate, don't wait until onload to render your accordion.无论如何，不要等到onload来渲染你的手风琴。 onload doesn't fire until everything —including all images— have fully loaded.在所有内容（包括所有图像）完全加载之前， onload不会触发。 There's no reason to wait for images to load;没有理由等待图像加载； you want to render your accordion as soon as possible.你想尽快渲染你的手风琴。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.