正在載入畫面<head>
[英]Loading screen before <head>
問題描述
我想加載以下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>
2 個解決方案
解決方案1
0 2015-02-12 23:28:11
我將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。 我要偷走你漂亮的動畫:)
解決方案2
0 已采納 2015-02-12 23:39:51
首先，您可以將SVG包裹在div中。
由於您在文檔的其余部分可能有一個很大的CSS和jQ文件，因此可以為裝入程序專門設置一個CSS和jQuery文件，並將它們放入標頭中，以便它們首先裝入（因為它們的尺寸很小） ）。 這比將CSS / jQ內聯放置更好。
根據需要設置CSS加載器文件，並將z-index設置為高於頁面上的其他元素，例如
#loader {
background: #FAFAFA;
z-index: 1000;
}
然后設置您的jQ文件，以便在頁面中所有其他內容加載完畢后，您將刪除loader div，例如
$(window).load(function() {
$('#loader').css({'display':'none');
});
UPDATE
除了使用display之外，您還可以通過使用以下命令來使它不那么突然：
$(window).load(function() {
$('#loader').hide("slow");
});
.withsuccesshandler 之前的 Sweetalert 加載屏幕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.