Preloading images using Mootools JavaScript framework

Cristi_N — Tue, 24 Feb 2009 08:41:10 +0000

When a visitor reaches a web page for the first time, and he or she has to watch how the images are fulfilling the placeholders floating the text around or not, could be turned into a “leave and forget this” experience. A neat aspect of your web page presentation can make your visitors to never come back. For many web pages a good tweak could be the option to preload the images using JavaScript and display them with the rest of the page content in one “shot” on visitor’s screen.

Mootools JavaScript Framework

Mootools JavaScript framework is designed for the intermediate to advanced JavaScript developer and allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API. I use this framework and so far I’m pleased with the way things are going. If you want to know more about please read the Mootools documentation.
In the next lines I will present how to use one of this framework plug-in, Assets Method:images to preload images and the content after the operation is completed. It’s easy to understand and to reproduce.

Assets Method:images

What does this plug-in do? Preloads an array of images (as strings) and returns an array of img elements.. The syntax is very simple:

var myImages = new Asset.images(source[, options]);

where sources – is an array or a string, of the paths of the image files and options – (object, optional) could be a function which is executed on onProgress or onComplete events for this plug-in.

Optimizing web page appearance

The purpose of using this plug-in is to have our page content displayed after the images within are loaded. Our page will have some text and let’s say 10 images with the size varying from 60Kb to 100Kb to be displayed.
First, we need to hide the content when web page is loaded. For doing this we have two options: one to set the display style property to none, and the second to set the visibility style property to hidden. The difference between this two options is that display:none means that the placeholder for the element is not present at all, and for visibility:hidden the placeholder exists on page but is not visible.

With Mootools JavaScript Framework we can set the desired style property using:

$('myContent').setStyle('display', 'none');

or

$('myContent').setStyle('visibility', 'hidden');

The problem is that until the JavaScript library is loaded there is a slightly chance for our content to be shown until it has the style property set. So, it will be better to use a very trivial JavaScript function to set the style property which will be declared on <head> area, and call it inside the document body.

Our function will be as follows:

function hideContent{ documentGetElementById('myContent').style.display = "none' }

or
function hideContent{ documentGetElementById('myContent').style.visibility = "hidden'; }

It is important where the function should be fired up. So I place the JavaScript code just after the opening <div> tag with the id "myContent". Place the code before, and you will have a "null" object.
At this point we have our content hidden. After this we can initiate the images preloading process. The options for the Asset Mootools Plug-in could be one of two functions which can be executed on onComplete or onProgress events. On onProgress we have a function which will create HTML elements so during the preloading process a "Loading content, please be patient ..." text string will be displayed, and on onComplete event a function will reveal the content of our page.

Creating HTML elements

One of the methods used to create HTML elements with Mootools is the Element constructor which creates a new element of the type passed in. I chose to create two elements, one of division type and the second of image type, which will be injected after the text generated to be displayed. The image, which will be an animated GIF, is added just as a bit of flavor for our page presentation. The code will be executed based on MooTools' custom domready event.
The elements will be created inside a division container. We have two options to place this container, before the main content container or after. If we place it at the end of page content, the string text will appear without the image, for a certain period of time, and this is an undesired effect, so it will be better to place it just after the opening <body> tag.

The JavaScript code will be as follows:

var myImages = new Asset.images(['images/img1.png', 'images/img2.png', 'images/img3.png', 'images/img4.png','images/img5.png', 'images/img6.png', 'images/img7.png', 'images/img8.png', 'images/img9.png', 'images/img10.png'], { onProgress: function(){ var myDisplayTextContainer = new Element('div', {id: 'loadingText'}); //create text container var myPreloadingImg = new Element('img', {id: 'loadingImg'}); //create image myPreloadingImg.setProperty('src', 'images/preloading.gif'); //set the image source $('loading').grab(myDisplayTextContainer); //grabs text string container myPreloadingImg.inject(myDisplayTextContainer, 'after'); //inject image after text string container $('loadingText').set('text', 'Loading content, please be patient ...'); //create text string }, onComplete: function(){ $('loading').setStyle('display' , 'none'); //or use $('loading').setStyle('visibility', 'hidden') (function(){ $('myContent').setStyle('display', ''); //or use $('myContent').setStyle('visibility', 'visible') }).delay(250); } })

I use a delay time before the content is displayed, because the animated GIF creates an ugly visual effect just before is disappearing.
Anyway, being a stochastic process, a different behavior is expected for each web browser, even the desired result may be as expected.
Please follow the link, to see how content is displayed using the Mootools Asset Method:images to preload images.

Limitations and issues using this method

There could be a chance when using this method with display style property used to hide/show content, that the images will not be displayed on Internet Explorer 6. Using visibility style property instead to target this browser engine version will fix this issue. On the other hand, if the visibility property is used on Internet Explorer 7, there could be a chance that the images and some text will not appear on page, or they are shown after some time.
Another issue is that, is more than one instance of the image injected after the text string container. This could simply be "cosmeticized" setting the overflow style property for the image container to hidden and setting the height of the container to a value that fits the text string and the preloading image heights.

Preloading images using JavaScript

If your are looking for some JavaScript functions to preload images, independent of any framework, here you can find a good example for a JavaScript Image Preloader.

I hope this resource is useful.