正在载入画面<head>

Question

I would like to load the following svg, which is absolutely positioned in the middle of the screen, before the head tag. 我想加载以下svg，它绝对位于head标记之前的屏幕中间。 I've got a lot of css and other javascript, and I want to show the loading screen before anything else. 我有很多CSS和其他JavaScript，我想先显示加载屏幕。

Is this possible? 这可能吗？

CSS: 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: 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

I would place the svg css inline on top of head , followed by the css file includes, the svg code on top of body , and all the javascript file includes at the bottom of body (where they should be): 我将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>

And then, once everything is fully loaded, discard or hide the svg. 然后，在所有内容完全加载后，丢弃或隐藏该svg。

PS. PS。 I'm going to steal your nice animation :) 我要偷走你漂亮的动画:)

Answer 2

In your body you could wrap the SVG in a div first off. 首先，您可以将SVG包裹在div中。

As you may have quite a big CSS and jQ file for the rest of your document, you could set up a CSS and jQuery file specifically for your loader and put them into your header so that they load first (as they will be small in size). 由于您在文档的其余部分可能有一个很大的CSS和jQ文件，因此可以为装入程序专门设置一个CSS和jQuery文件，并将它们放入标头中，以便它们首先装入（因为它们的尺寸很小））。 This would be better practice than placing the CSS/jQ inline. 这比将CSS / jQ内联放置更好。

Set up your CSS loader file with whatever is needed and set the z-index to be higher than the other elements on the page, eg 根据需要设置CSS加载器文件，并将z-index设置为高于页面上的其他元素，例如

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

Then set up your jQ file so that once everything else is loaded in the page you will remove the loader div, eg 然后设置您的jQ文件，以便在页面中所有其他内容加载完毕后，您将删除loader div，例如

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

UPDATE UPDATE

Instead of using display none you could do it less abruptly by using this : 除了使用display之外，您还可以通过使用以下命令来使它不那么突然：

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

正在载入画面<head>

问题描述

2 个解决方案

解决方案1
0 2015-02-12 23:28:11

解决方案2
0 已采纳 2015-02-12 23:39:51

正在载入画面<head>

问题描述

2 个解决方案

解决方案1 0 2015-02-12 23:28:11

解决方案2 0 已采纳 2015-02-12 23:39:51

解决方案1
0 2015-02-12 23:28:11

解决方案2
0 已采纳 2015-02-12 23:39:51