JQuery.ready 为时已晚：如何在渲染之前将 CSS 值与 JQuery 一起应用？

Posted 2023-02-22

【中文标题】JQuery.ready 为时已晚：如何在渲染之前将 CSS 值与 JQuery 一起应用？

【英文标题】：JQuery.ready is too late: How do I apply CSS Values with JQuery before Rendering?

【发布时间】：2011-02-13 02:55:48

【问题描述】：

我希望能够对某些元素应用不透明度以使它们不可见只有在启用 javascript 的情况下。我不想使用display:none，因为我希望布局就像它们在 DOM 中一样，所以将不透明度设置为 0 是完美的。

我希望能够使用 Javascript、使用 JQuery 来设置这个初始值，这样我就不必在不透明度（和许多其他）属性上处理浏览器的差异。但是，如果我像这样将不透明度设置为 0：

$(document).ready(function() 
  $("#header").css("opacity", 0);
  $("#header").animate(opacity:1, 500);
);

...一半时间它已经在屏幕上可见，所以它会出现和消失。

如何在渲染之前使用 JQuery 设置这些 css 值？

寻找一个仅限 JQuery 的解决方案，这样我就不必像这样手动处理每个浏览器实现：

#header 
  -moz-opacity:.50;
  filter:alpha(opacity=50); 
  opacity:.50;

【参考方案1】：

只需在 CSS 文件本身中将不透明度设置为 0。要涵盖无脚本，请将以下内容添加到您的脑海中：

<noscript><style>#header  opacity: 1; </style></noscript>

更新：因为这不是一个选项，下一个选项是在#header 元素之后直接执行脚本。

<div id="header"></div>
<script>$("#header").css("opacity", 0).animate(opacity:1, 500);</script>

【讨论】：

但这不会跨浏览器工作吗？还有其他依赖于浏览器的属性我也想这样做，所以我正在寻找一个仅限 jquery 的解决方案。

@viatropos - 这适用于跨浏览器，只需在样式标签中粘贴type="text/css" 即可消除那里的任何问题。或者，为此使用样式表，以相同的方式放置链接。

这适用于 IE4 及更高版本的所有浏览器。对于 html5 文档类型，type 默认为 text/css。不确定 XHTML，但它确实会因为缺少 type 属性而崩溃。

那么-moz-opacity 和filter:alpha(opacity) 是什么意思？

那么也要添加吗？我们以为你在谈论 noscripts。这只是一个基本的启动示例:)

【参考方案2】：

问题在于 JavaScript 几乎总是在渲染开始后执行，除非您在页面完全下载之前阻止渲染的 table hack。但是你会惹恼你的用户，你应该被枪杀。

您所要求的只是不能可靠地完成而不惹恼用户的事情。所以最好的办法是惹恼开发人员，并做一些额外的工作。

【参考方案3】：

为什么不使用

#header
 
    visibility: hidden;

然后在头部的noscript中

<noscript><style type="text/css">#header  visibility: visible; </style></noscript>