FullCalendar eventRender Ereignis frieren den Browser Tab

Question

Ich verwende FullCalendar Plugin in AngularJs.

Alles funktioniert gut. Im eventRender-Ereignis füge ich für jedes Ereignis background color, image, tooltip und label hinzu, dafür die Browser-Registerkarte für einige Sekunden einfrieren.

Gibt es eine Möglichkeit, Lader oder etwas anderes zu beschleunigen oder anzuzeigen?

Ich verwende folgenden Code

$scope.uiConfig = { 
      calendar: { 
       height: 550, 
       editable: false, 
       header: { 
        left: 'onlyErrorButton', 
        center: 'title', 
        right: 'today basicDay,basicWeek,month prev,next' 
       }, 
       timeFormat: 'H:mm', 
       defaultView: 'month', 
       titleFormat: 'DD MMMM YYYY', 
       views: { 
        day: { 
         columnFormat: 'dddd D.M' 
        }, 
        week: { 
         columnFormat: 'dd D.M' 
        }, 
        month: { 
         columnFormat: 'dd', 
         titleFormat: 'MMMM' 
        } 
       }, 
       loading: function(isLoading, view) { 
         if(isLoading) {// isLoading gives boolean value 
          $('#wait').show(); 
         } else { 
          $('#wait').hide(); 
         } 
        }, 
       theme: false, 
       themeButtonIcons: false, 
       customButtons: { 
        onlyErrorButton: { 
         text: $rootScope.getLabel('with_errors'), 
         click: function() { 
          $('.fc-onlyErrorButton-button').toggleClass('fc-state-active'); 
          vmCurves.onlyErrorButton = false; 
          update_eventSources(); 
         } 
        }, 
        withoutErrorButton: { 
         text: $rootScope.getLabel('without_errors'), 
         click: function(event) { 
          $('.fc-withoutErrorButton-button').toggleClass('fc-state-active'); 
          vmCurves.withoutErrorButton = false; 
          update_eventSources(); 
         } 
        } 
       }, 

       dayClick: function(date, jsEvent, view) { 

        var x = new Date(date._d); 
        var y = x; 
        var start = y.setHours(0,0,0,0); 
        var end = x.setHours(23,59,59,59); 

        vmCurves.dateFrom = new Date(start); 
        vmCurves.dateTo = new Date(end); 

        vmCurves.filter.pasteur = true; 
        vmCurves.filter.heat = true; 
        vmCurves.filter.cool = true; 
        vmCurves.filter.feed = true; 
        vmCurves.filter.reinigen = true; 

        CurvesServices.feedings($stateParams.taxi_id, start/1000, end/1000, 0, true,true,true,true,true, false, false).then(function (result) { 
         vmCurves.feedings = (result[0].data); 
         vmCurves.showTable = true; 
        }); 

       }, 
       eventClick: function(date, jsEvent, view) { 
        setVisibles(); 
        var startTime = parseInt(date.startTimestamp) * 1000; 
        var x = new Date(startTime); 
        var y = x; 

        var start = y.setHours(0,0,0,0); 
        var end = x.setHours(23,59,59,59); 

        vmCurves.dateFrom = new Date(start); 
        vmCurves.dateTo = new Date(end); 

        var pasteur = true; 
        var heat = true; 
        var cool = true; 
        var feed = true; 
        var reinigen = true; 

        vmCurves.filter.pasteur = true; 
        vmCurves.filter.heat = true; 
        vmCurves.filter.cool = true; 
        vmCurves.filter.feed = true; 
        vmCurves.filter.reinigen = true; 
        CurvesServices.feedings(date.taxi_id, start/1000, end/1000, 0, heat, feed, cool , pasteur, reinigen).then(function (result) { 
         vmCurves.feedings = (result[0].data); 
        }); 

        getCurves({ 'taxi_id':date.taxi_id , 'feeding_id':date.feeding_id, 'process_id' : date.process_id}); 
        vmCurves.showTable = true; 
       }, 
       eventRender: function(event, element, view) { 
        i++; 
        if(i == 1) { 
         //alert('loading'); 
         $('#wait').show(); //Trying to show loader here 
        } 

        $('.fc-day-grid-container').css('cursor', 'pointer'); // adding css style to event container 

        $('.fc-toolbar .fc-left .fc-onlyErrorButton-button').addClass('fc-state-active'); // adding class to button 

        //adding Tooltip to Buttons 
        $('.fc-toolbar .fc-left .fc-onlyErrorButton-button').tooltip({ 
         'title' : $rootScope.getLabel('only_errors') 
        }); 

        //getting details getLabel() function getting data from database 
        var action = event.action ? $rootScope.getLabel(event.action.toLowerCase()) : $rootScope.getLabel('fuettern'); 
        var startTime = event.startTime ? event.startTime : '-'; 
        var endTime = event.endTime ? event.endTime : '-'; 
        var amount = event.amount ? event.amount : '-'; 
        var dosings = event.dosings ? event.dosings : '-'; 
        var action_img = event.action ? event.action : 'fuettern'; 

        //Image for event 
        img_src = "assets/media/img/" + action_img.toLowerCase() + ".png"; 

        //editing event container adding class's and images 
        if(view.name === 'basicDay') { 
         element.find(".fc-time") 
          .before($("<span class=\"fc-event-icons\"></span>") 
           .html("<img src='" + img_src + "' style=\"width:7%; float:left\" />")); 
         element.find(".fc-title").html(action); 
         element.find(".fc-time").css({'padding-left' : '20px'}); 
        } else { 
         element.find(".fc-time") 
          .before($("<span class=\"fc-event-icons\"></span>") 
           .html("<img src='" + img_src + "' style=\"width:30%; float:left\" />")); 
         element.find(".fc-time").css({'padding-left' : '20px'}); 
         element.find(".fc-title").html(action); 
         element.find(".fc-title").hide(); 

         var moment = $('#calendar').fullCalendar('getDate'); 

         element.find(".fc-event").addClass("TEST!_" + moment.format("MMMM") + "_" + event.start.format("MMMM")); 

        } 

        //adding background-color to event 
        var bgcolor = event.action == 'Pasteurisieren' ? '#42ca00' : event.action == 'Heizen' ? '#fa8072' : event.action == 'Kuehlen' ? '#00bfff' : event.action == 'reinigen' ? '#00baaa' : '#ffd700'; 
        $(element).css('background-color', bgcolor); 

        //creating Tooltip title 
        if(view.name !== 'basicDay') { 
         var tooltipText = $rootScope.getLabel('action') + ': ' + action + ' | ' + $rootScope.getLabel('start') + ': '+ startTime + ' | ' + $rootScope.getLabel('end') + ': ' + endTime; 
         if(event.amount || event.dosings) { //Feeder.Dort gibt es noch Amount und Dosings 
          tooltipText += ' | ' + 'Liter: ' + amount + ' | ' + 'Dosierung: ' + dosings; 
         } 
        } 

        //Tooltip to event 
         $(element).attr('tooltip-placement', 'bottom'); //Tooltip nach unten 
         $(element).tooltip({ 
          'title': tooltipText, 
          'container': 'body', 
          'placement' : 'bottom' 
         }); 
         $compile(element)($scope); 

        if(view.name !== 'basicDay' && (moment.format("MMMM") != event.start.format("MMMM"))) { 
         element.find(".fc-content").addClass("othermonth"); 
        } 

       }, 
       eventAfterAllRender:function(view){ 
        i = 0; 
        $('#wait').hide(); 
       }, 
      }, 
     }; 

Answer 1

Erstens würde ich vorschlagen, die Vermeidung der DOM während des eventRender Handler so viel wie möglich zu ändern. Sie müssen das img-Tag nicht zum Element hinzufügen. Fügen Sie stattdessen einfach eine Klasse hinzu, die ein Hintergrundbild angibt. Also in Ihrem CSS haben eine Klasse wie:

.fuettern { 
    background-image: 'assets/media/img/fuettern.png'; 
    width: '30px'; 
    height: '30px'; 
    etc 
} 

Dann tun element.addClass ('fuettern'). DOM-Manipulationen, bei denen Sie Knoten hinzufügen, sind kostspielig. Sie können auch die Art der Einstellung der Hintergrundfarbe auf ähnliche Weise optimieren. Die gleiche Klasse (fuettern, reinigen etc) könnte die Hintergrundfarbe einstellen. In der Tat, AFAICT, sollten Sie in der Lage sein, alles zu tun, außer den Tooltip reinzustellen, indem Sie eine Klasse setzen.

Zweitens, schauen Sie sich an, wie viele Objekte (Ereignisse) im Umfang sind. Zu viele Objekte sind die Hauptursache für Bug-Rendering-Verzögerungen in Angular. Stellen Sie sicher, dass Sie nur Ereignisse wiedergeben, die Sie anzeigen müssen.

Drittens wird Ihr Versuch, einen Loader zu zeigen, nie so funktionieren. Im Grunde wird das DOM erst wieder gerendert, wenn JavaScript seine Sache erledigt hat. Sie können also einen Spinner anzeigen, während eine asynchrone-Methode darauf wartet, aufgelöst zu werden, aber Sie können keine am Anfang einer synchronen Methode anzeigen und sie dann am Ende wieder ausblenden. Und selbst wenn Sie einen Hack mit $ timeout oder etwas gefunden haben, dreht sich der Spinner nicht, während der JavaScript-Code läuft - daher sieht die Ansicht immer noch eingefroren aus.