| /* global createTag, createNS, isSafari */ |
| /* exported ImagePreloader */ |
| |
| 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, originalPath) { |
| 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 = originalPath; |
| 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); |
| if (this._elementHelper.append) { |
| this._elementHelper.append(img); |
| } else { |
| this._elementHelper.appendChild(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; |
| var 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; |
| var len = this.images.length; |
| while (i < len) { |
| if (this.images[i].assetData === assetData) { |
| return this.images[i].img; |
| } |
| i += 1; |
| } |
| return null; |
| } |
| |
| 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 ImagePreloaderFactory() { |
| 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 = []; |
| } |
| |
| ImagePreloaderFactory.prototype = { |
| loadAssets: loadAssets, |
| setAssetsPath: setAssetsPath, |
| setPath: setPath, |
| loaded: loaded, |
| destroy: destroy, |
| getImage: getImage, |
| createImgData: createImgData, |
| createImageData: createImageData, |
| imageLoaded: imageLoaded, |
| setCacheType: setCacheType, |
| }; |
| |
| return ImagePreloaderFactory; |
| }()); |