代码之家 › 专栏 › 技术社区 › Kyle Cureau

How does one hide content from a user until a stylesheet is loaded and executed?

load javascript-events events css jquery

Kyle Cureau · 技术社区 · 15 年前

我正在使用jquery插件来滑动内容窗格。在大约400毫秒的时间里,所有的页面元素(文本、图像等)都会在它们上面闪现,造成混乱混乱的混乱……你可以说这是一场闹剧。

Then the stylesheet comes along and sorts it all out. But for the sake of professionalism and perfectionism I'd like to hide all the content until the stylesheet has loaded.

准备是不合适的,因为Boom…那是我的问题。onload()既不起作用,也不起作用,因为在页面完全呈现之前,所有内容都被隐藏(图像…4、5、6秒…zzzzzzzz…)

那么有人知道有什么选择吗?(在页面加载过程中,是否可以从ipanema midi扮演女孩?P)

3 回复 | 直到 15 年前

bobince 15 年前

You can have the stylesheet hide specific elements as display: none until they are needed.

However, if you do this directly in the stylesheet you've got accessibility problems, as on a browser without JavaScript available the content will not appear at all. A way around this is to key the hiddenness on a variable that is set from JavaScript before any of the deferrable elements are loaded, for example as a class on <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>

MaxVT 15 年前

从可访问性的角度来看,您不应该假设您的样式表实际上正被客户机使用。您的内容应该可以在没有样式表的情况下访问,并且样式表应该只增强表示效果-这是 Progressive Enhancement .

If accessibility matters less, you can hide the entire page (or at least the brouhaha) with display: none in the wrapper div or body.

Álvaro González 15 年前

It's very easy to hide content that's going to be processed by JavaScript. You just need to generate the content itself with JavaScript or set its style to display: none .

The problems is accessibility. You normally want the content to be available for tools that do not support all the advanced features, including old browsers, search engines, mobiles phones, screen readers... That's what prevents you from doing what I mentioned in the first paragraph.

My advice is to alter your CSS so the content looks good even with JavaScript disabled.

(As for your latest requirement, you can use the jQuery.ipanema-girl.js plugin )