Question

尝试使用waitforimages插件以50％的进度运行成功函数 https://github.com/alexanderdickson/waitForImages

我在Using jQuery waitForImages to wait til 50% of images are loaded then call success function尝试了接受的答案但没有运气。也许从那时起插件改变了一些东西，但它只是立即触发了成功功能。

有没有人有幸运行50％的图像加载功能？

谢谢！富

需要它的元素

<section id="s-hero-prim">
<div id="loading"><i class="animated fadeIn fa fa-circle-o-notch fa-spin"></i></div>
<div class="slides">
    <figure class="img hero" style="background-image: url(/admin/wp-content/uploads/2017/07/Dancing-Bhutan-1_2560x1440_acf_cropped.jpg);"></figure>
    <figure class="img hero" style="background-image: url(/admin/wp-content/uploads/2017/07/DSC_0587_2560x1440_acf_cropped.jpg);"></figure>
    <figure class="img hero" style="background-image: url(/admin/wp-content/uploads/2017/09/Colombia-red-house-blue-door-2-1_2560x1440_acf_cropped-2.jpg);"></figure>
    <figure class="img hero" style="background-image: url(/admin/wp-content/uploads/2017/07/South-Africa-Dune_2560x1440_acf_cropped.jpg);"></figure>
    <figure class="img hero" style="background-image: url(/admin/wp-content/uploads/2017/07/Australia-opera-1-3_2560x1440_acf_cropped.jpg);"></figure>
    <figure class="img hero" style="background-image: url(/admin/wp-content/uploads/2017/08/Burma-cover-correction-web_2560x1440_acf_cropped.png);"></figure>
    <figure class="img hero" style="background-image: url(/admin/wp-content/uploads/2017/08/Uniquely-Europe_2560x1440_acf_cropped.png);"></figure>
</div>

和我尝试的代码

function startSlideshow() {
    $('#s-hero-prim').addClass('loaded');
}
var halfDoneFlag = false;
$('#s-hero-prim').waitForImages(function(){
    // fallback just in case it never reaches half
    if (!halfDoneFlag) {
        halfDoneFlag = true;
        startSlideshow();
    }
}, function(loaded, count){
    if (!halfDoneFlag && loaded > count/2) {
        halfDoneFlag = true;
        startSlideshow();
    }
});

等到50％加载

0 个答案: