0

我没有从一个正常的页面开始，然后在上面构建 js 功能，我做了一些 Web 开发的失礼。我正在重新开发的网站是一个旧网站，里面有很多漂亮的 jquery 动画。

我费了很大力气来确保所有页面加载都可以使用或不使用 ajax 来处理，但我刚刚意识到这完全没有意义，因为初始页面加载会产生几个元素，这些元素使用display:none;or的属性加载opacity:0;并且动画在文档准备好时可见

我非常想纠正这个问题，但我首先这样做有几个原因：

1：在jquery插件启动之前隐藏一闪而过的无样式菜单。（我将用非js菜单替换它并在jquery菜单中添加动画来解决这个问题）

2：另一个原因是我喜欢页面加载时的初始动画，最好保留它。但这提出了一个问题，因为我希望页面的大部分对 js 用户不可见，而对非 js 用户在加载时可见，但是如何确保在页面呈现之前更改我的元素 css 属性 - 我已经尝试过这与 jquery 但当 jquery 库已加载（没有缓存）时，我的页面已经呈现，所以内容在被隐藏和动画回来之前闪现？

4

2 回答 2

3

此块仅对关闭 JS 的用户可见。

<noscript>html code here</noscript>

你可以像这样添加一些样式：

<noscript>
    <style>
        #content{
            background: red;
        }
    </style>
</noscript>
于 2012-12-03T18:49:19.270 回答
0

您可以在 中添加以下内容<head>：

<script>document.documentElement.className+='js'</script>

然后，您可以使用元素js上的类htmlf.ex 以不同的方式设置启用 javascript 的浏览器的样式：

html .animate{opacity:1} /* all browsers */
html.js .animate{opacity:0} /* js-enabled browsers */

该类已添加到 中head，因此 DOM 的其余部分没有闪烁。

您也可以使用noscript标签，但我个人认为这更简洁，因为您可以在单个样式表中管理样式。

于 2012-12-03T18:54:54.707 回答