Here you will have the opportunity to learn how to create a pre-loader image without using JavaScript or other script. We are going to use 100% CSS tulles and technique. Being just codes to understand and nothing very high performed for your brain, to melt your consciousness, but the minimal and smart uses of codes that basic webmaster should know already. The need of using this a pre-loader, is unknown, or why so? Many websites or more than 80% use CSS codes to display their navigation menu, system and in this type of menus images are used. Rolling with your mouse down on a menu you will see of course the menu items, or the “hover” image is being displayed. This “hover” image is being loaded in seconds and sometimes your browser doesn’t load all the “hovers” when you start your page or just a page. Being the designer of the page you need to display the page content right away and this is where pre-loader comes in help, being a helpful “engine” that helps your motors .

HTML codes :

Adding pre-loader. Open HTML and add the next code above your </body>tag.

 <div class=”loader”></div>

  Now inside this div, add images you would like to pre-load. The images won’t be see when the webpage loads, only when rolling over the menu item.

Open the CSS file and add the code :

  The codes  will report to div with class loader that the display should be 1000px to left. Of course outside your browser. The box will be notice by the visitors, but your browser will know that the box is out there and will load images.

Fore adding more images to div, you simply just add more images and that’s it.

Starting now, you are free to pre-load images without using JavaScript. Thanks fore reading and good luck in using it.

Share This