Question

当我的网站上加载页面时，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>

Answer 1

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

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

然后使用noscript标记（在head中）在没有JavaScript的情况下修改此内容：

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

这可以确保内容在文档加载时隐藏，从而阻止了Flash，但对于禁用了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

不幸的是，我不完全确定我理解你的问题。这让我提出了一个解决方案来解决我问你你想问的问题（我可以提供的所有问题，就是它在英国的早期。而且我没有选择醒来......叹息） ;如果还有什么我想念的（或者我完全回答了错误的问题），请发表评论，我会尝试更有用。

Answer 2

linked question中的黑客在我看来是非常糟糕的建议。在这种情况下，最好在您的手风琴元素之后直接添加一些脚本

。

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

但是，与HTML标记混合的内联脚本是一个坏主意，应该尽可能避免。因此，最好只包含对外部脚本文件中声明的函数的函数调用。（当您引用外部脚本（<script src="...">）时，页面的呈现将暂停，直到加载完毕。）

<html> <head> <script type="text/javascript" src="script.js"></script>  </head> <body> ... <div id="accordion">...</div> <script type="text/javascript">renderAccordion();</script> ... </body> </html>

当然，正确的方法是从script.js附加到DOM ready事件，而根本不使用任何内联脚本。但是，这确实可以在非常慢速连接和/或非常大的文档上开启内容闪存，其中下载所有HTML本身需要几秒钟。但是，它是一种更清晰的方法 - 保证在渲染任何内容之前加载脚本;唯一的问题是DOM准备好了多长时间。在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>可以很好地保证手风琴中的所有内容都没有闪现;但是，使用该方法会有相反的效果 - 会有一个 no 内容的闪现。

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

无论如何，不要等到onload呈现您的手风琴。 onload在所有内容之前不会触发 - 包括所有图像 - 已满载。没有理由等待图像加载;你想尽快渲染你的手风琴。

如何在javascript加载之前延迟显示某些HTML

2 个答案: