Question

我添加<div>，显示＆＃34; loading＆＃34;将图片转换为<body>标记。它看起来很酷，但不幸的是，在加载脚本和css链接或至少开始加载之后，加载div和图像只会在大部分加载过程完成后出现在屏幕上。这可能是因为正文位于<head>标记下，甚至在头部开始加载之前都没有解析。我可以在头文件中显示文档顶部的加载div / image吗？我尝试添加<script>，然后添加creatElement()和appendChild()，但还没有body添加孩子。如何才能更早地显示加载div / image？

Answer 1

您必须使用动画/文字覆盖整个页面，以便不显示正在加载的其他内容。

所有其他js内容（外部源除外）都进入$(document).ready();函数。

以下代码段中的动画将在window准备就绪时执行。

＆＃13;

$(window).ready(function() {
    $('#untilContentLoads').hide();
});

＆＃13;

#untilContentLoads {
    position: absolute; 
    width: 100%; 
    height: 100%;
    /* background: url() no-repeat center; <-- use that for some kind of gif/svg animation */
}

＆＃13;

<div id="untilContentLoads">Loading</div>

＆＃13;

Answer 2

正如@Meirion所提到的那样，将脚本标签放在最后。但是，我是否可以建议将加载图像作为身体的背景图像？如果需要，您可以随时在身体上进行切换。

Answer 3

如果您想快速执行此操作，可能需要在body标记的末尾添加脚本，如此

<html>
<head>
</head>
<body>
<div id="loading"/>
<script>
 /*Here your code will have a notion of what is loading*/
</script>
</body>

您可能想要采用的另一种方法是使用body.onload脚本选项。遵循相同的例子

<html>
<head>
</head>
<body onload="functionForLoading()">
  <div id="loading"/>
</body>
</html>

Answer 4

需要解析html文档以便弄清楚如何显示它，这样你就无法与正文（可见位）进行交互，直到它被读取并创建了DOM。

但是，您可以在标题中指定CSS，一旦加载，它将快速应用于DOM。

如果你想要微调器的最快外观我建议

使您的html文档尽可能小
将你的装载器div作为第一个加载（即在体内的第一个）
制作一个纯CSS微调器并将此片段放在页面的头部（不是单独的文件 - 内嵌在头部）
对您的网页进行个人设置并改善“首次绘画时间”
延迟加载图片/将脚本标记放在页面底部
尽可能使用defer / async（http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html）

要快速加载文档，您可能希望尽可能快地加载文档。你可以去除除了body标签以外的所有内容并使用脚本加载内容，但这会大大增加复杂性。

如何在加载所有链接和脚本之前显示加载div

4 个答案: