jQuery FullCalendar Chercher de l'Événement Optimisation
Je me demandais si quelqu'un pouvait me donner quelques conseils pour vous aider à optimiser mon jQuery Calendrier Complet de Code. La question que je suis en cours d'exécution, c'est quand j'ai récupérer un lot d'événements par AJAX (> 25), le navigateur stands et ne répond pas (ce qui entraîne en général un message à l'utilisateur d'interrompre le script. J'essaie d'éviter cette erreur, et je me demandais si il y avait quelque chose que je pourrais faire dans ma fonction pour améliorer le temps de chargement.
Voici une copie de la fonction, je suis en cours d'exécution:
//Load the Business Unit Calendar Events
function ajaxBUEvents(start, end){
//Loop through the selected checked calendars
$(selectBUCalendars()).each(function(i, cal){
$.ajax({
type: 'POST',
data: {'startDate': start, 'endDate': end, 'buCals[]': cal},
url: '<?= site_url('AJAX/calendar_ajax/get_cal_events'); ?>',
dataType: 'json',
async: false,
beforeSend: function(){
$('#loading-dialog').dialog({minHeight: 100, width: 250}).dialog('open');
$('#loading-dialog p').text('Loading '+cal+' Calendar Events');
},
success: function(calevents){
$.each(calevents, function(i, calevent){
$('#calendar').fullCalendar('renderEvent', calevent, true);
});
}
});
});
$('#loading-dialog').dialog('close');
}
Et voici un échantillon de l'JSON retourné, ce n'est qu'un événement. Parfois il peut y avoir plus de 50 événements retourné:
[{"id":4377,"title":"BWR - Lighting Affiliates Dinner - Actualized","start":1259874000,"end":1259888400,"className":"BWR Actualized","allDay":false,"editable":false}]
Merci pour l'aide!
Vous devez vous connecter pour publier un commentaire.
L'astuce est d'utiliser
addEventSource
au lieu derenderEvent
. Car avecrenderEvent
l'ensemble de votre calendrier est redessiné pour chaque événement unique que vous ajoutez. Alors que addEventSource ajoute tous les événements à partir de la source que vous fournissez et puis un redessiner le calendrier.J'ai même fait deux demopages pour vous, de sorte que vous pouvez vérifier la différence de performance.
La version lente ajoute 50 événements par l'intermédiaire de renderEvent (notez la façon dont tout le calendrier est redessiné pour chaque événement)
http://jsbin.com/ewuka
La version rapide ajoute 50 événements par l'intermédiaire de addEventSource (notez la façon dont le calendrier ne reçoit redessiné pour une fois)
http://jsbin.com/udode