javascript - JavaScript で画像を読み込んでいるときにスピナーを表示する方法

Question

私は現在、単一のグラフ (.png 画像) を表示するページを持つ Web アプリケーションに取り組んでいます。このページの別の部分には一連のリンクがあり、クリックするとページ全体がリロードされ、ページ中央のグラフを除いて以前とまったく同じように表示されます。

私がやりたいのは、ページ上のリンクがクリックされたときに、ページ上のチャートだけが変更されることです。ページのサイズは約 100 KB であり、これを表示するためだけにページ全体をリロードする必要がないため、これにより処理速度が大幅に向上します。

次のコードを使用して、これまでのところ機能するJavaScriptを介してこれを行ってきました

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

問題は、ユーザーがリンクをクリックしたときに、チャートが変更されるまでに数秒かかる場合があることです。これにより、クリックしても何も起こらなかった、またはシステムの応答が遅いとユーザーに思わせます。

私がしたいのは、画像の読み込み中の場所の代わりにスピナー/スロバー/ステータスインジケーターを表示することです。そのため、ユーザーがリンクをクリックすると、少なくともシステムが入力を受け取り、それについて何かを行っていることがわかります.

疑似タイムアウトを使用してスピナーを表示し、フリックして画像に戻るなど、いくつかの提案を試しました。

私が持っていた良い提案は、次を使用することです

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

スピナーが表示されているチャートよりもかなり小さいことを除いて、これは理想的です。

他のアイデアはありますか？

score 41 · Accepted Answer

このようなものを使用して画像をプリロードし、画像の読み込みが完了すると自動的に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(){};
    }
  }
}

score 19 · Accepted Answer

このように、とげのあるホイールの目の錯覚を与える静止画像を表示できます。

score 12 · Accepted Answer

jQueryのload()メソッドを使用すると、画像が読み込まれるとすぐに何かを実行することが簡単にできます。

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

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

score 10 · Accepted Answer

setTimeout() 関数 (詳細) の機能を使用します。これにより、タイマーを設定して、将来関数呼び出しをトリガーすることができます。呼び出しによって、現在の関数や他の関数の実行がブロックされることはありません(非同期)。

css 表示属性を none に設定して、チャート画像の上にスピナーを含む div を配置します。

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

nbsp は、スピナーが非表示のときに div が折りたたまれないようにします。それがないと、スピナーの表示を切り替えると、レイアウトが「けいれん」します

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";
}

score 4 · Accepted Answer

CSS を使用して、ローディングアニメーションを画像のコンテナの中央に配置された背景画像として設定します。

次に、新しい大きな画像をロードするときに、最初に src をプリロードされた透明な 1 ピクセルの gif に設定します。

例えば

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

large_image.jpg がロードされている間、背景は 1pix の透明な gif を通して表示されます。

score 3 · Accepted Answer

少し前に、スピナーの自動表示を処理するjQueryプラグインを作成しましたhttp://denysonique.github.com/imgPreload/

ソースコードを調べると、スピナーをいつ表示するかを検出し、読み込まれた画像の中央に表示するのに役立ちます。

score 3 · Accepted Answer

@duddle の jquery メソッドは気に入っていますが、load() が常に呼び出されるわけではないことがわかります (IE のキャッシュから画像を取得する場合など)。代わりにこのバージョンを使用します。

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

これは load を最大 1 回呼び出しますが、既に読み込みが完了している場合はすぐに呼び出します。

score 3 · Accepted Answer

Edの答えに基づいて、次のようなものを見たいと思います：

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

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

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

コールバックは画像を適切な場所に表示し、スピナーを破棄/非表示にすることができ、errorCallback はページが「ビーチボール」するのを防ぎます。すべてのイベント駆動型で、タイマーやポーリングはありません。さらに、イベントの設定中に画像の読み込みが完了したかどうかを確認するために if ステートメントを追加する必要はありません。画像がすばやく読み込まれます。

score 1 · Accepted Answer

1

lowsrc オプションとは別に、のコンテナで a も使用しbackground-imageましたimg。

于 2008-09-10T20:37:19.630 に答える

score 1 · Accepted Answer

イメージ src が存在しない場合 (http 404 エラー) にもコールバック関数が呼び出されることに注意してください。これを回避するには、次のように画像の幅を確認できます。

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

score 1 · Accepted Answer

スピナーをチャートと同じサイズの div に配置します。高さと幅がわかるので、相対的な配置を使用して正しく中央に配置できます。

score -1 · Accepted Answer

-1

ブラウザのキャッシュを回避するために、ランダムな数字を追加します。

于 2009-11-04T14:56:20.343 に答える

score -1 · Accepted Answer

@iAnのソリューションは私には良さそうです。私が変更する唯一のことは、setTimeout を使用する代わりに、画像の「Load」イベントにフックしようとすることです。これにより、画像のダウンロードに 3 秒以上かかる場合でも、スピナーが表示されます。

一方、ダウンロードにかかる時間が短い場合は、スピナーが 3 秒未満で表示されます。

javascript - JavaScript で画像を読み込んでいるときにスピナーを表示する方法

13 に答える 13

Related

Reference