Progress will discontinue Telerik Platform on May 10th, 2018. Learn more

Making an Image Available Offline

Making an Image Available Offline

You can make an image stored on the server load offline when using the Backend Services JavaScript SDK. The preferred method for doing this is using HTML tag processing. It is much more automated and allows you to add offline images support to an app without making changes to how you render or make bindings in its UI.

The custom attributes used by HTML tag processing are sported on these HTML tags:

  • <img>
  • Any tag that uses the background-image CSS property

After you set the HTML elements as shown in this article, you need to process them as described in Processing HTML Elements.

Setting Up an IMG Tag

To make an image specified through the <img> tag work offline, you need to modify its tag like this:

  • Rename the src attribute to data-src, leaving the original link address unchanged
  • Add the data-offline attribute

You can also add optional attributes. See Table of Attributes for details.

<img data-src="http://example.com/images/image.jpg" data-offline />

When the <img> tag is processed, the standard src attribute is added, pointing to the image's offline copy.

Setting Up a CSS Background Image

HTML elements using the background-image CSS property can also be made available offline. Simply add the data-offline attribute:

<div style="background-image: url(http://...)" data-offline />

Table of Attributes

The next table provides detailed information about each HTML attribute that you can use in conjunction with Offline Mode:

Attribute Description
data-src The URL of the image that you want to display
data-offline* Specifies if the tag supports offline mode
data-responsive* (Optional) Specifies if the tag supports Responsive Images
data-loading-image (Optional) An URL of an image that is displayed until the actual image is available. Overrides the loading URL specified in the global settings. For hybrid mobile apps this should be a local image bundled with the app package. Example: data-loading-image="http://example.com/img.jpg"
data-error-image (Optional) An URL of an image that is displayed whenever there is an error downloading or processing the actual image. Overrides the error URL specified in the global settings. For hybrid mobile apps this should be a local image bundled with the app package. Example: data-error-image="http://example.com/img.jpg"
* The `data-offline` and `data-responsive` attributes can be set explicitly to true or false. For example: data-offline="true". The empty string, as well as any other string that differs from "false", are evaluated as true.

All attribute names can be configured while initializing the SDK. For more information see Configuring HTML Attributes.

See Also

Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.