English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

ネイティブJSでホームページの進行表示アニメーションを実現

jsプロジェクトロードアニメーションプログラムは私の個人的な作品です。悪くないですが、参考にしてください。ただし、私の許可なしに他の用途には使用しないでください! 

朝日、ホームページのプロジェクトロードアニメーションを作成しました。ブログに使おうと思ったんですが、ブログパークは読み込みが早すぎてアニメーションの効果は見られませんでした。‘Complete’に直接読み込まれてしまいました。もう少し考え直しましょう。ブログを肥大化させたくありません! 

そこで、デモページを作成し、bodyにiframeを追加して大きなウェブサイトをロードし、効果がわかるようにしました! 

Safariで開くと、CSSアニメーションの再生時間が同期に変わってしまいました、原因はわかりません、ローカルテストでは問題ありません(神様、指摘してください!)、Chrome、Firefoxでは問題ありませんが、IEはテストしていません 

ロード時間の統計は、Windowsオブジェクトのperformance属性を使用して行いました、これは正確な時間を計算するために特別に用意された方法であり、MDNについての情報ですperformance属性の説明 

このサンプルの実現原理は比較的シンプルですが、実際のファイルサイズに基づいてロード進捗を表示するのではなく、document.readyStateの状態に基づいて表示を変更するだけです。実際にはもう少し信頼性のある方法もあります、XMLHttpRequestオブジェクトのprogressイベントを使用して、XMLHttpRequestの詳細な解説を行います、例えば:

 var request = new XMLHttpRequest();
 request.onprogress = function (e) {
 if(e.lengthComputable){ //lengthComputableはファイルにサイズがあるかどうかを示し、true、falseの値を持ちます
 progress.innerHTML = Math.round(100* e.loaded/ e.total) + \'%\'; //loaded、totalは、既に読み込まれたサイズと全体のサイズを表します
 }
 } 

以上の方法で実現することは面倒で、それどころか実現できないこともあります100%の実際のロード進捗度、だから少し嘘をついて、それを使わないことにしました! 

このサンプルでは、document.styleSheets[0].insertRule()メソッドも使用されています、ここでその要約を提供します:原生JSを使用してCSSスタイルを読み書きする方法の要約 

CSSアニメーションの実現について、皆さん自身でコードをご覧ください、非常にシンプルなコードですが、読みにくい場合はCSSの基礎を補強することをお勧めします、干货を紹介しますCSS中国語参考マニュアルウェブサイト、私の表現能力が限られているので、ここでは口にしないでください 

以下は完全なコードです+デモ:

!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>苏福的作品</title>
 <script>
 document.onreadystatechange = function () {
 function $id(id){return document.getElementById(id)}
 var width = 0, id,
 preloader_line = $id('preloader_line').firstElementChild,
 preloader = $id('preloader'),
 preloader_center = $id('preloader_center'),
 preloader_btn = $id('preloader_btn'),
 preloader_loading = $id('preloader_loading');
 if (document.readyState == "interactive") {
 loading(1,110,50);
 }
 if (document.readyState == "complete") {
 loading(5,120,16.7);
 preloader_loading.id = 'preloader_loaded';
 preloader_loading.innerHTML = 'Loading Complete'+'<br/'>+'Using: '+performance.now().toFixed(3)+' ms';
 preloader_btn.innerHTML = 'E N T E R';
 preloader_btn.style.borderBottom = '4px solid green';
 preloader_btn.style.fontStyle = 'inherit';
 preloader_btn.style.fontSize = '24px';
 if(document.styleSheets[0].insertRule){
 document.styleSheets[0].insertRule('#preloader_btn:hover{border-bottom: 4px solid green; border-radius: 60px; color: red;}', 0);
 }else{//兼容IE9以下
 document.styleSheets[0].addRule('#preloader_btn:hover{border-bottom: 4px solid green; border-radius: 60px; color: red;}', 0);
 }
 preloader_btn.onclick = function () {}}
 var 不透明度 = 1、id;
 function 非表示(){
 if(不透明度<=0){
 clearTimeout(id);
 preloader.style.display = 'none';
 document.body.style.overflow = 'auto';
 リターン;
 }
 不透明度 -= 0.;1;
 preloader.style.opacity = 不透明度;
 id = setTimeout(function(){
 非表示();
 },50);
 }
 非表示();
 };
 }
 function ローディング(ステップ、最大値、時間){
 if(width>=最大値){
 clearTimeout(id);
 if(最大値>= 120){
 preloader_line.parentNode.style.display = 'none';
 }
 リターン;
 }
 width += ステップ;
 preloader_line.style.width = width+'px';
 id = setTimeout(function(){
 ローディング(ステップ、最大値、時間);
 },時間);
 }
 };
 </スクリプト>
 <スタイル>
 body{
 オーバーフロー:ヒidden;
 }
 #preloader{
 position: absolute;
 width: 100%;
 height: 100%;
 background-色:白色;
 z-インデックス: 999;
 }
 #preloader_center{
 position: absolute;
 left: 0;
 right: 0;
 トップ:0;
 ボトム:0;
 width: 150px;
 height: 75px;
 margin:auto;
 }
 #preloader_loading{
 position: absolute;
 left: 0;
 right: 0;
 top: 45px;
 マージン:オート;
 width: 96px;
 height: 30px;
 }
 #preloader_loaded{
 position: absolute;
 left: 0;
 right: 0;
 top: 45px;
 マージン:オート;
 font-サイズ: 12px;
 テキスト-align: center;
 line-height: 30px;
 }
 #preloader_loading span{
 position: absolute;
 width: 10px;
 height: 2px;
 トップ:0;
 ボトム:0;
 margin:auto;
 background-color: #9b59b6;
 アニメーション:loading 1.5秒無限エイシズ-イン-アウト ;
 }
 #preloader_loading span:nth-子(2){
 左: 12px;
 アニメーション-遅延:.1s;
 }
 #preloader_loading span:nth-子(3){
 左: 24px;
 アニメーション-遅延:.2s;
 }
 #preloader_loading span:nth-子(4){
 左: 36px;
 アニメーション-遅延:.3s;
 }
 #preloader_loading span:nth-子(5){
 左: 48px;
 アニメーション-遅延:.4s;
 }
 #preloader_loading span:nth-子(6){
 左: 50px;
 アニメーション-遅延:.5s;
 }
 #preloader_loading span:nth-子(7){
 左: 62px;
 アニメーション-遅延:.6s;
 }
 #preloader_loading span:nth-子(8){
 左: 74px;
 アニメーション-遅延:.7s;
 }
 #preloader_loading span:nth-子(9){
 左: 86px;
 アニメーション-遅延:.8s;
 }
 @keyframes loading {
 0%{高さ: 2px;背景色:#9b59b6;}
 15%{高さ: 20px;背景色:#3498db;}
 50%{高さ: 2px;背景色:#9b59b6;}
 100%{高さ: 2px;背景色:#9b59b6;}
 }
 iframe{width: 100%;高さ: 1000px;}
 #preloader_btn{
 position: absolute;
 left: 0;
 right: 0;
 トップ:0;
 margin:auto;
 display: block;
 width: 122px;
 height: 40px;
 font-サイズ: 14px;
 テキスト-align: center;
 line-height: 40px;
 cursor: pointer;
 color: #9b59b6;
 font-style: italic;
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -ms-transition: all .5s;
 -o-transition: all .5s;
 transition: all .5s;
 }
 #preloader_line{
 position: absolute;
 left: 0;
 right: 0;
 top: 40px;
 margin:auto;
 width: 120px;
 height: 2px;
 border: 1px solid green;
 }
 #preloader_line span{
 display: block;
 height: 2px;
 width: 0;
 background-color: green;
 }
 </style>
</head>
<body>
<div id="preloader">
 <div id="preloader_center">
 <span id="preloader_btn">Loading...</span>
 <span id="preloader_line">
 <span></span>
 </span>
 <div id="preloader_loading">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 </div>
 </div>
</div>
<iframe src="http://jd.com"></iframe>
</body>
</html>

これでこの記事は全てです。皆さんの学習に役立てば幸いですし、もっとサポートしていただければと思います。

声明:この記事の内容はインターネットから取得しており、著作権者は所有しており、インターネットユーザーが自発的に貢献し、自己でアップロードしています。このサイトは所有権を持ちません。また、人間のエディタによる編集は行われていません。著作権に関する問題があれば、以下のメールアドレスまでご連絡ください:notice#oldtoolbag.com(メールで報告する場合は、#を@に置き換えてください。証拠を提供し、確認された場合は、このサイトは即座に侵害する疑いのあるコンテンツを削除します。)

おすすめ