Question

我在一个简单的html页面上有一个preloader div。页面加载后淡出。当我重新加载图像时，它不会再次淡出，我怎样才能重置＆＃39;预加载器？

HTML

<div class="container">
<div id="preloader"></div>
    <ul>
        <li id="k1" class="topimg"></li>                
        <li id="k2" class="topimg"></li>                
        <li id="k3" class="topimg"></li>                
    </ul>
<div id="reload"></div>
</div>

jQuery的：

$(function () {

function loader(){ 
    $("#preloader").css({'display':'block'});               
    $(window).load(function() {
        $("#preloader").fadeOut();
    });
}; //loader

loader();

/* I reload the images on click (image names are 1, 2, 3, 4, 5, 6....) */

$('#reload').click(function(){      
            loader(); /// <<< preloader div not fades out again

            // change images
            i1 += 3;                    
            i2 += 3;                    
            i3 += 3;                    
            $('#k1').css({'background':'url("images/' + i1 + '.jpg")'});
            $('#k2').css({'background':'url("images/' + i2 + '.jpg")'});
            $('#k3').css({'background':'url("images/' + i3 + '.jpg")'});
    });

});

Answer 1

无法测试这个，因为你没有包含足够的代码，但我的猜测是当你按下重新加载按钮时，这只影响包含你的图像的div？

此函数还调用loader（）函数，该函数告诉预加载器被设置为阻止，但是由于您的页面已经被加载，因此您无法运行隐藏它$(window).load(function() { });的调用。

<强>更新

我不确定你是否可以在div上运行.load（）检查，因为你按下按钮时只需将图像插入其中，有更多了解jquery的人可以为你解答这个问题。但是我在下面做的只是直接在#preloader上调用你的显示，然后添加一个加载的类。 if语句只是检查它是否有这个类，如果有，它会再次淡出。

$('#reload').click(function(){      
    $("#preloader").css({'display':'block'});
    $("#preloader").addClass( "loaded" );

    $('#k1').css({'background':'url("http://placehold.it/300")'});

    if ($("#preloader").hasClass( "loaded" ) ) {
           $("#preloader").fadeOut();
    }
});

更新2

我很想知道.load（）可以调用什么，可以在<iframe>和<img>标签上完成，如果这适用于你，你可以指向img src和检查它是否已加载然后淡出预加载器。请参阅示例fiddle和下面的代码

$('#reload').click(function(){      
    $("#preloader").css({'display':'block'});

    $('#mainImg').attr('src', 'http://placehold.it/300');     

    $('#mainImg').load(function(){
        $("#preloader").fadeOut();
    });

});

Preloader div不再淡出 - jQuery

1 个答案: