javascript - 在 之前加载屏幕

Question

我想加载以下 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>

Answer 1

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