Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/webgalli/public_html/blog/wp-includes/plugin.php on line 571

Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/webgalli/public_html/blog/wp-includes/plugin.php on line 571
Show a pre loader until the Big image completely loads - Team Webgalli Blog - Team Webgalli Blog
Request quote

Show a pre loader until the Big image completely loads

Posted on: July 29th, 2012 by Mohammed Aqeel No Comments

This is a simple method of showing a pre loader to users until the loading of a big image in your webpage is completed. Sometimes when you embed a big image inside your webpag,  it will take minutes to get it loaded completely or at least few seconds before the first bit of it is loaded. In this time no information is provided to the user on whats happening in the site. This can create confusion for them. You can easily avoid this by just showing a pre loader with message like loading… Please wait. This will give them the information that something is happening and its better to wait, than seeing a white empty area. You can implement it with pure HTML and CSS alone

Here is the html of the image. You just need to add a class called “with_preloader” to your big image

<img class="with_preloader" src="the_master_image.png" width="1024" height="768" />

Now we need to create the CSS for it

img.with_preloader {
    background: url("path/to/loading.gif") 50% 50% no-repeat;
}

You can generate beautiful ajax loaders from AjaxLoader or Preloader websites.

Live demo

Know a better / easier way of doing it? Please feel free to share it in comments and we will add it to the resource.

Tags: , , ,