Class: SC.ImageView

Extends SC.Control, SC.InnerFrame, SC.View.

Displays an image in the browser.

The ImageView can be used to efficiently display images in the browser. It includes a built in support for a number of features that can improve your page load time if you use a lot of images including a image loading cache and automatic support for CSS spriting.

Note that there are actually many controls that will natively include images using an icon property name.

Defined in: image.js

SproutCore 1.0

Field Summary

Class Methods

Instance Methods

Field Detail


If YES, this image can load in the background. Otherwise, it is treated as a foreground image. If the image is not visible on screen, it will always be treated as a background image.

localize Boolean
If YES, any specified toolTip will be localized before display.
Default value:
status String

Current load status of the image.

This status changes as an image is loaded from the server. If spriting is used, this will always be loaded. Must be one of the following constants: SC.IMAGE_STATE_NONE, SC.IMAGE_STATE_LOADING, SC.IMAGE_STATE_LOADED, SC.IMAGE_STATE_FAILED

useImageQueue Boolean

If YES, image view will use the SC.imageQueue to control loading. This setting is generally preferred.

Default value:
value String

A url or CSS class name.

This is the image you want the view to display. It should be either a url or css class name. You can also set the content and contentValueKey properties to have this value extracted automatically.

If you want to use CSS spriting, set this value to a CSS class name. If you need to use multiple class names to set your icon, separate them by spaces.

Note that if you provide a URL, it must contain at least one '/' as this is how we autodetect URLs.

Class Method Detail


Returns YES if the passed value looks like an URL and not a CSS class name.


Instance Method Detail


Called when the element is attached to the document.

If the image uses static layout (i.e. we don't know the frame beforehand), then this method will call updateLayerIfNeeded in order to adjust the inner frame of the image according to its rendered frame.


Called when the element is created.

If the view is using a canvas element, then we can not draw to the canvas until it exists. This method will call updateLayerIfNeeded in order to draw to the canvas.


Will be one of the following constants: SC.IMAGE_TYPE_URL or SC.IMAGE_TYPE_CSS_CLASS


The canvas element performs better than the img element since we can update the canvas image without causing browser reflow. As an additional benefit, canvas images are less easily copied, which is generally in line with acting as an 'application'.

SproutCore 1.5
Recalculate our innerFrame if the outer frame has changed.
Documentation generated by JsDoc Toolkit 2.4.0 on Wed Apr 08 2015 10:02:20 GMT-0600 (CST)