javascript 更改 div 以显示 :none - prevent displaying divs before javascript runs?

Question

我有一个函数 shoh() 可以切换 div 的状态 - 显示或隐藏它。加载页面时，通过将样式更改为 display:none，重复调用 shoh($id) 以隐藏页面上的每个 div。如果用户想要查看隐藏的 div 中的数据，他们单击带有 onClick="show($id)"的链接以将 div 样式更改为 display:block。这一切都很好。

即使禁用了 javascript，我也希望该页面能够正常工作，因此我必须将 div 默认设置为可见，否则没有 javascript 的用户将永远无法看到数据。问题是当页面加载时，所有 div 都显示为可见，并且页面需要在隐藏 div 之前完全加载。这在美学上很差，并且会造成视觉困惑，因为页面可能需要几秒钟才能加载。

有什么方法可以防止屏幕在 javascript 有机会运行之前显示 div？我不介意显示“正在加载...”之类的东西。提前致谢。

//toggle state of div - show OR hide - default is hidden
function shoh(id, cmd) { 
// if cmd is not blank, clicked on button to expand all or collapse all
cmd = typeof cmd !== 'undefined' ? cmd : '';
if (document.getElementById(id)){
    if ((document.getElementById(id).style.display == "none" || cmd=='show') && cmd!=='hide'){
        //show
        document.getElementById(id).style.display = 'block';
        filter(("img"+id),'imgin');
        setCookie(window.location.pathname + ":" + id, "show", 365)
    } else {
        //hide
        document.getElementById(id).style.display = 'none';         
        filter(("img"+id),'imgout');
        deleteCookie(window.location.pathname + ":" +id);
    }   
}   
}

Answer 1

使用 document.write 将整个内容包装在一个未显示的 div 中，然后在 JavaScript 中显示它。如果客户端没有 JS，则不会呈现 document.write，也不需要显示它的最终调用。

将此脚本放在行内，而不是放在标题中..

<script type='text/javascript'>
    document.write("<div id='hideWhileRendering' style='diplay: none;'>");
</script>

... then rest of your divs ...

<script type='text/javascript'>
    document.write("</div>");
</script>

然后使用 onload 函数将显示更改为 show。如果没有运行 JS，那么所有这些都将被忽略。如果 JS 运行，那么在 onload 完成之前它都是不可见的。