使用jQuery的waitForImages等待直到50％的图像加载然后调用成功函数

Question

我想在我的网站的滑块上使用伟大的jQuery waitForImages插件（https://github.com/alexanderdickson/waitForImages） - 它有75个图像 - 所以它有点大，一次加载所有...我想要做的是使用waitForImages来显示加载DIV，直到可以说50％的图像加载 - 在这一点上称为成功功能，做我的其他东西...

任何有关如何做到这一点的任何想法？

https://github.com/alexanderdickson/waitForImages

我有它在我的滑块等待图像的100％加载工作很好，但时间过长...所以想用百分比来加载，然后调用函数成功启动滑块等

当前工作的代码等待图像加载100％是

$.ajax({ 
cache: false, 
url: 'slides.html', 
success: function(data) { 

    $('.bxslider').html(data).hide().waitForImages(function() { 

// do stuff here like load the slider! 

}); 

} 
}); 

我越来越近 - 已经得到这个工作与下面的代码图像的新的负荷 - 问题是， ，当你查看页面时获得已经加载的图像 - 它永远不会调用成功（halfDone）函数......任何想法？

var halfDoneFlag = false; 

function halfDone() { 

console.log("10% of images are loaded, crack on!"); 

} 


$('.bxslider').load("slides.html", function(){ 

alert("slide code are loaded in"); 


$('.bxslider').waitForImages($.noop,function(loaded, count){ 

    if (!halfDoneFlag && loaded > count/10) { 
     halfDoneFlag = true; 
     halfDone(); 
    } 

}); 

}); 

Answer 1

使用进度回调执行您自己的成功回调函数时，一半完成。

$(document).ready(function(){ 
    function halfDone() { 
     console.log("Half of them are done!"); 
    } 
    var halfDoneFlag = false; 
    $(theImages).waitForImages(function(){ 
     // fallback just in case it never reaches half? 
     if (!halfDoneFlag) { 
      halfDoneFlag = true; 
      halfDone(); 
     } 
    }, function(loaded, count){ 
     if (!halfDoneFlag && loaded > count/2) { 
      halfDoneFlag = true; 
      halfDone(); 
     } 
    }); 
}); 

Answer 2

的code I wrote on GitHub应该做到这一点...

$("#container") 
    .waitForImages({ 
     each: function(loaded, count) { 
      if (loaded/count > .5) { 
        // 50% have loaded. 
      } 
     } 
    });