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 回答