Zdarzenie FullCalendarRender event zamrozić kartę przeglądarki

Question

Używam wtyczki FullCalendar w AngularJs.

Wszystko działa dobrze. W zdarzeniu eventRender do każdego zdarzenia dodajemy background color, image, tooltip i label dla każdego, przez kilka sekund zamrażam kartę przeglądarki na.

Czy istnieje sposób na przyspieszenie lub pokazanie programu ładującego lub jakiejkolwiek rzeczy?

Używam następujący kod

$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

Po pierwsze, sugeruje unikanie modyfikacji DOM podczas obsługi eventRender jak najwięcej. Nie musisz dodawać tagu img do elementu. Zamiast tego wystarczy dodać klasę, która określa obraz tła. Tak więc w twoim css masz klasę:

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

Następnie wykonaj element.addClass ("fuettern"). Manipulacje DOM w których dodajesz węzły są kosztowne. Możesz również zoptymalizować sposób ustawiania koloru tła w podobny sposób. Ta sama klasa (fuettern, reinigen itp.) Może ustawić kolor tła. W rzeczywistości AFAICT, powinieneś być w stanie zrobić wszystko poza ustawieniem podpowiedzi czysto przez ustawienie klasy.

Po drugie, spójrz, ile obiektów (zdarzeń) znajduje się w zasięgu. Zbyt duża liczba obiektów jest główną przyczyną opóźnień renderowania błędów w Angular. Upewnij się, że renderujesz tylko wydarzenia, które chcesz pokazać.

Po trzecie, próba pokazania programu ładującego nigdy nie będzie działać w ten sposób. Zasadniczo DOM tylko zostanie ponownie renderowany, gdy javascript wykona swoje zadanie. Możesz pokazać spinnera, podczas gdy metoda asynchroniczna czeka na rozwiązanie, ale nie możesz pokazać jej na początku metody synchronicznej, a następnie ukryć ją na końcu. I nawet jeśli znalazłeś jakiś hack używając $ timeout lub coś takiego, spinner się nie obróci podczas działania kodu javascript - więc widok będzie nadal wyglądał na zamrożony.