Question

我有一个带有类的html元素，即文章：

<article> Content </article>

对于我的jQuery脚本，它意味着它应该添加一些以前准备的特定类：

$('article').addClass('rounded box-shadow gradient-bright');

我的整个网页上都有一些文章和其他类似的框，所以如果我想要改变一些东西，我必须在一个地方做 - javascript脚本。

但问题是，我应该如何使用jQuery来获得最佳效果？我不希望用户必须在加载页面上看到更改的情况（即缓慢传输，所以在开头是框，然后他看到它是带阴影的圆形框...他应该一次看到所有更改）。

因此...

$(window).ready( /* add class */ ) ...

或者...

$(document).ready( /* add class */ ) ...

或者...

没有就绪功能，只需/ *添加类* /

或许还有其他解决方案？

修改将<div class="article">更改为<article>备考;）但这只是示例......

Answer 1

您应该使用文档方式。这意味着代码将在构建DOM之后的最早时刻执行。

要扩展此：窗口就绪还等待加载外部源（图像等）。

Answer 2

您可以尝试类似

的内容

jQuery('html').addClass('prepStyles');

并为那些需要样式的元素添加样式，如

.prepStyles .article {
    /*  your styles to make the article look nice, resembling .rounded.box-shadow.gradient-bright */
}

这将立即加载具有所需样式的.article元素。但是，为了使事情变得清洁，你可以做到

$(document).ready(function () {
    $('.article').addClass('rounded box-shadow gradient-bright');
});

这将重新应用.prepStyles .article中已定义的样式，现在您可以从以下位置删除该类：

$(document).ready(function () {
    …
    jQuery('html').removeClass('prepStyles');
});

Answer 3

避免FOUC（无格式内容的闪现） - 保罗爱尔兰的这个article可以帮助你。正如ikanobori提到并使用Pauls技术一样，如果你的css依赖于背景图像，那么在窗口准备就可以清除js类。只有在这个时候才能确定这些都已被加载。

Answer 4

这里最好的办法是$(document).ready( /* add class */ ) ...，因为文件小于窗口