<head> 之前的加载屏幕答案

【问题标题】：Loading screen before <head><head> 之前的加载屏幕
【发布时间】：2015-02-13 08:03:11
【问题描述】：

我想加载以下 svg，它绝对位于屏幕中间，在 head 标签之前。我有很多 css 和其他 javascript，我想先显示加载屏幕。

这可能吗？

CSS：

html body svg#circle-loader {
    position: absolute; float: none; clear: both; top: 50%; right: 0; bottom: 0; left: 50%;
    width: 50px; height: 50px; margin: -25px 0 0 -25px;
    -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; animation: spin 1s linear infinite;
}

@-o-keyframes spin { 100% { -o-transform: rotate(360deg); } }
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

html body svg#circle-loader circle {
  stroke-dasharray: 187; stroke-dashoffset: 50;
  stroke: rgba(26, 60, 88, 0.9);
  -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; transform-origin: center;                   
}

HTML：

<svg id="circle-loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66 66" preserveAspectRatio="xMixYMid meet">
        <circle class="path" fill="none" stroke-width="8" stroke-linecap="round" cx="33" cy="33" r="28"></circle>
</svg>

【问题讨论】：

为什么不创建另一个 div 来覆盖您的内容，方法是使用包含 SVG 的更高 z-index，然后在页面加载时关闭它？这应该在您的正文标签中，body 之外的对象会导致标记错误
@Alex 为了进入加载屏幕，它必须通过 head 标签。加载所有 CSS 和 javascript。然后才移动到 body 并加载 div。
有什么原因不能先加载css/js文件吗？
@Michael，那个和 js 需要一点时间来加载......
将您的动画放在body 的顶部，并将其必要的css 放在head 中。将css包含在head中，js包含在body的底部。

标签： javascript jquery html css svg

【解决方案1】：

在您的身体中，您可以先将 SVG 包装在一个 div 中。

由于您的文档的其余部分可能有相当大的 CSS 和 jQ 文件，您可以专门为您的加载器设置一个 CSS 和 jQuery 文件并将它们放入您的标题中，以便它们首先加载（因为它们将是体积小）。这比将 CSS/jQ 内联更好。

使用所需的任何内容设置您的 CSS 加载器文件，并将 z-index 设置为高于页面上的其他元素，例如

#loader {
background: #FAFAFA;
z-index: 1000;
}

然后设置您的 jQ 文件，以便在页面中加载其他所有内容后，您将删除加载器 div，例如

$(window).load(function() {
$('#loader').css({'display':'none');
});

更新

除了使用 display none 之外，你还可以使用这个来减少它的突然性：

$(window).load(function() {
$('#loader').hide("slow");
});

【讨论】：

有什么方法可以强制 div 在其他任何东西之前加载（可能与内联 css 一起）Javascript？
在您的 html 中，您应该将您的 div 放在最顶部，直接在您的 body 标签下，这将实现这一点。
如果我使用load_js();会怎样？
您指的是github.com/rkitover/load-js 脚本吗？如果是的话，你可以，但你可以通过将加载器 css/jq 放在页眉中，然后将其余的 css/js 放在页脚中来更有效地做到这一点。这意味着您的加载器和页面内容将首先加载，然后您的较大文件将在最后加载。然后，一旦所有内容都加载完毕，.hide 就会发挥作用并显示您的页面。另外，这样做可以节省您加载另一个脚本的时间。
我应该注意到，在页脚中加载其他 css 在技术上是无效的，但仍然可以工作。您最大的 css 文件有多大，将其保留在页眉中并将较大的 JS 文件放在页脚中会不会是一个大问题？

【解决方案2】：

我会将 svg css 内联放在 head 的顶部，然后是 css 文件包括，svg 代码在 body 的顶部，所有的 javascript 文件都包括在 body 的底部（它们在应该是）：

<html>
  <head>
    <style>... the svg css, inline ... </style>
    <link rel="stylesheet" href="... other css files ...">
     :
  </head>
  <body>
    <div>
      ... your svg html ...
    </div>
    ... page content ...
    <script src="... js scripts ..."></script>
     :
  </body>
</html>

然后，一旦全部加载完毕，丢弃或隐藏 svg。

PS。我要偷你漂亮的动画:)

【讨论】：

欣赏动画:)