javascriptで一連の画像を読み込むのはなぜですか？

Question

ウェブサイトにjavascriptで画像シーケンス（50画像）をロードしていますが、ローカルで正常に動作しますが、サイトが稼動しているときには遅く/バギーです。私はそれが既にファイルサイズがかなり小さいので、画像を最適化することの問題だとは思わない。 （それぞれ68kb、合計で1MBです）。また、同じホストから来る私のサイトに4MBのGIFをロードする方が速いです。これを改善するために私のコードに変更できるものはありますか？

 $(document).ready(function(){ 
     var counter = 1; 
     setInterval(function(){ 
      var src = 'spacefox_TT/'; 
      $('#animation').attr('src' , src+counter+'.jpg'); 
      counter++; 
      if(counter > 49){ 
       counter = 1 
      } 
     }, 50); 
    }); 

（ジャバスクリプトために）私のHTMLは非常に簡単です、次のようになります：

は、ここで私は、現在持っているものだスクリプトがちょうど49までのJPGをインクリメントさ

<img id="animation" src="spacefox_TT/1.jpg"> 

そしてそう繰り返す。

申し訳ありません申し訳ありませんが、これが明確でない場合は、何かが役立ちます！事前に感謝します

Answer 1

これらのイメージをサーバーからユーザーのブラウザにダウンロードするには時間がかかります。そのため、最初はバグとして表示されます。イメージのsrcを50msごとに変更するのではなく、gifを使用することをお勧めします。そうすることで、アニメーションはロードされる前に開始しません。あなたの方法はバグではなく、一般的に効率的ではありません。

あなたのメソッドを本当に使いたい場合は、jQueryのonloadを使うことをお勧めします。 setIntervalをいくつかの関数にラップして、すべてのイメージがロードされた後にのみ実行することができます。

Answer 2

ブラウザのデベロッパーツールを開き、[ネットワーク]タブを見ると、何千もの画像リクエストがキューに入れられていることがわかります。それらを追加し直してください。

いくつかの選択肢がありますが、大容量のファイルを引き出しても、一般にパフォーマンスが向上するネットワーク要求が少ないことに注意してください。

50枚の画像を1枚の画像にまとめて、実際には幅が広い（同じサイズの50枚のサイドバイサイド画像）ようにすることをおすすめします。あなたのベースHTMLは次のようになります。

<div class='image-frame'> 
    <img src='/image.jpg' alt='Product Image reel' /> 
</div> 

その後、あなたの基本CSSのようなものが考えられます。

.crop { 
    width: 200px; 
    height: 150px; 
    overflow: hidden; 
} 

.crop img { 
    width: 400px; 
    height: 300px; 
    margin: -75px 0 0 -100px; 
} 

そして、あなたは画像間のシフトする画像に負と正のマージンを適用するためにJavaScriptを使用することができます。幅や余白などは使用しているフレームのサイズに合わせて調整する必要があることに注意してください。現在使用している画像を詳細に見ていませんでした。