loading external assets before starting animation
diff --git a/player/index.html b/player/index.html
index 05fd59a..ae737dd 100644
--- a/player/index.html
+++ b/player/index.html
@@ -190,12 +190,11 @@
<script>
var anim;
var elem = document.getElementById('lottie');
- //elem.style.display = 'none';
var animData = {
container: elem,
renderer: 'svg',
- loop: 1,
- autoplay: true,
+ loop: false,
+ autoplay: false,
rendererSettings: {
progressiveLoad:false,
preserveAspectRatio: 'xMidYMid meet',
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 3183ae7..d2723a6 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -10,7 +10,6 @@
this.frameMult = 0;
this.playSpeed = 1;
this.playDirection = 1;
- this.pendingElements = 0;
this.playCount = 0;
this.animationData = {};
this.assets = [];
@@ -27,6 +26,7 @@
this._idle = true;
this._completedLoop = false;
this.projectInterface = ProjectInterface();
+ this.imagePreloader = new ImagePreloader();
};
extendPrototype([BaseEvent], AnimationItem);
@@ -182,15 +182,15 @@
this.loadNextSegment();
};
+AnimationItem.prototype.imagesLoaded = function() {
+ this.trigger('loaded_images');
+ this.checkLoaded()
+}
+
AnimationItem.prototype.preloadImages = function() {
- this.imagePreloader = new ImagePreloader();
this.imagePreloader.setAssetsPath(this.assetsPath);
this.imagePreloader.setPath(this.path);
- this.imagePreloader.loadAssets(this.animationData.assets, function(err) {
- if(!err) {
- this.trigger('loaded_images');
- }
- }.bind(this));
+ this.imagePreloader.loadAssets(this.animationData.assets, this.imagesLoaded.bind(this));
}
AnimationItem.prototype.configAnimation = function (animData) {
@@ -232,24 +232,15 @@
}
}
-AnimationItem.prototype.addPendingElement = function () {
- this.pendingElements += 1;
-};
-
-AnimationItem.prototype.elementLoaded = function () {
- this.pendingElements -= 1;
- this.checkLoaded();
-};
-
AnimationItem.prototype.checkLoaded = function () {
- if (this.pendingElements === 0) {
+ if (!this.isLoaded && (this.imagePreloader.loaded() || this.renderer.rendererType !== 'canvas')) {
if(expressionsPlugin){
expressionsPlugin.initExpressions(this);
}
this.renderer.initItems();
- setTimeout(function(){
+ setTimeout(function() {
this.trigger('DOMLoaded');
- }.bind(this),0);
+ }.bind(this), 0);
this.isLoaded = true;
this.gotoFrame();
if(this.autoplay){
@@ -475,6 +466,7 @@
return;
}
this.renderer.destroy();
+ this.imagePreloader.destroy();
this.trigger('destroy');
this._cbs = null;
this.onEnterFrame = this.onLoopComplete = this.onComplete = this.onSegmentStart = this.onDestroy = null;
diff --git a/player/js/elements/canvasElements/CVImageElement.js b/player/js/elements/canvasElements/CVImageElement.js
index e5b63a8..2653a15 100644
--- a/player/js/elements/canvasElements/CVImageElement.js
+++ b/player/js/elements/canvasElements/CVImageElement.js
@@ -1,19 +1,17 @@
function CVImageElement(data, globalData, comp){
this.failed = false;
- this.img = new Image();
- this.img.crossOrigin = 'anonymous';
this.assetData = globalData.getAssetData(data.refId);
+ this.img = globalData.imageLoader.getImage(this.assetData);
this.initElement(data,globalData,comp);
- this.globalData.addPendingElement();
}
extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVImageElement);
CVImageElement.prototype.initElement = SVGShapeElement.prototype.initElement;
CVImageElement.prototype.prepareFrame = IImageElement.prototype.prepareFrame;
-CVImageElement.prototype.imageLoaded = function() {
- this.globalData.elementLoaded();
- if(this.assetData.w !== this.img.width || this.assetData.h !== this.img.height){
+CVImageElement.prototype.createContent = function(){
+
+ if (this.img.width && (this.assetData.w !== this.img.width || this.assetData.h !== this.img.height)) {
var canvas = createTag('canvas');
canvas.width = this.assetData.w;
canvas.height = this.assetData.h;
@@ -35,19 +33,6 @@
ctx.drawImage(this.img,(imgW-widthCrop)/2,(imgH-heightCrop)/2,widthCrop,heightCrop,0,0,this.assetData.w,this.assetData.h);
this.img = canvas;
}
-};
-
-CVImageElement.prototype.imageFailed = function() {
- this.failed = true;
- this.globalData.elementLoaded();
-};
-
-CVImageElement.prototype.createContent = function(){
- var img = this.img;
- img.addEventListener('load', this.imageLoaded.bind(this), false);
- img.addEventListener('error', this.imageFailed.bind(this), false);
- var assetPath = this.globalData.getAssetsPath(this.assetData);
- img.src = assetPath;
};
diff --git a/player/js/renderers/BaseRenderer.js b/player/js/renderers/BaseRenderer.js
index 44d257f..17b6fb8 100644
--- a/player/js/renderers/BaseRenderer.js
+++ b/player/js/renderers/BaseRenderer.js
@@ -116,8 +116,7 @@
this.globalData.fontManager.addFonts(animData.fonts, fontsContainer);
this.globalData.getAssetData = this.animationItem.getAssetData.bind(this.animationItem);
this.globalData.getAssetsPath = this.animationItem.getAssetsPath.bind(this.animationItem);
- this.globalData.elementLoaded = this.animationItem.elementLoaded.bind(this.animationItem);
- this.globalData.addPendingElement = this.animationItem.addPendingElement.bind(this.animationItem);
+ this.globalData.imageLoader = this.animationItem.imagePreloader;
this.globalData.frameId = 0;
this.globalData.frameRate = animData.fr;
this.globalData.nm = animData.nm;
diff --git a/player/js/renderers/CanvasRenderer.js b/player/js/renderers/CanvasRenderer.js
index 6c273dc..0eba6b1 100644
--- a/player/js/renderers/CanvasRenderer.js
+++ b/player/js/renderers/CanvasRenderer.js
@@ -24,6 +24,7 @@
this.pendingElements = [];
this.transformMat = new Matrix();
this.completeLayers = false;
+ this.rendererType = 'canvas';
}
extendPrototype([BaseRenderer],CanvasRenderer);
diff --git a/player/js/renderers/HybridRenderer.js b/player/js/renderers/HybridRenderer.js
index 77b2bd8..0cc3e88 100644
--- a/player/js/renderers/HybridRenderer.js
+++ b/player/js/renderers/HybridRenderer.js
@@ -18,6 +18,7 @@
this.destroyed = false;
this.camera = null;
this.supports3d = true;
+ this.rendererType = 'html';
}
diff --git a/player/js/renderers/SVGRenderer.js b/player/js/renderers/SVGRenderer.js
index 090efbb..a1135f3 100644
--- a/player/js/renderers/SVGRenderer.js
+++ b/player/js/renderers/SVGRenderer.js
@@ -26,6 +26,7 @@
this.elements = [];
this.pendingElements = [];
this.destroyed = false;
+ this.rendererType = 'svg';
}
diff --git a/player/js/utils/imagePreloader.js b/player/js/utils/imagePreloader.js
index bc5134c..05df875 100644
--- a/player/js/utils/imagePreloader.js
+++ b/player/js/utils/imagePreloader.js
@@ -1,5 +1,15 @@
var ImagePreloader = (function(){
+ var proxyImage = (function(){
+ var canvas = createTag('canvas');
+ canvas.width = 1;
+ canvas.height = 1;
+ var ctx = canvas.getContext('2d');
+ ctx.fillStyle = '#FF0000';
+ ctx.fillRect(0, 0, 1, 1);
+ return canvas;
+ }())
+
function imageLoaded(){
this.loadedAssets += 1;
if(this.loadedAssets === this.totalImages){
@@ -9,38 +19,48 @@
}
}
- function getAssetsPath(assetData){
+ function getAssetsPath(assetData, assetsPath, original_path) {
var path = '';
- if(assetData.e) {
+ if (assetData.e) {
path = assetData.p;
- }else if(this.assetsPath){
+ } else if(assetsPath) {
var imagePath = assetData.p;
- if(imagePath.indexOf('images/') !== -1){
+ if (imagePath.indexOf('images/') !== -1) {
imagePath = imagePath.split('/')[1];
}
- path = this.assetsPath + imagePath;
+ path = assetsPath + imagePath;
} else {
- path = this.path;
+ path = original_path;
path += assetData.u ? assetData.u : '';
path += assetData.p;
}
return path;
}
- function loadImage(path){
+ function createImageData(assetData) {
+ var path = getAssetsPath(assetData, this.assetsPath, this.path);
var img = createTag('img');
- img.addEventListener('load', imageLoaded.bind(this), false);
- img.addEventListener('error', imageLoaded.bind(this), false);
+ img.crossOrigin = 'anonymous';
+ img.addEventListener('load', this._imageLoaded.bind(this), false);
+ img.addEventListener('error', function() {
+ ob.img = proxyImage;
+ this._imageLoaded();
+ }.bind(this), false);
img.src = path;
+ var ob = {
+ img: img,
+ assetData: assetData
+ }
+ return ob;
}
+
function loadAssets(assets, cb){
this.imagesLoadedCb = cb;
- this.totalAssets = assets.length;
- var i;
- for(i=0;i<this.totalAssets;i+=1){
+ var i, len = assets.length;
+ for (i = 0; i < len; i += 1) {
if(!assets[i].layers){
- loadImage.bind(this)(getAssetsPath.bind(this)(assets[i]));
this.totalImages += 1;
+ this.images.push(this._createImageData(assets[i]));
}
}
}
@@ -53,20 +73,39 @@
this.assetsPath = path || '';
}
+ function getImage(assetData) {
+ var i = 0, len = this.images.length;
+ while (i < len) {
+ if (this.images[i].assetData === assetData) {
+ return this.images[i].img;
+ }
+ i += 1;
+ }
+ }
+
function destroy() {
this.imagesLoadedCb = null;
+ this.images.length = 0;
+ }
+
+ function loaded() {
+ return this.totalImages === this.loadedAssets;
}
return function ImagePreloader(){
this.loadAssets = loadAssets;
this.setAssetsPath = setAssetsPath;
this.setPath = setPath;
+ this.loaded = loaded;
this.destroy = destroy;
+ this.getImage = getImage;
+ this._createImageData = createImageData;
+ this._imageLoaded = imageLoaded;
this.assetsPath = '';
this.path = '';
- this.totalAssets = 0;
this.totalImages = 0;
this.loadedAssets = 0;
this.imagesLoadedCb = null;
+ this.images = [];
};
}());
\ No newline at end of file
