页面呈现在$(document)中的脚本之前.Ready命令用于重新排列HTML元素

Question

我正在重新安排一些html和改变一些css值在我的$(document).ready在JQuery。不幸的是，如果用户的计算机不是超级快，用户看到的是原始布局，然后看到屏幕上的东西被移动，直到$(document).ready完成。我可以隐藏主div并在$(document).ready结束时显示它，但它发生时，根据页面的不同，我为每个html页面加载了多个javascript页面，每个javascript页面都有一个$(文档)。准备功能。所以保证哪一个最后执行也是另一个障碍。

为了增加更多的复杂性，我从服务器获得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)。准备功能。所以保证哪一个最后执行也是另一个障碍。

只能有一个

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