Some web apps need to be huge containers for a wide variety of resources. Unfortunately, mobile devices are limited in terms of memory, autonomy and performance, especially when the available bandwidth is really poor or shared. Imagine that your client tells you: "I want this web app to be a container for unlimited images". Yes, you got it right: unlimited. This aspect implies that your client wants to add in the future as many images as he wants. You can't load them all at once because this will break your app and hang the poor mobile browser of the user. The solution is simple: loading on demand.
Loading on demand and HTML5 application cache
The loading on demand technique can be enforced by the use of the latest features of HTML5 application cache. In short, you create a .manifest file where you specify what kind of resources you want to store locally. Check out this tutorial on HTML5 Rocks.
Using Microdata and jQuery
Microdata were designed to associate data to HTML elements. In SGML terms, data--prefixed attributes can associate an infinite range of textual strings to an element as attribute values.
You can associate jQuery's animation data:
<div id="test" data-animation="width:200,height:200,left:50"></div>
Then you can use these data as follows:
$(function() {
$.asObject = function( str ) {
var parts = str.split( "," );
var o = {};
for( var i = 0; i < parts.length; ++i ) {
var part = parts[i];
var props = part.split( ":" );
var prop = props[0];
var value = props[1];
o[prop] = value;
}
return o;
};
$( "#anim" ).click(function() {
var $target = $( "#test" );
var anims = $.asObject( $target.data( "animation" ) );
$target.animate( anims, 1000 );
return false;
});
});
What's more, you can also associate links to external resources, such as images in our case:
<div class="gallery" data-images="img/1.jpg,img/2.jpg,img/3.jpg"></div>
Then you can fetch and display them on demand, that is, when the user actually wants to see them:
var getImages = function( element ) {
var images = element.data( "images" );
var paths = images.split( "," );
var html = "";
for( var i = 0; i < paths.length; i++ ) {
var img = new Image();
img.src = paths[i];
img.onload = function() {
if( this.complete ) {
html += "<img src='" + paths[i] + "' />";
}
};
}
element[0].innerHTML = html;
};
$( "div.gallery" ).each(function() {
var $gallery = $( this );
getImages( $gallery );
});
Of course you can bind the above function to a specific application event, for example when a user taps on the current slide or when the image container slides into view.
By using this technique you can insert as many resources as required by your application. Another thing that you could do is to combine this technique with AJAX, thus providing a better experience to the user.
