Clever Geek Handbook

loading.gifの代わりのJavascript

Webアプリケーションでは、ユーザーがプロセスの結果を期待すると、アニメーション画像がしばしば表示され、アプリケーションが何らかのアクションを実行していて、ユーザーが待つ必要があることを示します。 ほとんどの場合、この画像はloading.gifです。



グラフィックをダウンロードするとサーバーに余分な負荷がかかり、ページを開くための待ち時間が長くなり、主にこのグラフィックはメインプロセス（プログラミングとレイアウト）から気をそらして作成する必要があるため、私はWebデザインでのグラフィックの使用のサポーターではありません。



別の新しいプロジェクトを追求して、loading.gifがこのサイトでどのように見えるかと思いました。 サイト全体のデザインは非常に独創的であるため、詳細も異なって見えるはずです。 私はフラッシュに行きたくありませんでした。 さらに、フラッシュでgifアニメーションを作成しようとしたとき、何らかの理由で結果が非常に低品質であることが判明したため、以前はVKontakteまたはFacebookのloading.gifを使用しました。



今回は、この写真をコードで置き換えるというアイデアを得ました。 ここにいくつかのオプションがあります。 最初はdomアニメーションです。 2番目はキャンバスアニメーションです。



最初のオプションを使用し、テスト用にFacebookのloading.gifに似た処理を行うことにしました。 これが何が起こったのかです。



CSS： 

.loading div { opacity: 0; border: 1px #a6a6a6 solid; box-shadow: inset 0px 0px 3px #000; -moz-box-shadow: inset 0px 0px 3px #000; -webkit-box-shadow: inset 0px 0px 3px #000; background-color: #ebebeb; float:left; }




Javascript（jqueryで使用）： 

 function loadingShow(obj, time){ obj.animate({'opacity': 1}, time, function(){ loadingHide(obj, time); }); } function loadingHide(obj, time){ obj.animate({'opacity': 0.3}, time, function(){ setTimeout(function(){ loadingShow(obj, time); }, 500); }); } setInterval(function(){ $('.loading').each(function(){ var obj = $(this); if(obj.children('div').length>0) return; var w = 30; var h = 50; obj.append('<div style="width:'+w+'px;height:'+h+'px"></div>'); obj.append('<div style="width:'+w+'px;height:'+h+'px"></div>'); obj.append('<div style="width:'+w+'px;height:'+h+'px"></div>'); obj.append('<div style="clear:both"></div>'); var i = 0; var time = 100; obj.children('div').each(function(){ i++; var obj = $(this); setTimeout(function(){ loadingShow(obj, time*2); }, i*time); }); }); }, 100);




アニメーションを追加するには、次のようなことをする必要があります。 



 dom_object.append('<div class="loading"></div>');




このアプローチの利点：

  1. グラフィックを作成する必要はありません
  2. サーバーの負荷を軽減し、ページの読み込み速度を向上させます
  3. アニメーションはプログラムで簡単に調整できます。




このアプローチの短所：

  1. ブラウザでタブを切り替えると、タイミングが失敗します




Google Chromeでのみテスト済み。 このアニメーションは通常非常に短い時間で表示されるため、示されたマイナスは重要ではありません。タブを切り替える時間すらありません。


More articles:


All Articles