多次提示 [Violation] 'loadend' handler took <N>ms
flypiglululu opened this issue · comments
情景:vue项目,一个页面中要渲染多个svga动画,我在页面渲染完成后初始化player 和 parser,监听元素是否在可视范围内判断是否startAnimation or stopAnimation
问题:控制台频繁报错 [Violation] 'loadend' handler took ms
代码如下:
mounted() {
const _this = this;
this.offsetTop = this.$parent.$el.offsetTop;
this.clientHeight = this.$parent.$el.clientHeight;
this.rootClientHeight = this.$root.$el.clientHeight
$(document).ready(function() {
if(_this.srcValue.indexOf('svga') > -1) {
_this.isSVGA = true;
var player = new SVGA.Player(#canvas${_this.id}
);
var parser = new SVGA.Parser(#canvas${_this.id}
);
parser.load(_this.srcValue, function(videoItem) {
player.loops = _this.loop;
// player.loops = 1;
player.clearsAfterStop = false;
player.setVideoItem(videoItem);
if(_this.offsetTop + _this.clientHeight < _this.rootClientHeight) {
player.startAnimation();
_this.isplay = true;
}
_this.player = player;
_this.parser = parser;
}, err => {
alert(err)
console.log(err)
})
}
})
},
watch: {
"$store.state.scrollTop": function(newValue) {
if(this.player === null) return;
const {clientHeight, rootClientHeight} = this
let start = this.offsetTop;
if(this.isplay && (start + clientHeight < newValue || start > newValue + rootClientHeight)) {
this.player.stopAnimation();
this.isplay = false;
} else if (!this.isplay && start >= newValue && start <= newValue + rootClientHeight) {
this.player.startAnimation();
this.isplay = true
}
},
},