Monday, 16 August 2010 15:45

How to preload a page using mootools

Written by Nabil Sadki

font size decrease font size increase font size
Print
E-mail
5 comments

Rate this item

(5 votes)

Some web site contains a large number of images, scripts or stylesheets even after optimization of various pages. This slow loading, and the end user just does not perhaps understand that the page is being loaded when he sees everywhere broken divs, or images half loaded.

In this small article I will show you a trick that allows you to make a preloading image on your site, which will disappear once the page is loaded, using the Mootools framework.

’)

Let's see the following example to better understand the concept:

HTML code:

<body>
    <div id="preloader" style="width: 100%; text-align: center">
        <br /><br />
        <img alt="Loader" src="img/loader.gif"/>
        <br /><br />
        <label style="font-family:Georgia;font-size:11px;font-weight:bold;">Loading...</label>
    </div>
    <div id="wrap" style="visibility: hidden; width: 100%; text-align: center">
      <h1>Page Preloading demo</h1>
      <img src="img/01.jpg" alt="image01" />&nbsp;&nbsp;&nbsp;
      <img src="img/02.jpg" alt="image02" /><br />
 
      <img src="img/03.jpg" alt="image03" />&nbsp;&nbsp;&nbsp;
      <img src="img/04.jpg" alt="image04" /><br />
 
      <img src="img/05.jpg" alt="image05" />&nbsp;&nbsp;&nbsp;
      <img src="img/06.jpg" alt="image06" /><br />
      <img src="img/w1.jpg" alt="imagew1" /><br />
      <img src="img/w2.jpg" alt="imagew2" /><br />
      <img src="img/w3.jpg" alt="imagew3" /><br />
      <img src="img/w4.jpg" alt="imagew4" /><br />
  </div>
</body>

You may notice that the DIV with id "preloader" contains the image and the text of Preload.

JS code:

<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/more.js"></script>
<script type="text/javascript">
    window.addEvent('load', function() {
      $('preloader').destroy();
      $('wrap').setStyle('visibility', 'visible');
    });
</script>

The following code gives an overview on how we can use mootools to display a picture of Preload. The concept is simple, the DIV "preloader" is displayed until the page is loaded, at that moment, the DIV is removed, and the page is displayed.
Paste this code in the head section

More infos : This script is based on version 1.2 of Mootools, there is not much difference with version 1.1 of Mootools for this script, the only difference may be noted Quon is the use of the method "remove()" Instead of "destroy()".

View demo page Download sources

Last modified on Friday, 03 September 2010 04:11

Read 4103 times | Like this? Tweet it to your followers!

Published in JavaScript

Tagged under

Social sharing

Nabil Sadki

Hello, I am Nabyl, a Freelance web developer and a joomla addict. I have made many sites using the latter, but also patches for the core of this CMS. I like HipHop culture and world of warcraft. You can find find me on Twitter when i'm free...

Website: www.coins.ma E-mail: This e-mail address is being protected from spambots. You need JavaScript enabled to view it

Latest from Nabil Sadki

Related items (by tag)

More in this category: How to create a very simple accordion using mootools »