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
TheImage
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 andy
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.