how to load an image until my browser fully load the dynamic content?

Question

I need to fetch more than 500 records.So i need to load a image symbol until all data is fetched?I used ajax for fetch data from MYSQL database

When you call your AJAX just after that line write like this $("loadingImageId").show(); and after success $("loadingImageId").hide(); — Sunil Pachlangia, Aug 19 '15 at 05:09
I think this might help http://code.tutsplus.com/tutorials/how-to-create-infinite-scroll-pagination--wp-24873 — ka_lin, Aug 19 '15 at 05:09
I have to put attendance for a hole class.I need to display all the students register number for entering the attendance.I displayed all records using ajax.But the contents are loaded fully after a few seconds.So until all records are displayed i need to indicate page loading information to end user. — UdaiyarMuthuramu, Aug 19 '15 at 05:40

score 0 · Answer 1 · answered Aug 19 '15 at 05:15

if you are using ajax then you can implement beforeSend, try this

$.ajax({
    url:'',
    data:{
    },beforeSend:function(xhr){
        // some image in a div box
        $('.some-image').show();
    },success:function(data){
        // your code goes here to display data
        $('.some-image').hide();
    }
});

Hope this help.

score 0 · Answer 2 · edited Aug 19 '15 at 05:28

try this

$('.record').live('click', function() {
    var ajaxurl="test.php";
    $.ajax({
        type:"POST",
        url:ajaxurl,
        data:'&test='+1,
        beforeSend:function(){
            $('.cf_loader').html('<p class="cf_load"></p><p class="cf_result">Fetching new result</p>').css('display','block');
        },
        success:function(response){
            $('.cf_loader').hide();         
        }
    });
});

how to load an image until my browser fully load the dynamic content?

2 Answers2