0

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

我在Using jQuery waitForImages 中尝试了接受的答案，以等待 50% 的图像被加载，然后调用成功函数并且没有运气。也许从那时起插件发生了一些变化，但它只是立即触发了成功功能。

有没有人有运气让一个函数在加载 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();
    }
});
4

0 回答 0