Work with External Resources

Load external objects such as images into your mobile site adaptation.

Adaptive.js has special handling for external resources, including:

When a browser encounters these resources, it starts to download the resource contents. However, Adaptive.js prevents the download from occurring during the transformation process.

Adaptive.js does this by changing the src or href attributes of an HTML tag to x-src or x-href. This prevention is done in case the resources are removed or changed for mobile.

For example, an image tag changes from <img src="hero.jpg" /> to <img x-src="hero.jpg" />.

To replace the desktop hero image with a mobile-friendly one, you do the replacement in the view:

// Store the hero image from the
// interim HTML in the $hero variable.
var $hero = $('img[x-src="hero.jpg"]');

// Change the $hero x-src attribute to
// the mobile version of the hero image.
$hero.attr('x-src', "hero-mobile.jpg");

In the view, you must use the x-src or x-href attributes. Once the transformation process is complete, Adaptive.js automatically swaps the x-src and x-href attributes back to srcand href.

From the previous example, the adapted page has the image tag <img src="hero-mobile.jpg" />.

Edit in GitHub