Показване на екрана за зареждане, докато филтърът се прилага

Прилагането на филтър към обект на изображение, който заема цялото платно, може да отнеме няколко секунди с по-големи изображения и искам да покажа екран за зареждане, докато това се случва, но методът .show() не се задейства, докато филтърът не бъде приложен.

Текущ метод, който прилага филтъра:

applyFilter: function (index, filter) {
    var obj = designer.baseImage,
        $loading = $('#loading-canvas');

    console.log('show loading');
    $loading.show();

    obj.filters[index] = filter;

    obj.applyFilters(function () {
        console.log('hide loading');
        $loading.hide();
        designer.canvas.renderAll();
    });
}

Когато методът бъде извикан (при щракване), „покажи зареждането“ се регистрира незабавно в конзолата. Зареждащият div не се показва, докато филтърът не бъде приложен, в този момент екранът за зареждане мига, изчезва и „скриване на зареждането“ се регистрира в конзолата. Някакви идеи защо екранът за зареждане не се показва, когато „покажи зареждането“ е регистрирано в конзолата?

Редактиране: Единствената цел на екрана за зареждане е да покаже на потребителя, че нещо се случва


javascript canvas html jquery fabricjs
person Brian    schedule 07.05.2015    source източник
comment
Javascript е език с една нишка. Трябва да опитате напр.: $loading.show(0, function(){obj.filters[index] = filter; //all rest of filters logic here});   -  person A. Wolff    schedule 07.05.2015
comment
Един въпрос, който да зададете по отношение на дизайна: Трябва ли потребителят да вижда напредъка на натоварването или просто нещо се случва? За много хора отговорът е първият от чиста простота, но зависи от вашия дизайн.   -  person Muhammad Abdul-Rahim    schedule 07.05.2015
comment
@MariM те не трябва да виждат напредъка на зареждането, екранът за зареждане е да покаже, че нещо се случва   -  person Brian    schedule 07.05.2015
comment
Мисля, че съм разбрал погрешно: показваш ли лента за зареждане (т.е. 45%) или просто екран, който казва, че нещо се случва?   -  person Muhammad Abdul-Rahim    schedule 07.05.2015
comment
Няма лента за напредък, това е просто div, позициониран абсолютно над платното с въртящ се бутон, за да покаже, че нещо се случва @MariM   -  person Brian    schedule 07.05.2015
comment
Страхотно, това ми харесва да чувам! След това обърнете внимание на думите на А. Волф, като използвате пълни функции за обратно извикване, за да гарантирате, че редът на събитията се поддържа.   -  person Muhammad Abdul-Rahim    schedule 07.05.2015
comment
@A.Wolff след бърникането изглежда е някакъв проблем с времето, задаването на първия аргумент на „бързо“ работи, а „бавно“ работи дори по-добре. Благодаря   -  person Brian    schedule 07.05.2015

Отговори (2)


arrow_upward
0
arrow_downward

Мисля, че @A wolff е прав, можете да използвате

$(".btnDoStuff").click(function () {
        $(".loading").show(function(){
            //dosomestuff
            //remove for Loop, it is just to demonstrate  that some code          is taking time
            for (var i = 0; i < 1000000000; i++) {
                var j = i + 1;
            }
            $(".loading").hide();
        });
    });

но можете също да използвате window.setTimeout

person ShazebAli    schedule 07.05.2015

arrow_upward
0
arrow_downward

@A.Wolff беше супер близо, но изглежда, че е проблем с времето? Ето моето решение:

applyFilter: function (index, filter) {
    var obj = designer.baseImage,
        $loading = $('#loading-canvas');

    $loading.show('slow', function () {
        obj.filters[index] = filter;

        obj.applyFilters(function () {
            $loading.hide();
            designer.canvas.renderAll();
        });
    });        
}

Оригиналното решение не работи с първия аргумент на show(), който е 0, работи по-добре с „бързо“ и работи перфектно с „бавно“.

person Brian    schedule 07.05.2015