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

Question

当我的网站上加载页面时，HTML 出现在 javascript 之前，这导致 javascript 加载时出现闪烁。 this stackoverflow post的答案给了一个很好的解决方案。但我想在 Javascript 之前至少加载一些 HTML，以便用户在连接速度慢时不会遇到空白页面。例如，我想立即加载 header ，但要等到 javascript 加载后再加载 javascript 增强 Accordion 的 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 block 中定义要使用 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 .

不幸的是，我不能完全确定我理解您的问题。这让我为你问的我认为的问题提出了一个解决方案(我能提供的，作为借口，是在英国的早期。而且我没有选择醒来......叹气) ;如果还有什么我遗漏的(或者我完全回答了错误的问题)，请发表评论，我会尽力提供更多帮助。