Web を閲覧すると、データの読み込み中に LOADING プロンプトが表示されることがよくあります。実際、この関数の原理は非常に単純です。つまり、DIV が現在のページをカバーし、そのカバーされた DIV レイヤーに Loading が表示されます。
1.現在のページ:
次のようにコードをコピーします。
<div><a href="#" onclick="showLoading()">読み込み中</a></div>
2. マスクレイヤー:
次のようにコードをコピーします。
<div id="over"></div>
3.表示レイヤーの読み込み:
次のようにコードをコピーします。
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
コード全体:
次のようにコードをコピーします。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<頭>
<タイトル></タイトル>
<style type="text/css">
.current a {
フォントサイズ: 20px;
}
。以上 {
表示: なし。
位置: 絶対;
トップ: 0;
左: 0;
幅: 100%;
高さ: 100%;
背景色: #f5f5f5;
不透明度:0.5;
z インデックス: 1000;
}
.layout {
表示: なし。
位置: 絶対;
トップ: 40%;
左: 40%。
幅: 20%;
高さ: 20%;
z インデックス: 1001;
テキスト整列:中央;
}
</スタイル>
<script type="text/javascript">
関数 showLoading()
{
document.getElementById("over").style.display = "ブロック";
document.getElementById("レイアウト").style.display = "ブロック";
}
</script>
</head>
<本文>
<div><a href="#" onclick="showLoading()">読み込み中</a></div>
<div id="over"></div>
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
</body>
</html>
最終的な効果:
インターネット上で別の実装方法も見かけましたが、これは JS を使用して html タグの値を継続的に変更してプロンプトを読み込む効果を実現するというもので、それを自分で実装しました。コードは次のとおりです。
次のようにコードをコピーします。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<頭>
<タイトル></タイトル>
<!-- <script src="Scripts/jquery-1.8.2.js"></script>-->
<style type="text/css">
#tb {
幅: 100%;
高さ: 100%;
行の高さ: 10px;
}
#tb tr td {
テキスト整列: 中央;
}
.progressbar {
フォントファミリー: Arial;
フォントの太さ: 太字;
色: グレー;
背景色: 白;
パディング: 0px;
境界線のスタイル: なし。
}
.パーセント{
フォントファミリー: Arial;
色: グレー;
テキスト整列: 中央;
ボーダー幅: 中;
境界線のスタイル: なし。
}
</スタイル>
<script type="text/javascript">
変数バー = 0;
var ステップ = "||";
/*
*最初の方法は次のとおりです: $(document).ready(function(){....});
*/
//$(関数() {
// 進捗（）;
//});
/*
*2番目の方法
*/
//window.onload = function() {
// 進捗（）;
//}
/*
*3 番目の方法は $(document).ready(function(){....}); をシミュレートします。
*/
（関数 （） {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = function () { for (var i = 0; i < fn.length; i++) fn[i]() };
var d = ドキュメント;
d. 準備完了 = 関数 (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
if (fn.push(f) > 1) が戻る;
もし（つまり）
（関数 （） {
{d.documentElement.doScroll('left'); を試してください。
catch (err) { setTimeout(arguments.callee, 0);
})();
そうでなければ (週)
var t = setInterval(function() {
if (/^(loaded|complete)$/.test(d.readyState))
クリアインターバル(t)、実行();
}, 0);
};
})();
document.ready(function() {
進捗（）;
});
関数進捗() {
バー = バー + 2;
ステップ = ステップ + "||";
document.getElementById("パーセント").value = bar + "%";
document.getElementById("progressbar").value = ステップ;
if (bar <= 98) {
setTimeout("progress()", 100);
}
}
</script>
</head>
<本文>
<テーブルid="tb">
<tr>
<td>
<input type="text" size="50" id="パーセント" /></td>
</tr>
<tr>
<td>
<input type="text" size="50" id="progressbar" /></td>
</tr>
</テーブル>
</body>
</html>
最終的な効果: