1

私のサイトにあるスライダーで素晴らしい jQuery waitForImages プラグイン ( https://github.com/alexanderdickson/waitForImages ) を使用したいと思います - その中には 75 個の画像があります - 一度にすべてをロードするには少し大きいです...私がやりたいのは、waitForImages を使用して、画像の 50% が読み込まれるまで読み込み DIV を表示することです。その時点で、success 関数を呼び出して他のことを行います...

これを行う方法について誰かアイデアはありますか？

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 に答える