- Някакви предложения за beforeSend зареждане!
WT форуми -> HTML / Javascript / CSS -> Някакви предложения за beforeSend зареждане!
Създайте нова тема Напишете отговор 
Автор Съобщение
novakabg
Турист
Турист

Регистриран на: 13/05/2016 2:29 pm

Support: 5
Bonus: 10
Мнения: 285
Мнение 07/02/2018 11:33 am     Някакви предложения за beforeSend зареждане! Отговорете с цитат


Здравейте, приятели!
Имам един метод преди да зареди ajax давам на посетителят да види loading gif!

Има ли начин да премахна този начин да не стой празно защото без някакви съобщение или анимация полетата не се виждат!

Като цяло бавно зарежда.

 
beforeSend: function() {
        $('#checkout .quickcheckout-content').html('<div><i class="fa fa-spinner fa-spin"></i></div>');
      },


Ето моят код за ajax Very Happy ползвам backbone дали не е от това така бавно да зарежда?

    $.ajax({
      url: 'index.php/#route/?route=login/login',
      dataType: 'html',
      cache: false,
      beforeSend: function() {
        $('#panel').html('<div><i class="fa fa-spinner fa-spin"></i></div>');
      },
      success: function(html) {
        $('#panel').html(html);
      },
      error: function(xhr, ajaxOptions, thrownError) {
        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
      }
    });

});
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Revelation
Потребител
Потребител

Регистриран на: 24/03/2013 3:23 pm

Support: 52
Bonus: 104
Мнения: 675
Мнение 07/02/2018 6:04 pm      Отговорете с цитат


1. Това инжектиране на HTML не ми се нрави на мен.
Аз бих си вградил спинъра с (например) клас inactive(display: none;) и просто да сменям класа към active (display: block; или inline). Това ще спести рендиране и обработване на ДОМ-а.

2. Можеш ли да дадеш някаква визуалция или жив пример за какво точно става въпрос, защото така е малко трудно да си представиш нещата.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
novakabg
Турист
Турист

Регистриран на: 13/05/2016 2:29 pm

Support: 5
Bonus: 10
Мнения: 285
Мнение 08/02/2018 2:53 pm      Отговорете с цитат


Благодаря за отговора приятел Smile

Това е инжектиране на HTML.

За жалост не мога да ти дам живо демо, извинявам се!


Мога дати дам как аз ги пиша тези неща.



Хипер семпло е като цяло:


<div id="login"></div>

  $(document).ready(function() {
    $.ajax({
      url: 'index.php?route=login/login',
      dataType: 'html',
      cache: false,
      beforeSend: function() {
        $('#login').html('<div class="wait" style="text-align:center;"><i class="fa fa-spinner fa-spin"></i></div>');
      },
      success: function(html) {
        $('#login').html(html);
      }
    });
  });


login.tpl

<div id="login-panel">
<input type="text" value="" placeholder="Име" />
<input type="text" value="" placeholder="Парола" />
</div>

И просто импортва login.tpl чрез ajax :)
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Revelation
Потребител
Потребител

Регистриран на: 24/03/2013 3:23 pm

Support: 52
Bonus: 104
Мнения: 675
Мнение 08/02/2018 3:54 pm      Отговорете с цитат


Ясно.

В началото се обърках какво искаш да постигнеш, но сега май разбрах.

beforeSend() в случая не ти върши работа, защото в момента, в който се изпрати заявката, beforeSend приключва.
Това, което можеш да направиш е преди Ajax request-а да покажеш loading gif-а и чак, когато зареди темплейта да го премахнеш.

Но между другото, можеш да направиш следното нещо.

1. В #panel контейнера си добави спинъра с default display: none
2. Скрипта го направи така:

Javascript code:

$('#panel > #spinner').bind('ajaxStart', function() {
$(this).show();
}).bind('ajaxStop', function() {
$(this).hide();
});

$.ajax({
url: 'index.php/#route/?route=login/login',
dataType: 'html',
cache: false,
success: function(html) {
$('#panel').append(html);
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});


Да речем, че #spinner ти съдържа спинъра с default display: none;
Това, което става е - показва ти спинъра, когато AJAX рикуеста започне и се скрива, когато приключи. Когато приключи рикуеста се задейства success евента и получаваш съдържанието. Така би трябвало да нямаш забавяне.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
novakabg
Турист
Турист

Регистриран на: 13/05/2016 2:29 pm

Support: 5
Bonus: 10
Мнения: 285
Мнение 09/02/2018 9:22 am      Отговорете с цитат


Благодаря сетих се и проработи Smile
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Покажи мнения от преди:    
Създайте нова тема   Напишете отговор    web-tourist.net Форуми -> HTML / Javascript / CSS Часовете са според зоната GMT + 2 Часа
Страница 1 от 1


 
Идете на:  
Не Можете да пускате нови теми
Не Можете да отговаряте на темите
Не Можете да променяте съобщенията си
Не Можете да изтривате съобщенията си
Не Можете да гласувате в анкети