Question

We are working on a protoype web application, targeted at the IPAD. We have made great use of HTML5 and the app is working well.

Part of the requirement is to allow the app to switch between “Pages” in a fluid motion just like a native app.

So one of our suggestions is to change the way the web-app works. At present the app works much like a normal website, this presents problems when switching to pages with large images or animations (As they are loaded when the page switches).

Is it recommended to change our app so what the home page simply drags the new content (via AJAX) and manipulates the page accordingly, thus creating a so called single page app. Reducing the number and size of the http requests?

If this is the case and we wish to load the content via AJAX, how can we be sure that once we have dragged the content in, each of the images on the page have loaded. This will allow us to use a simple loading icon while the transition is taking place.

Answer 1

Is it recommended to change our app so what the home page simply drags the new content (via AJAX) and manipulates the page accordingly, thus creating a so called single page app. Reducing the number and size of the http requests?

In a single-page app (SPA), the number of requests may not be reduced, but their size may be, b/c you will have to load your scripts and view only once, then just update relevant parts of the page. (Of course, a multi-page design can also have significant speed improvements with carefully-constructed cache-control headers). One benefit of the SPA paradigm is that you can load multiple pages during initial app load, and show them when necessary. Thus, you can trade off some delay in the initial load for a snappier user experience on subsequent page changes – saving yourself a trip to the server, even if it is an “AJAX trip”. This is a trade-off that I usually like to make in SPAs.

If this is the case and we wish to load the content via AJAX, how can we be sure that once we have dragged the content in, each of the images on the page have loaded.
If the images are small enough, an alternative is to use base-64 encoded images, this’ll guarantee that all content is ready to be displayed at the same time.

You could attach the content to the dom in a container, but hide it. Show the container after all of the images’ ‘load’ events have fired. If you use jQuery, a plugin that helps with this is https://github.com/alexanderdickson/waitForImages. If you are using pure JS, you’d probably have to roll your own solution, which would involve:

1. iterate over all the images in the container,
2. storing a count of the number of images (numImages) and initializing a counter (numLoaded) that tallies the number of loaded images, and
3. binding to each image’s ‘load’ event, such that when it fires, the numLoaded counter is incremented, while
4. checking whether numLoaded == numImages. If true, all images have loaded and the container can be displayed.