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

我想在我的网站上的滑块上使用优秀的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

我在GitHub上写的代码应该实现这个……

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