我在AngularJs中使用FullCalendar插件.
一切正常.在eventRender事件中,我为每个事件添加背景颜色,图像,工具提示和标签,因为它会冻结浏览器选项卡几秒钟.
有没有办法加速或显示装载机或任何东西？
我正在使用以下代码
$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);
var end = x.setHours(23,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,true,false,false).then(function (result) {
vmCurves.Feedings = (result[0].data);
vmCurves.showTable = true;
});
},eventClick: function(date,view) {
setVisibles();
var startTime = parseInt(date.startTimestamp) * 1000;
var x = new Date(startTime);
var y = x;
var start = y.setHours(0,0);
var end = x.setHours(23,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,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中bug渲染延迟的主要原因.确保您只渲染需要显示的事件.
第三,您尝试显示加载器将永远不会以这种方式工作.基本上,一旦javascript完成了它,DOM就会被重新渲染.因此,您可以在异步方法等待解析时显示微调器,但是您无法在同步方法的开头显示一个,然后再次将其隐藏.即使你发现使用$timeout或某些东西的黑客攻击,微调器在javascript代码运行时也不会旋转 – 因此视图仍然会被冻结.
