CODEWITHSUNDEEP
jqueryfunctionloadpreload
Giorgio
Giorgio

Reputation: 21

Add a preloading gif into script and page

Please, I have a trouble with this code. In short: I have a small web page with menu with 4 links: Every link load a page content into a div called “target”, using the jquery load function. I have add some fade in and fade Out effect for the pages. The problem is when I have a huge page with a lot of content to load, so I need to put an overlay and small preloader gif up the "target" div and into the code inside the js scripts, but I don’t Know how. Please, could someone help me? Thanks..

Here the js function:

google.load('jquery', '1.4.2');
google.setOnLoadCallback(function(){

$('.nav a').click(function() {
    $('.nav a').removeClass('selected');
    $(this).addClass('selected');
});

$('#link1').click(function() {
    $('#target').fadeOut('fast', function() {
        $('#target').load('content/1.html', function() {
            $('#target').fadeIn('slow');
        });
    });
});

$('#link2').click(function() {
    $('#target').fadeOut('fast', function() {
        $('#target').load('content/2.html', function() {
            $('#target').fadeIn('slow');
        });
    });
});

Upvotes: 0

Views: 862

Answers (1)

Jai
Jai

Reputation: 74738

Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event.

Any and all handlers that have been registered with the .ajaxStart() method are executed at this time.

css class of ajax loader

.preload{
  background:url('your gif loader image path') center no-repeat;
}

then this jquery will do the preload.

$('body').ajaxStart(function() {
   $('.overlay').css({"background":"black","opacity":"0.7"}).show().addClass('preload');
});

I assumed that you will have a transparent overlay div which will cover the page or a specific area when any ajax request happens, here i am adding a class named preload which will have a background gif image of ajaxloader.

Upvotes: 1

Related Questions