在DOM准备好但在呈现UI之前，如何使用jquery做些什么？

Question

我有一个jQuery脚本，它可以更改<img>和其他一些页面元素的src属性。

我的脚本使用$()连接到文档就绪回调。 当我刷新页面时，我看到原始内容半秒钟。 我想避免这种情况。

有没有办法为我的脚本来执行后 DOM是准备好，但它之前被渲染？

Answer 1

不是真的，但你可以很好地假装它。 尝试将图像设置为display ='none'。 设置src属性后，可以使用$（'＃myImage'）。show（）显示图像。

Answer 2

我不认为这是可能的。 目前，浏览器在DOM构建完成之前就开始渲染UI。

Answer 3

渲染后我会立即隐藏身体......

<body>
<script type="text/javascript">document.body.style.display = 'none';</script>

然后在jQuery代码执行后显示它...

 $(document).ready(function() {
   // Whatever you gotta do here
   document.body.style.display = '';
 });

这将确保您的网站在禁用Javascript时正常运行。

Answer 4

使用CSS属性隐藏您不想显示的内容：

display: none;

或者如果您不想弄乱页面的布局：

visibility: hidden;

由于网页的性能取决于UI的呈现速度，因此很难延迟呈现UI的整个过程。 标签通常会阻止UI的呈现，因为Javascript解释器会通过您的代码，但这种情况可能发生得如此之快，以至于您无法获得所需的功能。

Answer 5

顺便说一句，您通常可以在关闭标签后立即访问该元素。 但是，在较大的复合元素（如div）上，它可能已经开始渲染。

<img src="nothin.jpg" id="dynamicImage" />
<script type="text/javascript">$('#dynamicImage').hide();</script>