Question

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

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

有没有办法阻止屏幕显示div，直到javascript有机会运行？我不介意显示“正在加载......”或其他东西。提前谢谢。

//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完成之前它将全部隐藏。

Answer 2

放置使DIV在<noscript>：

中可见的CSS

<style>
    #hideWhileRendering {
        display: none;
    }
</style>
<noscript>
<style>
    #hideWhileRendering {
        display: block;
    }
</style>
</noscript>

第二个样式块将覆盖第一个样式块，但仅限于JS被禁用时。

javascript将div更改为display：none - 在javascript运行之前阻止显示div？

2 个答案: