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
href attributes of an HTML tag to
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-href attributes. Once the transformation process is complete, Adaptive.js automatically swaps the
x-href attributes back to
From the previous example, the adapted page has the image tag
<img src="hero-mobile.jpg" />.