0

ネストされたliを使用してスライドショーを作成しています:

<ul id="ss_images_set">
                <li>
                    <img link="images/koala_1.jpg" />
                    <p class="img_caption">&#169;Copyright</p>
                    <p class="img_author">John Merriam</p>
                    <p class="img_href">http://www.twitter.com</p>
                    <p class="img_hashtag">JohnMerriam</p>
                </li>

このスライドショーには毎日新しい画像をアップロードするので、セットには多数の画像 (数百) が含まれます。非常に多くのプリローダーが存在するため、次のイメージのみをロードするために何を使用するかについて混乱しています。スライドショーには画像のプリローダーがありますが、次の画像が明らかにキャッシュされていないため、適切に動作しているとは思いません (スライドショーの下のコンテンツは、次の画像に移動するときに上下にジャンプします)。

プリローダー スクリプトは次のとおりです。

function preload_images(){
var pre_image = curr_img - 1;
if(pre_image < 0) pre_image = (tot_elements-1);

var curr_obj = 0;

if(!$('#img_preloaded_'+pre_image).length > 0){
    curr_obj = slideshow[pre_image];
    $('body').append('<img src="'+curr_obj["img_url"]+'" id="img_preloaded_'+pre_image+'" class="preload_box" />');
}

var pre_image = curr_img + 1;
if(tot_elements==pre_image) pre_image = 0;
if(!$('#img_preloaded_'+pre_image).length > 0){
    curr_obj = slideshow[pre_image];
    $('body').append('<img src="'+curr_obj["img_url"]+'" id="img_preloaded_'+pre_image+'" class="preload_box" />');
}

なぜキャッシュしないのかわかりません。書き方が間違っていますか？次のフィドルの間違った場所にありますか?

JS をいじる: http://jsfiddle.net/doobada/9m9eq/

現在の元。スライド ショーの (以下のコンテンツは上下にジャンプします): https://www.assembla.com/code/cfrepo/subversion/node/blob/trunk/index.html#image=JohnMerriam

わかりました、jQuery は私の強力なスイートではありません (現在 tuts+ コースを受講しています) が、これを理解するのに 3 週間もかからないはずです。

ご協力いただきありがとうございます。

4

1 に答える 1

0 
var newImageUrl = 'someimage.png';

/* preload an image using jQuery: */
$('<img>').attr( {
    src: newImageUrl
} ).load(function() {
    /* image is loaded and could be used */
} );
于 2012-11-01T13:45:46.987 に答える