执行$（document）.ready中的脚本之前的页面渲染以重新排列html元素

Question

我正在重新安排一些html并在JQuery的$(document).ready中更改一些css值。不幸的是，如果用户的计算机速度不是很快，则用户会看到原始布局，然后在屏幕上看到正在移动的内容，直到$(document).ready完成。我可以隐藏主div并在$(document).ready的末尾显示它，但是当它发生时，根据页面的不同，我为每个html页面和每个javascript页面加载了多个javascript页面有$（document）.ready函数。因此，保证哪一个最后执行也是另一个障碍。

为了增加更多的复杂性，我从服务器获得了一个包含图像的100个跨度的html片段。我只会显示这个html片段的前n个元素，并从dom中删除其余的元素。 n在javascript中在客户端上计算。我想在从服务器上实际拉出图像之前这样做，所以我只拉出显示的图像。

如何编写我的代码：

1. 仅从服务器中提取实际显示的图像。和
2. 用户看不到页面元素在其前面重新排列。

非常感谢！

Answer 1

1）在您的内容上使用display:none作为内联样式，并在脚本完成后显示它们

2）将SRC留空，并将其放入data_src，然后在准备好显示时将值复制到SRC

<img src="" data_src="/images/image1.jpg" />

Answer 2

  

我为页面加载了多个javascript页面，每个页面都有一个$（document）.ready函数。因此，保证哪一个最后执行也是另一个障碍。

你可以只有一个

$("document").ready({
 //functions here
});

并在此内定义所有功能。