JQuery loading (spinneris) ielādējoties datu blokam

[senters]

Kā šim blokam pirms db datu ielādes uzlikt smuku loading spinneri?

To vajag, jo ielādējot ~1000 eventus, rodas neliela 2-3sec pauze.

 

 

// Kategoriju filtrs [JQUERY]
$(function(){
$('#filter_category').click(function(){
$('ul.menu_category').slideToggle('medium');
$('ul.menu_category a').click(function(){
var category_id = $(this).attr("id");

//alert(category_id);
$.ajax(
{
type: "POST",
url: "inc/category_results.php",
data: "category_id="+ category_id,
cache: false,
success: function(html)
{
$(".spotlight, .spotlight_switch, .all_events").empty();
$(".today_events").html(html);

$("#datatable_categoryevents").dataTable ({
"bPaginate": 5,
"sPaginationType": "full_numbers",
"bSort": false,
"bFilter": false,
"iDisplayLength": 5,
"bLengthChange": false,
"bInfo": false
});
}
});
});
});
});

Edited September 16, 2011 by senters

[codez]

Kā šim blokam pirms db datu ielādes uzlikt smuku loading spinneri?

 

Vispār tas ir ļoti viegli - uzliec pirms ielādes smuku loading spineri.

[senters]

Codez, es jau tieši tā darīju, bet īsti neizdevās. Liku alert vietā.

Patreiz cenšos atrast jau gatavu piemēru. Idejiski es saprotu, sintaktiski vēl jāpamokas.

[codez]

Paņem tajā elementā, kurā gribi attēlot šo spinneri un ieliec:

 

$(".today_events").html('<center><img src="/images/spinner.gif" /></center>');

Edited September 16, 2011 by codez

[senters]

Šis variants strādā nevainojami.

 

 

$(".today_events").html('<center><img src="img/spinner.gif" /></center>');
$.ajax(
{ ....

 

Vēl jāizdomā kā piefīčot smuku konkrētā bloka pārklāšanu ar caurspīdīgu slāni.

Edited September 16, 2011 by senters

[senters]

Šeit noteikti svarīgi būtu, lai pie ielādēm kuras ir mazākas par x sekundēm (x varētu būt 1 sec patreiz) netiek rādīts šis spinners jeb kā man izveidots <div> bloks ar spinneri.

 

$(".today_events").html('<div id="loading"><img src="img/spinner.gif" /></div>');

 

Pie lielākām ielādēm ir ok, pie tik mazām kā 1sec tikai noraustās diva saturs.

[senters]

Joprojām aktuāls jautājums (sk. pēdējo jautājumu par laika kontroli uz loadingu), aktuāla tēma.

Edited September 17, 2011 by senters

[nemakuphp]

Manuprāt, nav iespējams noteikt, cik ilgi ielādēsies skripts

[daGrevis]

Nu kā... pirms AJAX pieprasījuma sāk skaitīt milisekundes... ja ir pagājušas jau 1000, bet AJAX pieprasījums vēl nav devis atbilidi - ir laiks spinerim! :D

[senters]

daGrevis, Vai varu palūgt piemēru tavai minētajai idejai?

Edited September 19, 2011 by senters

[marcis]

Bez gif'iem krutāk - http://neteye.github.com/activity-indicator.html

[senters]

marcis, šis labs, ir vēl viens līdzīgs zināms. Vienīgi šis risinājums ir proci rijīgāks kā gifs, protams, krietni smukāk lietot šādu.

Edited September 19, 2011 by senters

[senters]

Mēģinu šādu variantu, bet tāpat loading divs "nomidžinas" mainot kategorijas

 

$(".today_events").delay(800).html('<div id="loading"><img src="img/spinner2.gif" /></div>');

Edited September 19, 2011 by senters

[marcis]

Šaubos, ka šajā gadījumā ir jēga domāt par CPU performanci :)

 

Mans ieteikums šajā sakarā:

$("#loading").fadeIn(10000);
$(".today_events").load(url, function(){
 $("#loading").stop().hide();
});

[senters]

marci zinu šo load fju, bet vai zini kā rīkoties manā gadījumā, kādēļ nedarbojas delay fīča pirms spinnera?

[daGrevis]

Hmmm... labs jautājums kā to, ko izdomāju, realizēt.

 

 

var i, interval_id;

i = 0;

interval_id = setInterval(function() {

   ++i;

   if (i == 1000) {

   	$('.place_for_spinner').html('...');

   }

}, 1);

$.post('over/the/rainbow', function() {

   clearInterval(interval_id);

   $('.place_for_spinner').remove();

});

 

P.S. Testēts nav. :)