Help with jQuery image preloader

JavaScript
1

Hi,

I need a small help on a jQuery preloader function for image slider. If anyone can help me, it will be great.

Actually I have purchased a html css business website template from www.templateartist.com and now I need to do the changes according to my need.

You can check the preview here - http://templateartist.com/livepreview/smart-business-solution-corporate-website-template-html/53

The issue is -

In this template, there is a slider at home page. My images will be much heavier and rich with graphics that I will replace in this template.

Now I need a preloader or image preloader which will show when every image will load. So my site visitors can see that something is loading.

The script calling the slider is -

$("#slider1").responsiveSlides({
auto: false,
pager: true,
nav: true,
speed: 500,
maxwidth: 1140,
namespace: "centered-btns"
});

I am new at jquery. Can I add a loading function here? Can anyone provide me a jquery preload function? Every image should load individually and not all together. There will be 4 slider images.

Thanks!

2