Add "Loading Icon" Before Images Appear

Let's say you have a large picture in your blog, and you want when the image was in load a preload icon appears which shows that the images was in load, for this trick you can use a little trick of css :)

You can only use java script for this trick but if you use java script tricks then your blog will be heavier to open. Okay, the choice is yours, to use java script trick or css trick? But in this post I will explain the css tricks only :D

Here are the steps:

Step 1: Prepare a preload images!
Prepare a preload images like this

, to preload images you can make an online here. But remember not to make the image size too big because if too much preload images may not appear when the main image is in load! You do not want that to happen right!?

Step 2: Input to the template CSS!
Go to the tab Edit HTML and look for the code ]]></b:skin> and input the code below before the code ]]></b:skin>!

.load{background:url(images/youricon.gif) no-repeat center;}

Do not forget to replace the red colored text with your preload images address!

Step 3: How to use the code.
The easiest way to use this trick is to add a div tag on every image in your blog, and also write down the length and width of the image that is loaded, for example like this:

For example after the code added to images, like this:
You must clear the cache and reload this page first! Or you can see it here :D