Moobile.Image

Moobile.Image

500 500 ThomasEngels
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.