1

我想在我网站中的滑块上使用出色的 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();
    }

});

});
4

2 回答 2

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();
        }
    });
});
于 2014-04-22T20:56:24.957 回答
0

我在 GitHub 上写的代码应该可以实现这个...

$("#container")
  .waitForImages({ 
      each: function( loaded, count ) { 
            if (loaded / count > .5) {
                  // 50% have loaded.
            }
       } 
  });
于 2014-04-23T22:55:53.537 回答