Witam,

Mam taki mały problem, wyciągam sobie dane ajaxem, natomiast przed ich wyciągnięciem chce aby pojawiał sie ładny gif loadera i ogólnie wszystko się udało,
natomiast nie wiedzieć czemu gif zatrzymuje sie na ok 0,5-1sec (przestaje sie kręcić kółeczko ) zaraz przed wczytaniem danych, nie jest to jakis wielki problem ale nie rozumiem czemu tak sie dzieje.
Co ciekawe na chromie wszystko działa ok.

Podejrzewam ze gif sie przywiesza po wczytaniu danych i juz przy wykonywaniu pętli js ale nie jestem pewien.

Ktoś ma jakieś pomysły?

[PHP] pobierz, plaintext 
   $.ajax({
            url: "ajax/lista_pytan_ajax.php",
            async: true,
            method: 'post',
            dataType: "json",
            data: {
 
 
 
 
            },
            beforeSend: function() {
 
			$('#lista_pytan_table tfoot').html('<tr><td colspan="6"><center>Loading <i class="fa fa-spinner fa-spin"></i></center></td></tr>');	
 
 
            },
 
            success: function(dane) {
			var tabela='';
 
			    $.each(dane, function(i) {
 
			tabela += "<tr class='wybor' id='id_" + this.id + "' onclick=edycja(" + this.id + ",'show')>";
			tabela += '<td>' + this.id + '</td>';
			tabela += '<td>' + this.tresc + '</td>';
			tabela += '<td>' + this.data_dodania + '</td>';
			tabela += '<td>' + this.start + '</td>';
			tabela += '<td>' + this.end + '</td>';
			tabela += '<td>' + this.wlasciciel + '</td>';
 
			tabela += "</tr>";
				 });
 
 
 
			  $('#lista_pytan_table tfoot').empty();		
		      $('#lista_pytan_table tbody').html(tabela);
 
 
 
    $('#lista_pytan_table').dataTable();
 
			},
 
 
 
        });
 
 
 
 
 
		}
[PHP] pobierz, plaintext 

Tam nie masz przecież gifa
A co do zatrzymania animacji -> ponieważ pętla $.each "blokuje" przeglądarke. Poczytaj jak zrobic asynchroniczną pętle w js.

Wiem że tam niema gifa, ale jest <i class="fa fa-spinner fa-spin"></i> a to działa tak jak gif a krócej do napisania

Co do asynchronicznej pętli w js, troche się naczytałem i w końcu zdecydowałem sie to rozwiązać inaczej.
Całą tabelke robie sobie jeszcze w zapytaniu ajaxowym po czym przekazuje ją jako 1 element, chce ją wtedy wypisać zwyczajnym $('#lista_pytan_table tbody').html(dane.tabela);
i ku mojemu niezadowoleniu efekt sie nie zmienił :/. Tak jakby teraz ta funkcja html() blokowała mi przeglądarke.

Ponieważ większość metod js jest synchronicznych, robiąc to pętlą asynchroniczną osiągniesz efekt braku "zacięcia" się przeglądarki. Na internetach jest sporo przykładów.

ok ewidentnie to jest rozwiązaniem mojego problemu, ale że wyskoczyło kilka innych ciut bardziej priorytetowych kwestii niż zacinanie sie loadera bede musiał to przełożyc na później.
wrzuce kod jak będe miał gotowe.

Dzieki za naprowadzenie