diff -r ab0871ca8819 -r 7c37aaa2a8ae web/static/res/js/incmosaic.js --- a/web/static/res/js/incmosaic.js Mon Jan 21 21:00:24 2013 +0100 +++ b/web/static/res/js/incmosaic.js Mon Jan 21 21:04:36 2013 +0100 @@ -15,8 +15,10 @@ this.listeUrls = []; // The images list to blend this.pairImages = []; this.imagesLoaded = 0; + this.imageLoadedIndex = -1; this.imageWidth; this.imageHeight; + this.postFirstImageCallback; // Effect this.waitStartEffectTime = 3000; @@ -45,7 +47,7 @@ this.imageUrls.push(url); }; - this.start = function(canvasId, effectSpeed, squareCountX, squareCountY, loop, waitStartEffectGo, endEffecFunc) + this.start = function(canvasId, effectSpeed, squareCountX, squareCountY, loop, waitStartEffectGo, endEffecFunc, postFirstImageCallback) { // Canvas ID this.canvasId = canvasId; @@ -64,6 +66,9 @@ // Does the effect wait for go this.waitStartEffectGo = waitStartEffectGo; + // callback to call after the load of the first image + this.postFirstImageCallback = postFirstImageCallback; + // Init the canvas objects this.init(); @@ -150,13 +155,13 @@ if (this.pairImages.length == 0) { this.imagesLoaded = 0; - this.pairImages.push(this.getImageFromUrl(this.listeUrls[0])); - this.pairImages.push(this.getImageFromUrl(this.listeUrls[1])); + this.pairImages.push(this.getImageFromUrl(this.listeUrls[0], 0)); + this.pairImages.push(this.getImageFromUrl(this.listeUrls[1], 1)); this.listeUrls.remove(0); } else { this.imagesLoaded = 1; this.pairImages[0] = this.pairImages[1]; // Swap - this.pairImages[1] = this.getImageFromUrl(this.listeUrls[0]) + this.pairImages[1] = this.getImageFromUrl(this.listeUrls[0], 999) } this.listeUrls.remove(0); @@ -180,15 +185,30 @@ { var self = incMosaic; - if (self.imagesLoaded == 2) { + if (self.imagesLoaded === 2) { // Redraw self.redraw(); + } else if (self.imageLoadedIndex === 0) { + // Draw first image + self.drawFirstImage(); + self.imageLoadedIndex = -1; } // Loop requestAnimationFrame(self.loopCallback); }; + this.drawFirstImage = function() + { + // Draw the first image + this.ctx.drawImage(this.pairImages[0], 0, 0, this.srcSquareWidth*this.squareCountX, this.srcSquareHeight*this.squareCountY, 0, 0, this.squareWidth*this.squareCountX, this.squareHeight*this.squareCountY); + + if (this.postFirstImageCallback !== null) { + this.postFirstImageCallback(); + this.postFirstImageCallback = null; + } + }; + this.redraw = function() { // Get time @@ -196,8 +216,7 @@ var timeToWait = (this.startTime + this.waitStartEffectTime)*this.effectSpeed; if (time < timeToWait || this.waitStartEffectGo) { - // Draw the first image - this.ctx.drawImage(this.pairImages[0], 0, 0, this.srcSquareWidth*this.squareCountX, this.srcSquareHeight*this.squareCountY, 0, 0, this.squareWidth*this.squareCountX, this.squareHeight*this.squareCountY); + this.drawFirstImage(); return; } @@ -310,13 +329,19 @@ return Math.random() * (max - min) + min; }; - this.getImageFromUrl = function(url) + this.getImageFromUrl = function(url, index) { var self = incMosaic; var image = new Image(); + var ind = index; + image.onload = function() { + + self.imageLoadedIndex = ind; + // When the first image is loaded we can get the image dimention and init the autoresize of the canvas if (self.imagesLoaded === 0) { + // Set some image size related vars self.imageWidth = image.width; self.imageHeight = image.height;