1

我有一个函数 shoh() 可以切换 div 的状态 - 显示或隐藏它。加载页面时，通过将样式更改为 display:none 来重复调用 shoh($id) 以使每个 div 隐藏在页面上。如果用户想要查看隐藏的 div 中的数据，他们可以单击带有 onClick="show($id)" 的链接以将 div 样式更改为 display: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);
    }   
}   
}
4

2 回答 2

1

将使 DIV 可见的 CSS 放在里面<noscript>：

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

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

于 2013-08-25T18:21:08.297 回答
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 完成之前它都是不可见的。

于 2013-08-25T17:51:02.253 回答