如何将某些 HTML 的显示延迟到加载 javascript 之后答案

【问题标题】：How to delay the display of some HTML until after javascript has loaded如何将某些 HTML 的显示延迟到加载 javascript 之后
【发布时间】：2011-09-01 10:16:20
【问题描述】：

当我的网站上加载页面时，HTML 出现在 javascript 之前，这会导致 javascript 加载时闪烁。 this stackoverflow post 的答案给出了一个很好的解决方案。但我想在 Javascript 之前至少加载一些 HTML，这样用户在连接缓慢时就不会面对空白页面。例如，我想立即加载标题，但要等到加载 javascript 后才加载 javascript 增强手风琴的 HTML。有什么建议？

这是我从上面链接的答案中借用的代码：

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：

<div style="display: none" id="hideAll">&nbsp;</div>

Javascript

 window.onload = function() 
     { document.getElementById("hideAll").style.display = "none"; }

<script type="text/javascript">
   document.getElementById("hideAll").style.display = "block";
 </script>

【问题讨论】：

那么使用onload有什么问题呢？它会在页面加载时运行你的脚本
@Ibu：onload 直到 所有内容（包括图像）都加载完毕后才会触发。对于慢速连接，这可能是一个很长的延迟。用于此类文档操作的适当事件是 DOM ready。

标签： javascript flicker

【解决方案1】：

我建议您在常规 style 块中定义要使用 CSS 显示的元素的基本/启用 JavaScript 样式：

<style type="text/css">
    #javaScriptAccordion {
        display: none;
    }
</style>

然后在没有JavaScript的情况下使用noscript标签（在head中）修改这个：

<noscript>
    <style type="text/css>
        #javaScriptAccordion {
            display: block;
        }
    </style>
</noscript>

这可确保在加载文档时隐藏内容，防止闪烁，但对禁用 JavaScript 的用户可见。

以上已修改以防止“无内容闪现”（如@Josh3736 in his answer所述），现在使用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>

Live demo.

很遗憾，我不能完全确定我理解您的问题。这让我为我认为你提出的问题提出了一个解决方案（我只能提供一个借口，就是现在在英国还早。而且我没有选择醒来......叹息） ;如果还有什么我遗漏的（或者我完全回答了错误的问题），请发表评论，我会尽力变得更有用。

【讨论】：

@David Thomas 谢谢。听起来你明白我的问题。但是，简而言之，我想阻止受 javascript 影响的 HTML 在加载 javascript 之后加载，同时允许不受 javascript 影响的 HTML 尽快加载（例如，标题等）。在寻求更多帮助之前，我只是想看看是否可以实施您的解决方案......
@Ken：哦……出于某种原因，我认为“加载”是指“显示”。 HTML 本身不允许选择性的内容加载；它要么存在，要么不存在。
@David Thomas 我基本上只是想避免在加载 Javascript 之前显示 HTML 时发生的闪烁。对于使用错误的术语，我深表歉意。来晚了，我是个新手——我想这是个糟糕的组合。
@Ken，时间还早，我累了。所以......一个特别不幸的组合，真的...... =）但不用担心。我已将演示修改为使用opacity 而不是display 来隐藏要显示的内容。这可以防止“无内容闪现”described by @josh3736.
@David：用visibility:hidden;比较合适，不会像display:none;那样折叠内容块，也不会碰到IE不支持opacity的问题。但是，（无论您使用的是opacity 还是visibility）这种方法仍然会导致内容一闪而过。例如，如果每个手风琴窗格为 200 像素，有 5 个窗格，则手风琴占用了 1000 像素的空白空间。当脚本运行并隐藏这 5 个窗格中的 4 个时，手风琴 <div> 现在将只有 200 像素，使页面的其余部分跳高 800 像素，这是一个令人讨厌的闪光。

【解决方案2】：

linked question 中的 hack 在我看来是非常糟糕的建议。在这种情况下，最好包含一些脚本直接跟随您的手风琴元素。

<div id="accordion">...</div>
<script type="text/javascript">...</script>

但是，与 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>

当然，正确的方法是从script.js 附加到DOM 就绪事件，根本不使用任何内联脚本。然而，这确实会在非常缓慢的连接和/或下载所有 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> 很好地保证了手风琴中的所有内容都没有闪现；但是，使用该方法会产生相反的效果 - 会出现 no 内容的闪光。

当页面加载时，您的手风琴将被完全隐藏（display:none;），然后一旦您的脚本最终执行并将display 设置回block，手风琴将突然实体化并将其下方的所有内容推下。这可能会也可能不会被接受 - 不会有那么多移动，但在最初渲染之后仍然需要跳跃。

无论如何，不要等到onload 渲染你的手风琴。onload 直到所有的东西——包括所有的图像——完全加载。没有理由等待图像加载；你想尽快渲染你的手风琴。

【讨论】：