0

開発中のページにスライドショーを表示したいのですが、大量の画像が含まれており、合計サイズが 15 MB を超えています。そのため、スライドショーが開始する前にすべての画像をプリロードするのは困難です。スライドをフェードインして 5 秒間維持したい。前の画像が表示されている間に次の画像をプリロードしたい。画像のサイズが異なるため、読み込み後に次の画像が前の画像の後ろに隠れることはありません。何か助けはありますか？このコードを試しましたが、成功しませんでした:

var slidesImages = $('.slide_list img');
slidesImages.hide();
function loadMyImage(){

var image = slidesImages.eq(0);
var image_src = image.attr('data-src');

$('<img>').load(function(){

    $(".slide").hide().attr('src', image_src).fadeIn("slow");
    if(i<slidesImages.length) {
        slidesImages.splice(0, 1);
    } else {
        clearInterval(interval);
    }

}).attr('src',image_src);

}
var interval = window.setInterval(loadMyImage(), 5000);

そしてhtml：

<div align="center"><img class="slide" src="imagens/loading.gif"></div>
<ul class="slide_list">
    <li><img data-src='/zenphoto/albums/pag_inicial_slideshow/20130102_164730.jpg' src='imagens/loading.gif' alt='' title='' height='300'></li>
    <li><img data-src='/zenphoto/albums/pag_inicial_slideshow/20130102_161616-2.jpg' src='imagens/loading.gif' alt='' title='' height='300'></li>
    <li><img data-src='/zenphoto/albums/pag_inicial_slideshow/20130102_161048.jpg' src='imagens/loading.gif' alt='' title='' height='300'></li>
    <li><img data-src='/zenphoto/albums/pag_inicial_slideshow/20130102_154523.jpg' src='imagens/loading.gif' alt='' title='' height='300'></li>
    <li><img data-src='/zenphoto/albums/pag_inicial_slideshow/20130102_152713.jpg' src='imagens/loading.gif' alt='' title='' height='300'></li>
    ...                 
</ul>

前もって感謝します！

4

1 に答える 1

0

あなたのコードを少しテストし、いくつかの変更を加えたところ、動作するようになりました。

function loadMyImage(obj){

        var image = obj.eq(0);
        var image_src = $(image).attr('data-src');

        $('<img>').load(function(){

            $(".slide").hide().attr('src', image_src).fadeIn("slow");
            if(obj.length) {
                obj.splice(0, 1);
            } else {
                window.clearInterval(interval);
            }

        }).attr('src',image_src);

}

$(window).load(function () {
    var slidesImages = $('.slide_list img');
    slidesImages.hide();
            var interval = window.setInterval(function () { loadMyImage(slidesImages); }, 2000);
});
于 2013-10-24T09:54:10.397 に答える