Moobile.Image

Extends Moobile.Control

Provides an image control that correctly frees the memory upon being unloaded.

Initialization

Syntax:

var image = new Moobile.Image([element], [options], [name]);

Parameters:

Name	Type	Description
element Optional	Element	The image’s element, element id or html string.
options Optional	Object	The image’s options, see below.
name Optional	String	The image’s name.

Options:

Name	Type	Description
className	String	The image’s extended CSS class name, defaults to null.
styleName	String	The image’s default style, defaults to null.
tagName	String	The image’s element tag name, defaults to img.
preload	Boolean	Whether to preload the image.

Generates:

<img class="image"></div>

Defined roles:

Name	Description	Applies to	Note
image	Defines an element acting as a Moobile.Image control	All components	Use the data-image attribute to specify a subclass instead

Examples:

Specifying an element that acts an image control using the data-role attribute:

<img data-role="image" />

Specifying an element that acts an image control subclass using the data-role attribute:

<img data-role="image" data-image="MyImage" />

Events

preload

Fired when this image is loaded. If the preload option is true, this event will be fired once this image is preloaded otherwise it will be fired as soon as a source is specified.

---

unload

Fired when setting the source to null.

Methods

setSource(source)

Sets this image’s source into the src attribute of the element. Passing null as the source will unload this image.

Parameters:

Name	Type	Description
source	String	The source

Returns:

• Moobile.Image This Moobile.Image instance.

Example:

var image = new Moobile.Image();
image.setSource('path/to/an-image.png');

---

getSource()

Returns the image’s source from the src attribute of the element.

Returns:

• String The image’s source.

Example:

var image = new Moobile.Image();
image.setSource('path/to/an-image.png');
image.getSource(); // returns 'path/to/an-image.png'

---

getImage()

Returns the Image object used to preload this image. The preload option must be set to true otherwise this method will return null.

Returns:

• Image The Image object used to preload this image.

Example:

var image = new Moobile.Image(null, {preload: true});
image.setSource('path/to/an-image.png');
image.getImage(); // return the Image object.

---

getOriginalSize()

Returns the original image size. The preload option must be set to true otherwise the original size will not be calculated.

Returns:

• Object The original image size object with two keys, x for the width and y for the height.

Example:

var image = new Moobile.Image(null, {preload: true});
image.setSource('path/to/an-image.png');
image.addEvent('load', function() {
    image.getOriginalSize(); // returns {x: X,y: Y}
});

---

isLoaded()

Indicates whether this image is loaded.

Returns:

• Boolean Whether this image is loaded.

Example:

var image = new Moobile.Image(null, {preload: true});
image.setSource('path/to/an-image.png');
image.addEvent('load', function() {
    image.isLoaded(); // returns true
});
image.isLoaded(); // returns false

---

isEmpty()

Indicates whether this image has a source.

Returns:

• Boolean Whether this image has a source.