사이트 컨텐츠 로딩 중에 로딩 화면을 표시하는 방법
https://stackoverflow.com/questions/244183
-
04-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
나는 많은 MP3와 이미지가 포함 된 사이트에서 작업하고 있으며 모든 콘텐츠로드가있는 동안 로딩 GIF를 표시하고 싶습니다.
나는 이것을 달성하는 방법을 모른다. 그러나 나는 내가 사용하고 싶은 애니메이션 GIF가있다.
제안이 있습니까?
해결책
일반적으로 Ajax를 통해 콘텐츠를로드하고 readystatechanged 로드 GIF 또는 컨텐츠로 DOM을 업데이트하는 이벤트.
현재 콘텐츠를 어떻게로드하고 있습니까?
코드는 이것과 유사합니다.
function load(url) {
// display loading image here...
document.getElementById('loadingImg').visible = true;
// request your data...
var req = new XMLHttpRequest();
req.open("POST", url, true);
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
// content is loaded...hide the gif and display the content...
if (req.responseText) {
document.getElementById('content').innerHTML = req.responseText;
document.getElementById('loadingImg').visible = false;
}
}
};
request.send(vars);
}
인생을 더 쉽게 만들 수있는 3 자 JavaScript 라이브러리가 많이 있지만 위는 실제로 필요한 전부입니다.
다른 팁
당신은 당신이 Ajax에서 이것을하고 싶지 않다고 말했습니다. Ajax는 이것에 좋지만 전체를 기다리는 동안 하나의 div를 보여줄 수있는 방법이 있습니다. <body> 로드하려면. 그것은 다음과 같이 간다 :
<html>
<head>
<style media="screen" type="text/css">
.layer1_class { position: absolute; z-index: 1; top: 100px; left: 0px; visibility: visible; }
.layer2_class { position: absolute; z-index: 2; top: 10px; left: 10px; visibility: hidden }
</style>
<script>
function downLoad(){
if (document.all){
document.all["layer1"].style.visibility="hidden";
document.all["layer2"].style.visibility="visible";
} else if (document.getElementById){
node = document.getElementById("layer1").style.visibility='hidden';
node = document.getElementById("layer2").style.visibility='visible';
}
}
</script>
</head>
<body onload="downLoad()">
<div id="layer1" class="layer1_class">
<table width="100%">
<tr>
<td align="center"><strong><em>Please wait while this page is loading...</em></strong></p></td>
</tr>
</table>
</div>
<div id="layer2" class="layer2_class">
<script type="text/javascript">
alert('Just holding things up here. While you are reading this, the body of the page is not loading and the onload event is being delayed');
</script>
Final content.
</div>
</body>
</html>
모든 페이지가로드 될 때까지 온로드 이벤트가 발사되지 않습니다. 그래서 Layer2 <DIV> 페이지가로드가 완료 될 때까지 표시되지 않으며 그 후 OnLoad가 발사됩니다.
jQuery는 어떻습니까? 간단한...
$(window).load(function() { //Do the code in the {}s when the window has loaded
$("#loader").fadeOut("fast"); //Fade out the #loader div
});
그리고 HTML ...
<div id="loader"></div>
그리고 CSS ...
#loader {
width: 100%;
height: 100%;
background-color: white;
margin: 0;
}
그런 다음 로더에서 div GIF와 원하는 텍스트를 넣으면 페이지가로드되면 사라집니다.
먼저, div에서 로딩 이미지를 설정하십시오. 다음으로, div 요소를 얻습니다. 그런 다음 CSS를 편집하는 함수를 설정하여 "숨겨진"로 가시성을 만듭니다. 이제 <body>, onload를 함수 이름에 넣습니다.
#PURE CSS 메소드
코드 상단에 배치하십시오 (헤더 태그 이전)
<style> .loader {
position: fixed;
background-color: #FFF;
opacity: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 10;
}
</style><div class="loader">
Your Content For Load Screen
</div>그리고 이것은 다른 모든 코드 다음에 바닥에 있습니다 ( /html 태그 제외)
<style>
.loader {
-webkit-animation: load-out 1s;
animation: load-out 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes load-out {
from {
top: 0;
opacity: 1;
}
to {
top: 100%;
opacity: 0;
}
}
@keyframes load-out {
from {
top: 0;
opacity: 1;
}
to {
top: 100%;
opacity: 0;
}
}
</style>이것은 항상 나에게 100%의 시간
실제로이 작업을 수행하는 매우 쉬운 방법이 있습니다. 코드는 다음과 같아야합니다.
<script type="test/javascript">
function showcontent(x){
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 1) {
document.getElementById('content').innerHTML = "<img src='loading.gif' />";
}
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('content').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('POST', x+'.html', true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send(null);
}
그리고 HTML에서 :
<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>
나는 내 페이지에서 그런 일을했고 그것은 훌륭하게 작동합니다.
당신이 사용할 수있는 <progress> HTML5의 요소. 소스 코드 및 라이브 데모는이 페이지를 참조하십시오. http://purpledesign.in/blog/super-cool-loading-bar-html5/
여기 진행 요소가 있습니다 ...
<progress id="progressbar" value="20" max="100"></progress>
이것은 로딩 값이 20에서 시작됩니다. 물론 요소 만 충분하지 않습니다. 스크립트가로드 될 때 이동해야합니다. 이를 위해서는 jQuery가 필요합니다. 다음은 0에서 100까지의 진행 상황을 시작하고 정의 된 시간 슬롯에서 무언가를하는 간단한 jQuery 스크립트입니다.
<script>
$(document).ready(function() {
if(!Modernizr.meter){
alert('Sorry your brower does not support HTML5 progress bar');
} else {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (1000/max)*10,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate);
//Do Something
}
if (value == 16) {
//Do something
}
if (value == 38) {
//Do something
}
if (value == 55) {
//Do something
}
if (value == 72) {
//Do something
}
if (value == 1) {
//Do something
}
if (value == 86) {
//Do something
}
};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>
이것을 HTML 파일에 추가하십시오.
<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
<progress id="progressbar" value="0" max="100"></progress>
<span class="progress-value">0%</span>
</div>
</div>
이것이 당신에게 시작을 줄 수 있기를 바랍니다.
