Question

我想在head标签之前加载以下svg，它绝对位于屏幕中间。我有很多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>

Answer 1

我会将svg css内联到head之上，然后是css文件include，svg代码放在body之上，所有javascript文件都包含在body的底部1}}（他们应该在哪里）：

<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。我要偷你的好动画：）

Answer 2

在您的身体中，您可以先将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");
});

之前加载屏幕

2 个答案: