0

偽の循環ローディング効果のために、jQuery ライブラリの FineUploader と Knob を使用しています。

私の現在のコードは次のとおりです。

    $('.dial').val(0).trigger('change').delay(2000);
    var myKnob = $(".dial").knob({
        'min': 0,
        'max': 100,
        'readOnly': true,
        'width': 90,
        'height': 90,
        'fgColor': "47CBFF",
        'dynamicDraw': true,
        'thickness': 0.3,
        'tickColorizeValues': true,
        'skin': 'tron'
    })
     $('.dial').knob();
    $('#uploader-div').fineUploader({
        request: {
            endpoint: "/updateavatar",
            paramsInBody: true
        },
        debug: true,
        template: '<div class="qq-uploader">' + '<pre class="qq-upload-drop-area"><span>{dragZoneText}</span></pre>' + '<div class="qq-upload-button btn btn-success">{uploadButtonText}</div>' + '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' + '<ul class="qq-upload-list"></ul>' + '</div>',
    }).on('submit', function (event, id, name, responseJSON) {
        $('.qq-uploader').css({
            'background': 'rgba(0,0,0,.3'
        });
        $('canvas').fadeIn();
        $({
            value: 0
        }).animate({
            value: 75
        }, {
            duration: 3000,
            easing: 'swing',
            step: function () {
                $('.dial').val(Math.ceil(this.value)).trigger('change');
            }
        });
    }).on('complete', function (event, id, name, responseJSON) {
        $({
            value: 75
        }).animate({
            value: 100
        }, {
            duration: 1000,
            easing: 'swing',
            step: function () {
                $('.dial').val(Math.ceil(this.value)).trigger('change');
            }
        });
        $('canvas').fadeOut();
        var image = $('#profile-pic img').attr('src');
        $('#profile-pic img').fadeOut(function () {
            $(this).attr('src', image).fadeIn('slow')
        });
    });

問題は、「ローダー」が 75% のアニメーションを終了する前に「完了」機能が実行されることです。

アニメーションが終了するまで「完了」コールバックを待機させたい...

おまけとして、アニメーションが実際に正確な valums fineuploader のパーセンテージを取るようにしたいので、それを偽造する必要はありません!

理解を深めるお手伝いができますか？お知らせ下さい！

4

2 に答える 2

0

これが問題になる可能性があるかどうかはわかりません。ここで間違っjquery css functionていsubmit functionます：

.on('submit', function (event, id, name, responseJSON) {
    $('.qq-uploader').css({
        'background': 'rgba(0,0,0,.3)'
    });  //-------------------------^--------missing ')' closing here

    .....// all other stuff

}).promise().done(function(){
    $({
        value: 75
    }).animate({
        value: 100
    }, {
        duration: 1000,
        easing: 'swing',
        step: function () {
            $('.dial').val(Math.ceil(this.value)).trigger('change');
        }
    });
    $('canvas').fadeOut();
    var image = $('#profile-pic img').attr('src');
    $('#profile-pic img').fadeOut(function () {
        $(this).attr('src', image).fadeIn('slow')
    });
});

.promise()と.done()関数を試すことができます。

ドキュメントから：

終わり：

型: Function( Promise animation, Boolean jumpedToEnd ) アニメーションが完了したとき (その Promise オブジェクトが解決されたとき) に呼び出される関数。(バージョン追加:1.8)

詳細はこちら

于 2013-03-28T05:31:49.847 に答える
0

完全なコールバックを「待機」させる方法はありません。Fine Uploader がサーバーからの応答を解析した後、完全なコールバックが実行されます。限目。

独自の進行状況バーを作成しようとしている場合は、進行状況コールバックを使用できますし、使用する必要があります。内部的には、これは Fine Uploader が使用するものです。

于 2013-03-28T13:18:14.987 に答える