1つのスプライトを使ったJavascript写真のスライドショー

Question

ただ1つの画像（スプライト）を使ってスライドショーのjsコードを書きました。 jsでは、背景の位置を変更して可視の画像を変更しています。

var first = true; 
function galesprite() { 
    if (first) { 
    var bg_pos = '0px 0px'; 
    first = false; 
    } else { 
    var bg_pos = $("#gmap").css('background-position'); 
    } 

    /* Sub función para cuando termine la animación de fadeOut, sinó la foto se 
    * cambia antes y no crea el efecto deseado. */ 
    $("#gmap").fadeOut(1000, function() { 
    var xy = bg_pos.split(' '); 
    var y = xy[1].split('px'); 
    var newy = parseInt(y) + 200; 
    var bgpos = xy[0] + ' ' + newy + 'px'; 
    $('#gmap').css('background-position', bgpos); 
    $("#gmap").fadeIn(1000); 
    setTimeout('galesprite()', 4000); 
    }); 
} 

これは影響を受けています。バックグラウンドイメージを置くcssクラス、垂直イメージのセット。各画像の高さは200ピクセルです。

<div id="gmap"></div> 

#gmap { 
    height: 200px; 
    width: 270px; 
    background-image: url('../images/diapositiva-home/surf.jpg'); 
    background-position: 0px 0px; 
} 

私が行うのは、ループの定期的にdivのバックグラウンドのY位置を増やすことです。それはイメージを変えるようです。 このアイデアは、10枚の画像を読み込むのではなく、スプライトを使ってページの読み込み時間を最小限に抑えることです。 改善できることはありますか？ありがとう。

Answer 1

スプライトは、大きなギャラリーではなく小さなアイコンに最適です。

スプライトが600kbの場合、全体がダウンロードされるまで（例外を除いて）最初のイメージを表示することはできません。

私は一般的に大規模なJPEGファイルのためのスプライトを避け、単にこれはあなたが現在のものを示す一方で、次の画像をダウンロードし、あなたはそれが終了した知っているとき、それに切り替えることができることを意味...

var img = new Image(); 

img.onload = function() { 
    // Loaded, we can now show the next image 
} 

img.src = 'bob.jpg'; 

を行いますダウンロード。