Twitter Bootstrap comes with a nice carousel for cycling through images. If you look at the html for the carousel you will notice that the images are loaded on page load. This is fine as long as it contains a few images but what happens if we have 11 jpg”s 500kb each ? One solution I have is to put the carousel in a modal and using jQuery to lazy load the carousel images.
In the following html we have a modal which contains a carousel which loads three images, when the page loads.
In the HTML all that has changed is that a
div was added that contains an image element that loads an animated GIF of an
ajax-loader just above the carousel html and the
src attributes on
img elements were changed to
data-src. This way the browser wont load the images on page load.
show event on all
divs with the
modal class, finds the carousel within it and hidse it. Then for all image elements within the carousel div we look to see if it has a
data-src attribute, if it does we create a
Deferreds are a bit advanced topic but here they are used to make sure that the carousel is shown after all images are loaded, hence why the deferred instance is added to an array.
img element. In this case it uses the
resolved function on the deferred instance
p as the callback function. This means that once the image is loaded by the browser, the deferred is marked as resolved/done.
To load the image, the
src attribute is set to the value of
data-src is set to an empty value so that this process isnt repeated again if the modal is closed and re-opened later.
The last bit of code is to wait until all of our deferred instances are done. This is done by the $.when.apply call. apply is used here as an array needs to be passed as the argument to
$.when. In the callback function, we hide the
fadeIn the carousel.
Thats it. Hope this helps. Read the following deferred.promise docs for more information on the API.