Как можно сделать лоадер на клике JS?

Question

[ImagineWorld]

Как сделать лоадер по клику на элемент(кнопку, ссылку), чтоб пока контент прогружается динамически, выводился лоадер, а после загрузки - исчезал.

Comments

[Kerm]

В начале работы скрипта создавать динамический объект внутри контейнера с лоадером, а после выполнения скрипта его удалять?

Вот, так же может Вы это ищите: https://mdbootstrap.com/docs/jquery/components/spi...

[ImagineWorld]

Kerm, У меня вот так сделано

startLogin: ()=>{

        document.title='Login';
        window.location.hash='';
        $('body').empty();
        $('body').append(template.login_form);
        $('body').append(template.footer_html);
        onLoad.scriptsOn();
        $('.singin_button').click(function(e) {

          e.preventDefault();
        $('.login').append('<img src="./images/preloader.gif" class="preloader">');
        getData('/sapi/session/login', 'POST', $('.login').serialize()).then(result=>{
          $('.login').append('<img src="./images/preloader.gif" class="preloader">');
          if(result.code=='0') {
        
              onLoad.stattPageRender();
              onLoad.pageLoader();
        
              getData('/sapi/news/geturgent','POST',).then(result=>{
                console.log(result);
                if (result.code=='0') {
                  $('.main').append(template.poup_fade);
                $('.urgent-news').append(result.message);
                }
              })
              onLoad.userInfoRender(userinfo);
              onLoad.logOut();
          } else if(result.code=='104' || result.code=='1004' ) {
            $('.error-message').remove();
            $('.login').append('<div class="error-message"><p>Неверная комбинация пары логин/пароль.</p><p> Повторите попытку</p></div>');
          } else {
            $('.error-message').remove();
            $('.login').append('<div class="error-message"><p>Ошибка загрузки данных. Проверьте интернет соединение</p></div>');
          }
       $('.preloader').remove();
        });
        });
      },

Это форма логина, там идёт AJAX запрос по клику и надо чтоб пока идёт запрос и отрисовывается без перезагрузки страница, чтоб показывался лоадер. Я сделал его добавление вначале функции и удаление в конце, однако когда я кликаю, то страница как бы зависает на время работы функции, курсор становится указателем и лоадер на показывается, а потом страница отвисает аж когда функция отработала и страница отрисоваалась.

[Kerm]

ImagineWorld, да какой то код не понятный у Вас, почему половина на javascript написана, половина на jquery, вот от этого кода вообще $('.login').serialize()).then(result=>{....вообще в шоке

[ImagineWorld]

Kerm, почему в шоке?)

Answer 1

[LEXA_JA]

async function clickHandler(event) {
        startLoading();

        try {
            const result = await loadSomething();

            success(result);
        } catch (error) {
             fail(error)
        } finally {
             stopLoading();
        }
    }

Где startLoading и stopLoading показывают\скрывают лоадер, например вставляют img со спинером или переключают класс. Опционально, через fail\success можно показывать дополнительные индикаторы.

Comments

[ImagineWorld]

У меня вот так реализован логин, надо сюда лоадер подставить.

startLogin: ()=>{

        document.title='Login';
        window.location.hash='';
        $('body').empty();
        $('body').append(template.login_form);
        $('body').append(template.footer_html);
        onLoad.scriptsOn();
        $('.singin_button').click(function(e) {

          e.preventDefault();
        $('.login').append('<img src="./images/preloader.gif" class="preloader">');
        getData('/sapi/session/login', 'POST', $('.login').serialize()).then(result=>{
          $('.login').append('<img src="./images/preloader.gif" class="preloader">');
          if(result.code=='0') {
        
              onLoad.stattPageRender();
              onLoad.pageLoader();
        
              getData('/sapi/news/geturgent','POST',).then(result=>{
                console.log(result);
                if (result.code=='0') {
                  $('.main').append(template.poup_fade);
                $('.urgent-news').append(result.message);
                }
              })
              onLoad.userInfoRender(userinfo);
              onLoad.logOut();
          } else if(result.code=='104' || result.code=='1004' ) {
            $('.error-message').remove();
            $('.login').append('<div class="error-message"><p>Неверная комбинация пары логин/пароль.</p><p> Повторите попытку</p></div>');
          } else {
            $('.error-message').remove();
            $('.login').append('<div class="error-message"><p>Ошибка загрузки данных. Проверьте интернет соединение</p></div>');
          }
       $('.preloader').remove();
        });
        });
      },

Это форма логина, там идёт AJAX запрос по клику и надо чтоб пока идёт запрос и отрисовывается без перезагрузки страница, чтоб показывался лоадер. Я сделал его добавление вначале функции и удаление в конце, однако когда я кликаю, то страница как бы зависает на время работы функции, курсор становится указателем и лоадер на показывается, а потом страница отвисает аж когда функция отработала и страница отрисоваалась.