svga / SVGAPlayer-Web

Similar to Lottie. Render After Effects / Animate CC (Flash) animations natively on Android and iOS, Web. 使用 SVGAPlayer 在 Android、iOS、Web中播放 After Effects / Animate CC (Flash) 动画。

Home Page:https://svga.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

多次提示 [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
}
},
},