我在AngularJs中使用FullCalendar插件。
一切正常。在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();
},
},
};
首先，我建议尽可能避免在eventRender处理程序期间修改DOM。您不需要将img标记添加到元素中。相反，只需添加一个指定背景图像的类。所以在css中加入一个类，比如:
.fuettern {
background-image: 'assets/media/img/fuettern.png';
width: '30px';
height: '30px';
etc
}
然后执行element.addClass('fuettern')。添加节点的DOM操作成本很高。您还可以以类似的方式优化设置背景颜色的方式。相同的类(fuettern, reinigen等)可以设置背景颜色。事实上，在AFAICT中，除了通过设置类来设置工具提示外，您应该能够做任何事情。
其次，看看有多少对象(事件)在作用域中。对象太多是Angular渲染延迟的主要原因。确保你只呈现你需要显示的事件。
第三，您试图显示加载器将永远不会以这种方式工作。基本上，DOM只有在javascript完成它的事情后才会被重新渲染。因此，您可以在异步方法等待解析时显示转轮，但您不能在同步方法开始时显示转轮，然后在结束时再次隐藏它。即使你使用了$timeout之类的hack，当javascript代码运行时，旋转器也不会旋转——所以视图看起来仍然是冻结的。