Tôi đang làm việc trên một trang web chứa toàn bộ các tệp mp3 và hình ảnh và tôi muốn hiển thị gif tải trong khi tất cả nội dung tải.Cách hiển thị màn hình tải trong khi nội dung trang web tải
Tôi không biết làm thế nào để đạt được điều này, nhưng tôi có gif động tôi muốn sử dụng.
Mọi đề xuất?
Thông thường các trang web thực hiện việc này bằng cách tải nội dung qua ajax và nghe sự kiện readystatechanged để cập nhật DOM bằng GIF tải hoặc nội dung.
Hiện tại bạn đang tải nội dung của mình như thế nào?
Mã này sẽ tương tự như sau:
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);
}
Có rất nhiều bên thứ 3 javascript thư viện mà có thể làm cho cuộc sống của bạn dễ dàng hơn, nhưng trên thực sự là tất cả các bạn cần.
Bạn đã nói bạn không muốn thực hiện việc này trong AJAX. Trong khi AJAX là tuyệt vời cho điều này, có một cách để hiển thị một DIV trong khi chờ đợi cho toàn bộ <body> để tải. Nó có dạng như sau:
<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>
Sự kiện onload sẽ không kích hoạt cho đến khi tất cả trang đã tải. Vì vậy, layer2 <DIV> sẽ không được hiển thị cho đến khi trang tải xong, sau đó tải sẽ kích hoạt.
Có một cách khá dễ dàng để thực hiện việc này. Mã nên có cái gì đó như:
<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);
}
Và trong HTML:
<body onload="showcontent(main)"> <!-- onload optional -->
<div id="content"><img src="loading.gif"></div> <!-- leave img out if not onload -->
</body>
tôi đã làm một cái gì đó như thế trên trang của tôi và nó hoạt động tuyệt vời.
Bạn có thể sử dụng phần tử <progress> trong HTML5. Xem trang này để biết mã nguồn và bản trình diễn trực tiếp. http://purpledesign.in/blog/super-cool-loading-bar-html5/
đây là yếu tố tiến bộ ...
<progress id="progressbar" value="20" max="100"></progress>
này sẽ có giá trị tải bắt đầu từ 20. Tất nhiên chỉ là yếu tố sẽ không đủ. Bạn cần di chuyển nó khi tải tập lệnh. Cho rằng chúng ta cần JQuery. Đây là một kịch bản lệnh JQuery đơn giản bắt đầu tiến trình từ 0 đến 100 và thực hiện điều gì đó trong khe thời gian xác định.
<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>
Thêm tệp này vào tệp HTML của bạn.
<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>
Hy vọng điều này sẽ giúp bạn bắt đầu.
Còn jQuery thì sao? Một cách đơn giản ...
$(window).load(function() { //Do the code in the {}s when the window has loaded
$("#loader").fadeOut("fast"); //Fade out the #loader div
});
Và HTML ...
<div id="loader"></div>
Và CSS ...
#loader {
width: 100%;
height: 100%;
background-color: white;
margin: 0;
}
Sau đó, trong bộ nạp của bạn div bạn sẽ đặt các GIF, và bất kỳ văn bản mà bạn muốn, và nó sẽ mờ dần khi trang đã được nạp.
Trước tiên, hãy thiết lập hình ảnh tải trong div. Tiếp theo, lấy phần tử div. Sau đó, thiết lập một chức năng chỉnh sửa css để làm cho khả năng hiển thị thành "ẩn". Bây giờ, trong các <body>, đưa onload vào tên hàm.
phương pháp #Pure css
Nơi này ở phía trên cùng của mã của bạn (trước thẻ tiêu đề)
<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>Và này Tại The Đáy sau khi tất cả các mã khác (exc EPT/html tag)
<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>này luôn luôn làm việc cho tôi 100% thời gian
Bạn có thể xin vui lòng cho tôi biết những gì thư viện của bên thứ 3 ? – Shekhar
@Shekhar [jQuery] (http://jquery.com/) là một thư viện JavaScript được sử dụng rộng rãi. – Stian