使用jQuery waitForImages等待直到加载50％的图像，然后调用成功函数 [英] Using jQuery waitForImages to wait til 50% of images are loaded then call success function

问题描述

我想使用很棒的jQuery waitForImages插件( https://github.com/alexanderdickson/waitForImages)在我位于网站上的滑块上-里面有75张图像-因此一次加载全部图像有点大...我想做的是使用waitForImages来显示加载的DIV，直到可以说50％的图像已加载-此时调用成功函数并执行其他操作...

I would like to use the great jQuery waitForImages plugin (https://github.com/alexanderdickson/waitForImages) on a slider I have in my site - it has 75 images within it - so its a bit large to load all in one go... What I would like to do is use waitForImages to show a loading DIV until lets say 50% of the images are loaded in - at that point call the success function and do my other stuff...

有人对此有任何想法吗?

Anyone any ideas on how to do this?

https://github.com/alexanderdickson/waitForImages

我可以在滑块上很好地工作，以等待100％的图像加载，但是这花费的时间太长了...所以想按一定比例加载，然后调用成功函数来启动滑块等.

I have it working nicely on my slider waiting for 100% of the images to load but that takes too long... so want to load in a percentage and then call the success function to initiate the slider etc.

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

Current working code to wait for 100% of images to load in is

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

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

// do stuff here like load the slider!

});

} 
});

我越来越近了-使用下面的代码来处理新加载的图像-问题是，当您再次查看已加载了图像的页面时-它永远不会调用成功(halfDone)函数. ..有什么想法吗?

I am getting close - have got this working on new load of the images with the code below - issue is, that when you view the page again with the images already loaded in - it never calls the success (halfDone) function... any ideas?

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

});

}); 

推荐答案

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

Use the progress callback to execute your own success callback function when half of them are done.

$(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();
        }
    });
});

这篇关于使用jQuery waitForImages等待直到加载50％的图像，然后调用成功函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！