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.
            }
       } 
  });

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

2 个答案: