私は mp3 と画像を大量に含むサイトで作業しており、すべてのコンテンツの読み込み中に読み込み中の gif を表示したいと考えています。
これを達成する方法はわかりませんが、使用したいアニメーション gif があります。
助言がありますか？
質問する
171218 次
7 に答える
29
通常、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);
}
あなたの人生を楽にするサードパーティの JavaScript ライブラリはたくさんありますが、実際に必要なのは上記のライブラリだけです。
于 2008-10-28T17:55:17.550 に答える
11
あなたはこれをAJAXでやりたくないと言った。<body>これには AJAX が最適ですが、全体が読み込まれるのを待っている間に 1 つの DIV を表示する方法があります。次のようになります。
<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>
onload イベントは、すべてのページが読み込まれるまで発生しません。そのため、ページの読み込みが完了するまで、layer2<DIV>は表示されません。その後、onload が起動します。
于 2010-11-04T19:43:43.530 に答える
5
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 と必要なテキストを配置します。ページが読み込まれるとフェードアウトします。
于 2014-12-07T07:31:36.290 に答える
2
#ピュア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％の時間で機能します
于 2016-04-21T11:33:07.953 に答える
0
実はこれにはかなり簡単な方法があります。コードは次のようになります。
<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>
私は自分のページでそのようなことをしましたが、うまくいきました。
于 2012-06-29T03:32:11.040 に答える
0
<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>
これがあなたの始まりになることを願っています。
于 2014-01-08T20:33:13.130 に答える