SharePoint 2010 Preloader

Question

I'm wondering if there is any possible way to add a pre-loader like jQuery plugin to SharePoint.

Not like when the page is fully loaded, show a loading gif. But something similar to SharePoint dialog box when you want to add a new item and you click on "add new item" and dialog box will show up but before there is a message where is says "Please wait..."

I want to add this to the whole site, so when the user is clicking a list, page or a url link the dialog will popup.. more like no page refresh.

Is this possible with SharePoint? Also is nice to have it when the page is taking longer time to load so the user doesn't thing that he didn't click on the "link".

Answer 1

You should implement this in the master page. First you need to get a gif image. Then using CSS center the image.

<img src="loading.gif" id="imgLoading"/>

#imgLoading {
    position:absolute;
    width:100px; /*image width */
    height:100px; /*image height */
    left:50%; 
    top:50%;
    margin-left:-50px; /*image width/2 */
    margin-top:-50px; /*image height/2 */
}

This image should be displayed by default. Remove this image once the page load is completed. For that, you can use jQuery as follows

$(document).ready(function(){
    $('#imgLoading').hide();
});

Note - This takes cares of only normal page load. In 2013 SharePoint extensively uses asynchronous calls, that means things will get loaded in the background.