[novakabg]

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

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

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

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

Ето моят код за ajax ползвам 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]

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

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

[novakabg]

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

Това е инжектиране на 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]

Ясно.

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

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]

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