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

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

javascript

如何将某些HTML的显示延迟到加载javascript之后,javascript,flicker,Javascript,Flicker,当页面加载到我的网站上时，HTML会出现在javascript之前，这会导致javascript加载时闪烁。这个问题的答案给出了一个很好的解决方案。但是我想在Javascript之前加载至少一些HTML，这样用户在慢速连接时就不会面临空白页面。例如，我想立即加载标题，但要等到加载javascript之后再加载javascript增强手风琴的HTML。有什么建议吗下面是我从上面链接的答案中借用的代码： CSS: HTML: Javascript window.onload = functi

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

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

CSS:

HTML:

Javascript

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

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

window.onload=function（）
{document.getElementById（“hideAll”）.style.display=“无”；}
document.getElementById（“hideAll”）.style.display=“block”；

我建议您定义要在常规

样式

块中使用CSS显示的元素的基本/JavaScript启用样式：

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

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

上述内容已被修改以防止“无内容闪现”（如所述），现在使用

不透明度

隐藏内容：

<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>


#elementToShowWithJavaScript{
不透明度：0.001；
宽度：50%；
保证金：0自动；
填充：0.5em；
边界半径：1米0；
边框：5px实心#ccc；
}
#elementToShowWithJavaScript{
不透明度：1；
}

不幸的是，我不能完全肯定我理解你的问题。这就让我为你提出的问题提出了一个解决方案（作为借口，我所能提供的是，这在英国还很早。我不是自愿醒来的……唉）；如果我还遗漏了什么（或者我回答的问题完全错了），请留下评论，我会尽量发挥我的作用。

在我看来，这是一个非常糟糕的建议。在这种情况下，最好在手风琴元素之后直接加入一些脚本

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

确保手风琴中的所有内容都不会闪烁；然而，使用这种方法会产生相反的效果——会有一瞬间没有内容

当页面加载时，您的手风琴将完全隐藏（

display:none；

），然后一旦脚本最终执行并将

display

设置回

block

，手风琴将突然具体化并按下其下方的所有内容。这可能是可以接受的，也可能是不可以接受的——不会有那么多的移动，但在最初渲染之后，仍然需要跳转

无论如何，不要等到
onload
渲染手风琴。

onload

直到所有图像都已完全加载后才会启动。没有理由等待图像加载；您希望尽快渲染手风琴。

@David Thomas谢谢。听起来你明白我的问题了。但是，简言之，我希望在加载javascript之前防止加载受javascript影响的HTML，同时允许尽快加载不受javascript影响的HTML（例如，页眉等）。在寻求更多帮助之前，我只是想看看我是否能实现你的解决方案…@Ken:哦…出于某种原因，我认为“加载”意味着“显示”。HTML本机不允许选择性加载内容；它要么在那里，要么不在那里。@davidthomas我基本上只是试图避免在加载Javascript之前显示HTML时出现的闪烁。我很抱歉使用了错误的术语。现在已经很晚了，我是个新手——我想这是一个糟糕的组合。@Ken，现在还早，我累了。所以…一个特别不幸的组合，真的…=）但不用担心。我已经修改了演示，使用

opacity

而不是

display

来隐藏要显示的内容。这可以防止“无内容闪现”。@David：更适合使用

可见性：隐藏，它不会像显示：无那样折叠内容块
和IE缺乏对不透明度的支持。但是，（无论您使用的是不透明度
还是可见性
），这种方法仍然会导致内容一闪而过。例如，如果每个手风琴窗格为200px，有5个窗格，则手风琴占用的空间为1000px。当脚本运行并隐藏这5个窗格中的4个时，手风琴
现在将仅为200px，使页面的其余部分跳到800px，这是一个令人讨厌的闪存。那么使用onload有什么问题？当页面打开时，它将运行脚本loaded@Ibu：onload在加载所有内容（包括图像）之前不会启动。在慢速连接上，这可能是一个很长的延迟。用于此类文档操作的适当事件是。
<noscript>
    <style type="text/css>
        #javaScriptAccordion {
            display: block;
        }
    </style>
</noscript>

<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>

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

<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>

$(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.
});