<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ImageLoader - pixi.js</title> <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css"> <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> <link rel="stylesheet" href="../assets/css/main.css" id="site_styles"> <link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script> </head> <body class="yui3-skin-sam"> <div id="doc"> <div id="hd" class="yui3-g header"> <div class="yui3-u-3-4"> <h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="pixi.js"></h1> </div> <div class="yui3-u-1-4 version"> <em>API Docs for: 1.5.0</em> </div> </div> <div id="bd" class="yui3-g"> <div class="yui3-u-1-4"> <div id="docs-sidebar" class="sidebar apidocs"> <div id="api-list"> <h2 class="off-left">APIs</h2> <div id="api-tabview" class="tabview"> <ul class="tabs"> <li><a href="#api-classes">Classes</a></li> <li><a href="#api-modules">Modules</a></li> </ul> <div id="api-tabview-filter"> <input type="search" id="api-filter" placeholder="Type to filter APIs"> </div> <div id="api-tabview-panel"> <ul id="api-classes" class="apis classes"> <li><a href="../classes/AbstractFilter.html">AbstractFilter</a></li> <li><a href="../classes/AjaxRequest.html">AjaxRequest</a></li> <li><a href="../classes/AlphaMaskFilter.html">AlphaMaskFilter</a></li> <li><a href="../classes/AssetLoader.html">AssetLoader</a></li> <li><a href="../classes/AtlasLoader.html">AtlasLoader</a></li> <li><a href="../classes/autoDetectRenderer.html">autoDetectRenderer</a></li> <li><a href="../classes/BaseTexture.html">BaseTexture</a></li> <li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li> <li><a href="../classes/BitmapText.html">BitmapText</a></li> <li><a href="../classes/BlurFilter.html">BlurFilter</a></li> <li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li> <li><a href="../classes/CanvasMaskManager.html">CanvasMaskManager</a></li> <li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li> <li><a href="../classes/CanvasTinter.html">CanvasTinter</a></li> <li><a href="../classes/Circle.html">Circle</a></li> <li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li> <li><a href="../classes/ColorStepFilter.html">ColorStepFilter</a></li> <li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li> <li><a href="../classes/DisplayObject.html">DisplayObject</a></li> <li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li> <li><a href="../classes/DotScreenFilter.html">DotScreenFilter</a></li> <li><a href="../classes/Ellipse.html">Ellipse</a></li> <li><a href="../classes/EventTarget.html">EventTarget</a></li> <li><a href="../classes/FilterTexture.html">FilterTexture</a></li> <li><a href="../classes/Graphics.html">Graphics</a></li> <li><a href="../classes/GrayFilter.html">GrayFilter</a></li> <li><a href="../classes/ImageLoader.html">ImageLoader</a></li> <li><a href="../classes/InteractionData.html">InteractionData</a></li> <li><a href="../classes/InteractionManager.html">InteractionManager</a></li> <li><a href="../classes/InvertFilter.html">InvertFilter</a></li> <li><a href="../classes/JsonLoader.html">JsonLoader</a></li> <li><a href="../classes/MovieClip.html">MovieClip</a></li> <li><a href="../classes/NormalMapFilter.html">NormalMapFilter</a></li> <li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li> <li><a href="../classes/PixiFastShader.html">PixiFastShader</a></li> <li><a href="../classes/PixiShader.html">PixiShader</a></li> <li><a href="../classes/Point.html">Point</a></li> <li><a href="../classes/Polygon.html">Polygon</a></li> <li><a href="../classes/PolyK.html">PolyK</a></li> <li><a href="../classes/PrimitiveShader.html">PrimitiveShader</a></li> <li><a href="../classes/Rectangle.html">Rectangle</a></li> <li><a href="../classes/Rope.html">Rope</a></li> <li><a href="../classes/SepiaFilter.html">SepiaFilter</a></li> <li><a href="../classes/Spine.html">Spine</a></li> <li><a href="../classes/Sprite.html">Sprite</a></li> <li><a href="../classes/SpriteBatch.html">SpriteBatch</a></li> <li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li> <li><a href="../classes/Stage.html">Stage</a></li> <li><a href="../classes/Strip.html">Strip</a></li> <li><a href="../classes/Text.html">Text</a></li> <li><a href="../classes/Texture.html">Texture</a></li> <li><a href="../classes/TilingSprite.html">TilingSprite</a></li> <li><a href="../classes/TwistFilter.html">TwistFilter</a></li> <li><a href="../classes/WebGLFilterManager.html">WebGLFilterManager</a></li> <li><a href="../classes/WebGLGraphics.html">WebGLGraphics</a></li> <li><a href="../classes/WebGLMaskManager.html">WebGLMaskManager</a></li> <li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li> <li><a href="../classes/WebGLShaderManager.html">WebGLShaderManager</a></li> <li><a href="../classes/WebGLSpriteBatch.html">WebGLSpriteBatch</a></li> </ul> <ul id="api-modules" class="apis modules"> <li><a href="../modules/PIXI.html">PIXI</a></li> </ul> </div> </div> </div> </div> </div> <div class="yui3-u-3-4"> <div id="api-options"> Show: <label for="api-show-inherited"> <input type="checkbox" id="api-show-inherited" checked> Inherited </label> <label for="api-show-protected"> <input type="checkbox" id="api-show-protected"> Protected </label> <label for="api-show-private"> <input type="checkbox" id="api-show-private"> Private </label> <label for="api-show-deprecated"> <input type="checkbox" id="api-show-deprecated"> Deprecated </label> </div> <div class="apidocs"> <div id="docs-main"> <div class="content"> <h1>ImageLoader Class</h1> <div class="box meta"> <div class="uses"> Uses <ul class="inline commas"> <li><a href="EventTarget.html">EventTarget</a></li> </ul> </div> <div class="foundat"> Defined in: <a href="../files/src_pixi_loaders_ImageLoader.js.html#l5"><code>src/pixi/loaders/ImageLoader.js:5</code></a> </div> Module: <a href="../modules/PIXI.html">PIXI</a> </div> <div class="box intro"> <p>The image loader class is responsible for loading images file formats ('jpeg', 'jpg', 'png' and 'gif') Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFrameId() When loaded this class will dispatch a 'loaded' event</p> </div> <div class="constructor"> <h2>Constructor</h2> <div id="method_ImageLoader" class="method item"> <h3 class="name"><code>ImageLoader</code></h3> <div class="args"> <span class="paren">(</span><ul class="args-list inline commas"> <li class="arg"> <code>url</code> </li> <li class="arg"> <code>crossorigin</code> </li> </ul><span class="paren">)</span> </div> <div class="meta"> <p> Defined in <a href="../files/src_pixi_loaders_ImageLoader.js.html#l5"><code>src/pixi/loaders/ImageLoader.js:5</code></a> </p> </div> <div class="description"> </div> <div class="params"> <h4>Parameters:</h4> <ul class="params-list"> <li class="param"> <code class="param-name">url</code> <span class="type">String</span> <div class="param-description"> <p>The url of the image</p> </div> </li> <li class="param"> <code class="param-name">crossorigin</code> <span class="type">Boolean</span> <div class="param-description"> <p>Whether requests should be treated as crossorigin</p> </div> </li> </ul> </div> </div> </div> <div id="classdocs" class="tabview"> <ul class="api-class-tabs"> <li class="api-class-tab index"><a href="#index">Index</a></li> <li class="api-class-tab methods"><a href="#methods">Methods</a></li> <li class="api-class-tab properties"><a href="#properties">Properties</a></li> </ul> <div> <div id="index" class="api-class-tabpanel index"> <h2 class="off-left">Item Index</h2> <div class="index-section methods"> <h3>Methods</h3> <ul class="index-list methods"> <li class="index-item method inherited"> <a href="#method_addEventListener">addEventListener</a> </li> <li class="index-item method inherited"> <a href="#method_dispatchEvent">dispatchEvent</a> </li> <li class="index-item method"> <a href="#method_load">load</a> </li> <li class="index-item method"> <a href="#method_loadFramedSpriteSheet">loadFramedSpriteSheet</a> </li> <li class="index-item method private"> <a href="#method_onLoaded">onLoaded</a> </li> <li class="index-item method inherited"> <a href="#method_removeAllEventListeners">removeAllEventListeners</a> </li> <li class="index-item method inherited"> <a href="#method_removeEventListener">removeEventListener</a> </li> </ul> </div> <div class="index-section properties"> <h3>Properties</h3> <ul class="index-list properties"> <li class="index-item property inherited"> <a href="#property_listeners">listeners</a> </li> <li class="index-item property"> <a href="#property_texture">texture</a> </li> </ul> </div> </div> <div id="methods" class="api-class-tabpanel"> <h2 class="off-left">Methods</h2> <div id="method_addEventListener" class="method item inherited"> <h3 class="name"><code>addEventListener</code></h3> <div class="args"> <span class="paren">(</span><ul class="args-list inline commas"> <li class="arg"> <code>type</code> </li> <li class="arg"> <code>listener</code> </li> </ul><span class="paren">)</span> </div> <div class="meta"> <p>Inherited from <a href="../classes/EventTarget.html#method_addEventListener">EventTarget</a>: <a href="../files/src_pixi_utils_EventTarget.js.html#l32"><code>src/pixi/utils/EventTarget.js:32</code></a> </p> </div> <div class="description"> <p>Adds a listener for a specific event</p> </div> <div class="params"> <h4>Parameters:</h4> <ul class="params-list"> <li class="param"> <code class="param-name">type</code> <span class="type">String</span> <div class="param-description"> <p>A string representing the event type to listen for.</p> </div> </li> <li class="param"> <code class="param-name">listener</code> <span class="type">Function</span> <div class="param-description"> <p>The callback function that will be fired when the event occurs</p> </div> </li> </ul> </div> </div> <div id="method_dispatchEvent" class="method item inherited"> <h3 class="name"><code>dispatchEvent</code></h3> <div class="args"> <span class="paren">(</span><ul class="args-list inline commas"> <li class="arg"> <code>event</code> </li> </ul><span class="paren">)</span> </div> <div class="meta"> <p>Inherited from <a href="../classes/EventTarget.html#method_dispatchEvent">EventTarget</a>: <a href="../files/src_pixi_utils_EventTarget.js.html#l55"><code>src/pixi/utils/EventTarget.js:55</code></a> </p> </div> <div class="description"> <p>Fires the event, ie pretends that the event has happened</p> </div> <div class="params"> <h4>Parameters:</h4> <ul class="params-list"> <li class="param"> <code class="param-name">event</code> <span class="type">Event</span> <div class="param-description"> <p>the event object</p> </div> </li> </ul> </div> </div> <div id="method_load" class="method item"> <h3 class="name"><code>load</code></h3> <span class="paren">()</span> <div class="meta"> <p> Defined in <a href="../files/src_pixi_loaders_ImageLoader.js.html#l39"><code>src/pixi/loaders/ImageLoader.js:39</code></a> </p> </div> <div class="description"> <p>Loads image or takes it from cache</p> </div> </div> <div id="method_loadFramedSpriteSheet" class="method item"> <h3 class="name"><code>loadFramedSpriteSheet</code></h3> <div class="args"> <span class="paren">(</span><ul class="args-list inline commas"> <li class="arg"> <code>frameWidth</code> </li> <li class="arg"> <code>frameHeight</code> </li> <li class="arg"> <code>textureName</code> </li> </ul><span class="paren">)</span> </div> <div class="meta"> <p> Defined in <a href="../files/src_pixi_loaders_ImageLoader.js.html#l71"><code>src/pixi/loaders/ImageLoader.js:71</code></a> </p> </div> <div class="description"> <p>Loads image and split it to uniform sized frames</p> </div> <div class="params"> <h4>Parameters:</h4> <ul class="params-list"> <li class="param"> <code class="param-name">frameWidth</code> <span class="type">Number</span> <div class="param-description"> <p>width of each frame</p> </div> </li> <li class="param"> <code class="param-name">frameHeight</code> <span class="type">Number</span> <div class="param-description"> <p>height of each frame</p> </div> </li> <li class="param"> <code class="param-name">textureName</code> <span class="type">String</span> <div class="param-description"> <p>if given, the frames will be cached in <textureName>-<ord> format</p> </div> </li> </ul> </div> </div> <div id="method_onLoaded" class="method item private"> <h3 class="name"><code>onLoaded</code></h3> <span class="paren">()</span> <span class="flag private">private</span> <div class="meta"> <p> Defined in <a href="../files/src_pixi_loaders_ImageLoader.js.html#l60"><code>src/pixi/loaders/ImageLoader.js:60</code></a> </p> </div> <div class="description"> <p>Invoked when image file is loaded or it is already cached and ready to use</p> </div> </div> <div id="method_removeAllEventListeners" class="method item inherited"> <h3 class="name"><code>removeAllEventListeners</code></h3> <div class="args"> <span class="paren">(</span><ul class="args-list inline commas"> <li class="arg"> <code>type</code> </li> </ul><span class="paren">)</span> </div> <div class="meta"> <p>Inherited from <a href="../classes/EventTarget.html#method_removeAllEventListeners">EventTarget</a>: <a href="../files/src_pixi_utils_EventTarget.js.html#l96"><code>src/pixi/utils/EventTarget.js:96</code></a> </p> </div> <div class="description"> <p>Removes all the listeners that were active for the specified event type</p> </div> <div class="params"> <h4>Parameters:</h4> <ul class="params-list"> <li class="param"> <code class="param-name">type</code> <span class="type">String</span> <div class="param-description"> <p>A string representing the event type which will have all its listeners removed</p> </div> </li> </ul> </div> </div> <div id="method_removeEventListener" class="method item inherited"> <h3 class="name"><code>removeEventListener</code></h3> <div class="args"> <span class="paren">(</span><ul class="args-list inline commas"> <li class="arg"> <code>type</code> </li> <li class="arg"> <code>listener</code> </li> </ul><span class="paren">)</span> </div> <div class="meta"> <p>Inherited from <a href="../classes/EventTarget.html#method_removeEventListener">EventTarget</a>: <a href="../files/src_pixi_utils_EventTarget.js.html#l77"><code>src/pixi/utils/EventTarget.js:77</code></a> </p> </div> <div class="description"> <p>Removes the specified listener that was assigned to the specified event type</p> </div> <div class="params"> <h4>Parameters:</h4> <ul class="params-list"> <li class="param"> <code class="param-name">type</code> <span class="type">String</span> <div class="param-description"> <p>A string representing the event type which will have its listener removed</p> </div> </li> <li class="param"> <code class="param-name">listener</code> <span class="type">Function</span> <div class="param-description"> <p>The callback function that was be fired when the event occured</p> </div> </li> </ul> </div> </div> </div> <div id="properties" class="api-class-tabpanel"> <h2 class="off-left">Properties</h2> <div id="property_listeners" class="property item inherited"> <h3 class="name"><code>listeners</code></h3> <span class="type">Object</span> <div class="meta"> <p>Inherited from <a href="../classes/EventTarget.html#property_listeners">EventTarget</a>: <a href="../files/src_pixi_utils_EventTarget.js.html#l24"><code>src/pixi/utils/EventTarget.js:24</code></a> </p> </div> <div class="description"> <p>Holds all the listeners</p> </div> </div> <div id="property_texture" class="property item"> <h3 class="name"><code>texture</code></h3> <span class="type"><a href="../classes/Texture.html" class="crosslink">Texture</a></span> <div class="meta"> <p> Defined in <a href="../files/src_pixi_loaders_ImageLoader.js.html#l20"><code>src/pixi/loaders/ImageLoader.js:20</code></a> </p> </div> <div class="description"> <p>The texture being loaded</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../assets/vendor/prettify/prettify-min.js"></script> <script>prettyPrint();</script> <script src="../assets/js/yui-prettify.js"></script> <script src="../assets/../api.js"></script> <script src="../assets/js/api-filter.js"></script> <script src="../assets/js/api-list.js"></script> <script src="../assets/js/api-search.js"></script> <script src="../assets/js/apidocs.js"></script> </body> </html>