どのようにスピナーに読み込み中に画像によJavaScript

StackOverflow https://stackoverflow.com/questions/51352

  •  09-06-2019
  •  | 
  •  

質問

私は現在、ウェブアプリケーションがあるページを表示する単一の表。png画像）となっています。他のページがリンクをクリックすると、ページ全体の固とうとして前を除き図表の中に表示されます。

何をしたいのですがリンクをクリックしたページだけの図にページが変更されます。この速度も非常にしているページの約100kb大なったブページ全体を表示です。

れをやってきたということこのよJavaScript、これまでに、以下のコード

document.getElementById('chart').src = '/charts/10.png';

問題は、ユーザがクリック、リンクをクリックで目を向けられるようになるまでの秒前の図では変化します。これによりユーザーの考えをクリックしない、またはシステムは対応いたします。

したいと思いなが表示スピンナー/throbber/ステータスインジケータの代わりに画像をロード中であり、そのユーザにリンクしい少なくとも、システムはその入力があって何かをするのです。

いう提案であってもpsudo時間をスピンナー、フリック操作のイメージです。

良い提案または以下の

<img src="/charts/10.png" lowsrc="/spinner.gif"/>

るなげていくことができれば理想で、スピナーは大きく以下の図が表示されます。

その他の考えになりますか。

役に立ちましたか？

解決

に使用しましたようにこのプリロードの画像を自動的に通っjavascriptの画像をロードを完了した.したいチェック完了する前に設定コールバックで画像を見つけることのできるキャッシュされていただくようお願い致しお電話のコールバック.

function PreloadImage(imgSrc, callback){
  var objImagePreloader = new Image();

  objImagePreloader.src = imgSrc;
  if(objImagePreloader.complete){
    callback();
    objImagePreloader.onload=function(){};
  }
  else{
    objImagePreloader.onload = function() {
      callback();
      //    clear onLoad, IE behaves irratically with animated gifs otherwise
      objImagePreloader.onload=function(){};
    }
  }
}

他のヒント

することができるの静止イメージを与える 錯視のspinny-ホイールのように、これらの.

を使用 load() 方法 jQuery, により容易に可能でなんとかしてすぐに画像として読み込み:

$('img.example').load(function() {
  $('#spinner').fadeOut();
});

参照: http://api.jquery.com/load-event/

使用電力のsetTimeout()関数(詳細情報-こで設定するタイマーがトリガー呼び出し、将来を呼び出していることを な ブロックの実行の流動その他の機能(非同期.).

位置部を含むスピンナー上の図では画像、cssの表示属性を設定無

<div>&nbsp;<img src="spinner.gif" id="spinnerImg" style="display: none;" /></div>

のnbspの部崩壊時のスピナーが隠れています。なときに表示を切り替えのスピンナー、レイアウト"twitch"

function chartOnClick() {
  //How long to show the spinner for in ms (eg 3 seconds)
  var spinnerShowTime = 3000

  //Show the spinner
  document.getElementById('spinnerImg').style.display = "";

  //Change the chart src
  document.getElementById('chart').src = '/charts/10.png';

  //Set the timeout on the spinner
  setTimeout("hideSpinner()", spinnerShowTime);
}

function hideSpinner() {
  document.getElementById('spinnerImg').style.display = "none";
}

CSSを利用設定の負荷としてのアニメーションの中心に背景画像の画像の容器です。

その時の荷重の大きいイメージ、最初にセットのsrcに予圧透明性の1ピクセルgifなどでお送りください。

例えば

document.getElementById('mainimg').src = '/images/1pix.gif';
document.getElementById('mainimg').src = '/images/large_image.jpg';

ながら、large_image.jpg 積載の背景を通じて1pix透明gifなどでお送りください。

建物の応答、表示のようなもの:

function PreLoadImage( srcURL, callback, errorCallback ) {
     var thePic = new Image();

     thePic.onload = function() {
          callback();
          thePic.onload = function(){};
     }

     thePic.onerror = function() {
          errorCallback();
     }
     thePic.src = srcURL;
}

ごのコールバックで画像を表示でその適切な場所、処理/非表示のスピナーのerrorCallback防止のページから"beachballing".すべてのイベント駆動、タイマーはポーリング、あいだに、追加の場合は諸表のチェックの場合画像の完成搭載する設定のイベント-それらに合わせてあらかじめ設定さいトリガを問わず、いかに早くの画像。

一時間前まっているjQueryプラグインを取り扱うを表示するスピンナーを自動的に http://denysonique.github.com/imgPreload/

しくみると、そのソースコードがお手伝いを検出時の表示のスピンナーと共に表示するまでのロード済みのイメージです。

私@duddleのjquery方法はload()だけではないというなどの画像から取得されたキャッシュIE）その結果が、先ほど任天堂さんの版ではなく:

$('img.example').one('load', function() {
  $('#spinner').remove();
}).each(function() {
  if(this.complete) {
    $(this).trigger('load');
  }
});

これらの負荷もさほど多くすぐの場合は完了しています。

のスピナー、事業部と同じサイズ表をご存知の高さと幅が利にご利用いただけますの相対位置決めセンターを用い、正しく表してください。

ほかのlowsrcオプション、私も使って background-image の img's"コンテナ.

このコールバック関数をとる場合、画像srcは存在しない(http404エラー)。これを避けるために確認できますの幅、画像のように:

if(this.width == 0) return false;

@イアン-ソリューションに見えています。のの変更はでsetTimeoutってみて、フックの画像'Load'イベントです。この場合、画像間に3秒をダウンロードして、だるspinner.

他方、たとすれば、少ない時間のダウンロードからのスピンナーのために以下の3秒です。

いつの乱数を避けるためのブラウザのキャッシュ.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top