| var ImagePreloader = (function(){ |
| |
| var proxyImage = (function(){ |
| var canvas = createTag('canvas'); |
| canvas.width = 1; |
| canvas.height = 1; |
| var ctx = canvas.getContext('2d'); |
| ctx.fillStyle = 'rgba(0,0,0,0)'; |
| ctx.fillRect(0, 0, 1, 1); |
| return canvas; |
| }()) |
| |
| function imageLoaded(){ |
| this.loadedAssets += 1; |
| if(this.loadedAssets === this.totalImages){ |
| if(this.imagesLoadedCb) { |
| this.imagesLoadedCb(null); |
| } |
| } |
| } |
| |
| function getAssetsPath(assetData, assetsPath, original_path) { |
| var path = ''; |
| if (assetData.e) { |
| path = assetData.p; |
| } else if(assetsPath) { |
| var imagePath = assetData.p; |
| if (imagePath.indexOf('images/') !== -1) { |
| imagePath = imagePath.split('/')[1]; |
| } |
| path = assetsPath + imagePath; |
| } else { |
| path = original_path; |
| path += assetData.u ? assetData.u : ''; |
| path += assetData.p; |
| } |
| return path; |
| } |
| |
| function testImageLoaded(img) { |
| var _count = 0; |
| var intervalId = setInterval(function() { |
| var box = img.getBBox(); |
| if (box.width || _count > 500) { |
| this._imageLoaded(); |
| clearInterval(intervalId); |
| } |
| _count += 1; |
| }.bind(this), 50) |
| } |
| |
| function createImageData(assetData) { |
| var path = getAssetsPath(assetData, this.assetsPath, this.path); |
| var img = createNS('image'); |
| if (isSafari) { |
| this.testImageLoaded(img) |
| } else { |
| img.addEventListener('load', this._imageLoaded, false); |
| } |
| img.addEventListener('error', function() { |
| ob.img = proxyImage; |
| this._imageLoaded(); |
| }.bind(this), false); |
| img.setAttributeNS('http://www.w3.org/1999/xlink','href', path); |
| this._elementHelper.append(img); |
| var ob = { |
| img: img, |
| assetData: assetData |
| } |
| return ob; |
| } |
| |
| function createImgData(assetData) { |
| var path = getAssetsPath(assetData, this.assetsPath, this.path); |
| var img = createTag('img'); |
| img.crossOrigin = 'anonymous'; |
| img.addEventListener('load', this._imageLoaded, 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; |
| var i, len = assets.length; |
| for (i = 0; i < len; i += 1) { |
| if(!assets[i].layers){ |
| this.totalImages += 1; |
| this.images.push(this._createImageData(assets[i])); |
| } |
| } |
| } |
| |
| function setPath(path){ |
| this.path = path || ''; |
| } |
| |
| function setAssetsPath(path){ |
| 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; |
| } |
| |
| function setCacheType(type, elementHelper) { |
| if (type === 'svg') { |
| this._elementHelper = elementHelper; |
| this._createImageData = this.createImageData.bind(this); |
| } else { |
| this._createImageData = this.createImgData.bind(this); |
| } |
| } |
| |
| function ImagePreloader(type){ |
| this._imageLoaded = imageLoaded.bind(this); |
| this.testImageLoaded = testImageLoaded.bind(this); |
| this.assetsPath = ''; |
| this.path = ''; |
| this.totalImages = 0; |
| this.loadedAssets = 0; |
| this.imagesLoadedCb = null; |
| this.images = []; |
| }; |
| |
| ImagePreloader.prototype = { |
| loadAssets: loadAssets, |
| setAssetsPath: setAssetsPath, |
| setPath: setPath, |
| loaded: loaded, |
| destroy: destroy, |
| getImage: getImage, |
| createImgData: createImgData, |
| createImageData: createImageData, |
| imageLoaded: imageLoaded, |
| setCacheType: setCacheType, |
| } |
| |
| return ImagePreloader; |
| }()); |