3

ユーザーが「次へ」または「前へ」ボタンをクリックしてナビゲートできる何百もの画像を含むスライドショーに取り組んでいます。私のコードが現在設定されている方法では、ユーザーが次または前をクリックするナビゲーション決定を行うたびに、その時点で新しい画像が読み込まれます (画像パスは配列に保存されます)。ナビゲートされるすべての画像の読み込み時間を改善するために、前の 5 つの画像と次の 5 つの画像をいつでも読み込む方法を考え出そうとしています。

したがって、ユーザーが現在 を使用している場合、までimageAry[i]ロードしたいと思います。そうすることで、スライドショーの操作感が大幅に向上します。imageAry[i-5]imageAry[i+5]

前もって感謝します。

マイ JavaScript

    var index=0;

    $('.catalog-img-container').attr("src", img_array[index]);
    $('#dialog').jqm();
    $(".next").click(function(){
        $('.catalog-img-container').attr("src", img_array[++index%arrayLength]);
    });         
    $(".previous").click(function(){
        if (--index < 0) index = arrayLength - 1;
        $('.catalog-img-container').attr("src", img_array[index%arrayLength]);
    });

私のマークアップ

        <div  class="catalogFrame">
            <img class="catalog-img-container" src="">
        </div>
4

2 に答える 2

2

この場合、プリロードする必要imagesがあります。これは、あなたがどのように求めているかです。あまり詳しく説明したり、贅沢すぎるものを作成したりすることなく、出発点として次のことを行います。

        var index=0;

        //Array to hold your preloaded img objects        
        var img = new Array();
        //Initial preload
        preload(img_array, index, 5);

        $('.catalog-img-container').attr("src", img_array[index]);
        $('#dialog').jqm();
        $(".next").click(function(){
            $('.catalog-img-container').attr("src", img_array[++index%arrayLength]);
            preload(img_array, index, 5);
        });         
        $(".previous").click(function(){
            if (--index < 0) index = arrayLength - 1;
            $('.catalog-img-container').attr("src", img_array[index%arrayLength]);
            preload(img_array, index, 5);
        }); 

       //Basic function to preload images in array, from currentIndex to desired +-range
       function preload(array, currentIndex, range) {
            for (i = currentIndex; i <= currentIndex + range; i++) {
                if(i<array.length){
                   img[i] = new Image();
                   img[i].src = array[i];
                }      
             }
             for (i = currentIndex; i >= currentIndex - range; i--) {
                if(i>=0){
                   img[i] = new Image();
                   img[i].src = array[i];
                }      
             }
        }

もちろん、これよりも複雑で詳細なソリューションを作成することもできますが、これは、画像を表示する前にプリロードする基本的な考え方です。

コツをつかめば、画像が読み込まれるときに新しい要素を動的に作成して挿入DOMし、画像をスライド/スクロールする UI を作成することができます。しかし、今のところ、コードの設定方法は問題なく機能するはずです。

これがうまくいくことを願っています。

于 2013-01-17T15:17:13.123 に答える
0

ジョンの解決策は良いです。さらに、バックグラウンドで画像をロードするために「プリロード」関数を非同期で実行できます。

setTimeout(function() { preload(img_array, index, 5); }, 0);

さらに、「プリロード」関数でビット配列を使用して、イメージが以前にロードされたかどうかを確認できます。それは時間を節約するはずです、つまり：

       var bitArray = new Array(NUM_IMAGES);
       for(i=0;i<NUM_IMAGES;i++) bitArray[i] = 0;

       //Basic function to preload images in array, from currentIndex to desired +-range
       function preload(array, currentIndex, range) {
            for (i = currentIndex; i <= currentIndex + range; i++) {
                if(i<array.length){
                   if(bitArray[i] == 1) continue;
                   img[i] = new Image();
                   img[i].src = array[i];
                   bitArray[i] = 1;
                }      
             }
             for (i = currentIndex; i >= currentIndex - range; i--) {
                if(i>=0){
                   if(bitArray[i] == 1) continue;
                   img[i] = new Image();
                   img[i].src = array[i];
                   bitArray[i] = 1;
                }      
             }
        }
于 2013-01-17T15:22:38.850 に答える