3

製品の360度ビューを表示する機能を実装しています。ビューは、サーバーからダウンロードされた一連のスタンドアロンイメージによって表されます。

ユーザーエクスペリエンスの観点から、シーケンス内の一部の画像は他の画像よりも重要です。したがって、コードが画像をダウンロードするときは、最初に重要な画像を取得してすぐに表示し、次に重要性の低い画像を取得したいと思います。

重要度順に画像を並べ替えて順番にダウンロードできることは知っていますが、非同期ダウンロードを利用して帯域幅を減らしたいと思います。

誰かがここで何かをお勧めできますか？

4

4 に答える 4

1

単に使用setTimeoutして、各画像間の遅延（500ms）をわずかに増やしてみませんか。

于 2012-06-25T18:23:29.430 に答える
1

あなたは最初の波で最も重要な画像をロードし、次にこのような他の画像をロードすることができます：

var firstImages = [];
var otherImages = [];

var count = firstImages.length;

var onloadfirstwave = function() {
   if (--count==0) {
      // lauches second wave
   }
};
// and for each image, do
firstImages[i].onload = onloadfirstwave;
firstImages[i].src = "someurl";

2番目のウェーブは、最初のイメージがロードされた後にのみ起動され、それらの最初のロードの並列処理が保持されます。

于 2012-06-25T18:27:31.577 に答える
0

ブラウザは非同期読み込みを処理し、並列ダウンロードの数を制限します。通常の方法で画像をプリロードするだけです。特別なことは何も必要ありません。

于 2012-06-25T18:23:44.310 に答える
0

htmlはjsまたはhtmlで作成できます。HTMLバージョン：..。 

var images = ['img1.jpg','img2.jpg',...],
    index = 0;
function load_next_image(){
  if(index<images.length){
    // if you want to create the img from js
    // this is the place to do so
    $('#img'+index).attr('src',images[index]).onload(load_next_image);
    index++;
  }else{
    // all images loaded
  }
}
load_next_image()
于 2012-06-25T18:32:48.773 に答える