Question

我正在使用jQuery插件来滑动内容窗格。大约400毫秒，所有的页面元素都会闪烁（文本，图像等）在他们自己之上，造成一个混乱的混乱混乱......你可以说是一个骚动。

然后样式表出现并对其进行排序。但是为了专业和完美主义，我想隐藏所有内容，直到样式表加载完毕。

$（文件）.ready已经不恰当了，因为繁荣...这是我的问题。 onload（）不起作用，然后所有内容都被隐藏，直到页面完全呈现（图像... 4,5,6秒... zzzzzzzz ....）

所以有人知道这些选项是什么吗？（并且可以在页面加载期间播放Girl From Ipanema midi吗？：p）

Answer 1

您可以让样式表将特定元素隐藏为display: none，直到需要它们为止。

但是，如果您直接在样式表中执行此操作，则会遇到辅助功能问题，因为在没有JavaScript可用的浏览器上，内容根本不会显示。解决这个问题的方法是在加载任何可延迟元素之前键入从JavaScript设置的变量的隐藏性，例如作为<body>上的类：

<head>
    <style type="text/css">
        body.withjs .deferred { display: none; }
    </style>
</head>
<body>
    <script type="text/javascript">
        $('body').addClass('withjs');

        $(document).ready(function() {
            // set up slideyness
        });
    </script>

    <p>Content that loads normally...</p>

    <div id="slideything" class="deferred">
        content
    </div>
</body>

Answer 2

可访问性方面，您不应该假设您的样式表实际上正由客户端使用。您的内容无需样式表即可访问，样式表只应增强演示文稿 - 即Progressive Enhancement。

如果辅助功能较少，您可以在包装器div或正文中隐藏整个页面（或至少是brouhaha）{。1}}。

Answer 3

隐藏将由JavaScript处理的内容非常容易。您只需使用JavaScript生成内容本身或将其样式设置为display: none。

问题是可访问性。您通常希望内容可用于不支持所有高级功能的工具，包括旧浏览器，搜索引擎，手机，屏幕阅读器......这就是阻止您执行我在第一段中提到的内容。

我的建议是改变你的CSS，这样即使禁用了JavaScript，内容也会很好。

（至于您的最新要求，您可以使用jQuery.ipanema-girl.js plugin。）

在加载和执行样式表之前，如何隐藏用户的内容？

3 个答案: