Някакви предложения за beforeSend зареждане!

Post Reply
novakabg
Турист
Турист
Posts: 337
Joined: Fri May 13, 2016 12:29 pm
Contact:

Някакви предложения за beforeSend зареждане!

Post by novakabg » Wed Feb 07, 2018 9:33 am

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

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

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

Code: Select all

 
beforeSend: function() {
        $&#40;'#checkout .quickcheckout-content'&#41;.html&#40;'<div><i class="fa fa-spinner fa-spin"></i></div>'&#41;;
      &#125;,
Ето моят код за ajax :D ползвам backbone дали не е от това така бавно да зарежда?

Code: Select all

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

User avatar
Revelation
Потребител
Потребител
Posts: 777
Joined: Sun Mar 24, 2013 1:23 pm
Answers: 57

Post by Revelation » Wed Feb 07, 2018 4:04 pm

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

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

novakabg
Турист
Турист
Posts: 337
Joined: Fri May 13, 2016 12:29 pm
Contact:

Post by novakabg » Thu Feb 08, 2018 12:53 pm

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

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

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


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



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


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

Code: Select all

  $&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
    $.ajax&#40;&#123;
      url&#58; 'index.php?route=login/login',
      dataType&#58; 'html',
      cache&#58; false,
      beforeSend&#58; function&#40;&#41; &#123;
        $&#40;'#login'&#41;.html&#40;'<div class="wait" style="text-align&#58;center;"><i class="fa fa-spinner fa-spin"></i></div>'&#41;;
      &#125;,
      success&#58; function&#40;html&#41; &#123;
        $&#40;'#login'&#41;.html&#40;html&#41;;
      &#125;
    &#125;&#41;;
  &#125;&#41;;


login.tpl

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

И просто импортва login.tpl чрез ajax &#58;&#41; 

User avatar
Revelation
Потребител
Потребител
Posts: 777
Joined: Sun Mar 24, 2013 1:23 pm
Answers: 57

Post by Revelation » Thu Feb 08, 2018 1:54 pm

Ясно.

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

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

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

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

[js]
$('#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);
}
});
[/js]

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

novakabg
Турист
Турист
Posts: 337
Joined: Fri May 13, 2016 12:29 pm
Contact:

Post by novakabg » Fri Feb 09, 2018 7:22 am

Благодаря сетих се и проработи :)

Post Reply