CODEWITHSUNDEEP
jqueryhtmlajaxsettimeoutautoscroll
Jenz
Jenz

Reputation: 8369

Image not showing for specified time in JQuery

In my webpage I am showing data from database using auto scrolling. So every time as the page is scrolled down an ajax function is called which will fetch next set of records from database and appends it to the last content div in the webpage.

Below is my AJAX function for autoscrolling.

$(document).ready(function()
{
$(window).scroll(function(){    // scroll event
        if(($(document).height()-$(window).height()-$(document).scrollTop()) < 300){
          last_msg_function();
        }
    }); 
});
function last_msg_function()    // function called on page scrolling
{
       var ID=$('#maxid').val();  // Id of a hidden field for getting the starting offset for next fetching
       var newID=parseInt(ID)+1;
       $('#maxid').val(newID);  

       if(ID != 'NULL')
       {
        $.ajax({
            type:'post',
            datatype:'html',
            data:'last_msg_id='+newID,
            url:"<?php echo base_url();?>/index.php/member/scrollfunction",
            success:function(response)
            {
                if(response!="")   // if there is response then show image for some time
                {
                    $('div#last_msg_loader').html('<img src=<?php echo base_url();?>images/page-loader.gif>');
                    $('div#last_msg_loader').show();
                    $('div#last_msg_loader').fadeIn().delay(5000).fadeOut();
                    //setTimeout(function() { $("div#last_msg_loader").hide();}, 2000 );
                    $(".subupdatediv:last").after(response);   // append after the last div with class subupdatediv

                }
                else   // if there is no response, then not show the loading image
                {
                    $("div#last_msg_loader").hide();
                }
            }
        });
       }
}

The problem is that, the loading image is getting disappeared very quickly so that for those who visit the page even cannot see it. I tried to show the image for some time using the following methods.

$('div#last_msg_loader').fadeIn().delay(5000).fadeOut();

and

setTimeout(function() { $("div#last_msg_loader").hide();}, 2000 );

But both didn't worked. Can anyone help me to show the loading image for some time if there is response and then append the response to the page. The loading image div is as shown below:

<div id="last_msg_loader" style="height:230px; margin-left: 45%"></div>

Thanks in advance for any help.

Upvotes: 0

Views: 134

Answers (1)

Kapil gopinath
Kapil gopinath

Reputation: 1053

One thing you can do is show the respone after fadeout.

so it will be like

if(response!="")
{
    $('div#last_msg_loader').html('<img src=<?php echo base_url();?>images/page-loader.gif>');
    $('div#last_msg_loader').fadeIn(1000).fadeOut(5000,function(){
           $(".subupdatediv:last").after(response);
    });

}
else
{
   $("div#last_msg_loader").hide();
}

Upvotes: 1

Related Questions