Показывать экран загрузки во время применения фильтра

Применение фильтра к объекту изображения, который занимает весь холст, может занять пару секунд с большими изображениями, и я хочу отобразить экран загрузки, пока это происходит, но метод .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 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