Загрузка экрана до <head>

Я хотел бы загрузить следующий svg, который абсолютно расположен посередине экрана, перед тегом заголовка. У меня много css и другого javascript, и я хочу показать экран загрузки раньше всего.Загрузка экрана до <head>

Возможно ли это?

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>

источник

2015-02-12 Borsn

почему вы не создать еще один DIV, который перекрывает свой контент, используя более высокий z-индекс, который содержит SVG, и затем упускать это, когда страница загружается? Это должно быть в теге вашего тела, объекты за пределами 'body' делают для плохой разметки – Alex

@Alex Чтобы попасть на экран загрузки, ему придется пройти через тег заголовка. Загрузите все CSS и javascript. И только потом перейдите к телу и загрузите div. – Borsn

Есть ли причина, по которой вы не можете сначала загрузить файл css/js? – Michael

В вашем теле вы можете перенести 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'); 
});

UPDATE

Вместо не используя дисплей ни вы могли бы сделать это менее резко с помощью этого:

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

источник

2015-02-12 23:39:51 Michael

Есть ли способ заставить div загружаться раньше всего (возможно, с встроенным css с) Javascript? – Borsn

В вашем html вы должны разместить свой div на самом верху, прямо под тегом вашего тела, это достигнет этого. – Michael

Что делать, если я использовал 'load_js();'? – Borsn

Я бы на месте 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. Я собираюсь украсть вашу приятную анимацию :)

источник

2015-02-12 23:28:11 sebnukem

Наслаждайтесь анимацией :) – Borsn

Загрузка экрана до <head>

ответ

Смежные вопросы