代码之家 › 专栏 › 技术社区 › 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 · 技术社区 · 14 年前

我正在使用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 回复 | 直到 14 年前

bobince 14 年前

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 14 年前

从可访问性的角度来看,您不应该假设您的样式表实际上正被客户机使用。您的内容应该可以在没有样式表的情况下访问,并且样式表应该只增强表示效果-这是 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 14 年前

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 )

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前