Question

我想在我正在开发的页面中播放幻灯片，但它包含大量图像，总大小超过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>

提前致谢！

Answer 1

我已经对你的代码进行了一些测试，做了几处修改后就开始工作了。

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);
});

幻灯片与图像预加载一个和延迟

1 个答案: