FullCalendar eventRenderイベントでブラウザタブをフリーズ

Question

FullCalendarプラグインをAngularJsに使用しています。

すべて正常です。 eventRenderイベントでは、すべてのイベントに対してbackground color、image、tooltip、およびlabelを追加しています。は、数秒間ブラウザタブをフリーズします。

ローダーやその他のものを高速化する方法はありますか？私はまず、次のコード

$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

を使用しています

、私は可能な限りeventRenderハンドラ中にDOMを修正回避を示唆しています。エレメントにimgタグを追加する必要はありません。代わりに、背景画像を指定するクラスを追加するだけです。だからあなたのCSSには、次のようなクラスがあります。

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

次に、element.addClass（ 'fuettern'）を実行します。ノードを追加するDOM操作はコストがかかります。同様の方法で背景色を設定する方法を最適化することもできます。同じクラス（fuettern、reinigenなど）で背景色を設定できます。実際にAFAICTでは、純粋にクラスを設定することでツールチップを設定する以外はすべて行うことができます。

第2に、スコープ内にいくつのオブジェクト（イベント）があるかを見てください。オブジェクトが多すぎると、バグ描画遅延の主な原因がAngularになります。表示する必要があるイベントのみをレンダリングしていることを確認してください。

第3に、ローダーを表示しようとしてもこのようには動作しません。基本的には、DOMは、javascriptがその処理を完了した後にのみレンダリングされます。したがって、メソッドが非同期のメソッドの解決を待っている間にスピンナーを表示できますが、同期メソッドの開始時にメソッドを表示してから、最後に非表示にすることはできません。そして、たとえ$ timeoutや何かを使っていくつかのハッキングを見つけたとしても、javascriptコードが動いている間、スピナーは回転しません。したがって、ビューはまだフリーズして見えます。