AJAX/PHP – callback after finished loading data

Question

(Not sure if I missed an already similar answered question…)

On click of a button, I'm loading various images from a database via PHP/MySQL and appending it to the body (the actual images are of course not stored in the database, the correct selection of the images is based on a posted variable).

My goal is to display a loading indicator after pressing the button and hiding the indicator after all the image data has completely loaded and displayed. This may be an easy to solve callback issue but I'm just getting started with AJAX. :)

The following is the code I currently managed to come up with. I'm guessing the load() function is not really the right one here?

Thanks for your help!

$("#somebutton").click(function(){
    alert("fetching…");
    $.post('loadmore.php', {
        somevariable: somevariable
    },
        function(data){
            $("body").append(data);
            $(window).load(function(){
            alert("finished loading…");
        });
    }); 
});

Jake N · Answer 1 · 2013-07-19T00:48:46.413

1

Read the docs http://api.jquery.com/jQuery.ajax/

Use the success callback to append the body and then the complete and error callbacks to clear things up correctly.

$("#somebutton").click(function(){
    alert("fetching…");

    $.post('loadmore.php', {
        somevariable: somevariable
    })
    .success(function(data){$("body").append(data)})
    .error(function(){alert("oh dear")})
    .complete(function(){alert("finished loading…")});      
});

Remember to always have a fallback for removing the loader - nothing worse than just having a loader and no way to remove it from the page and continue using the application / web site.

edited Jul 19 '13 at 00:48

answered Jul 19 '13 at 00:31

Jake N

10,535
11
66
112

Hey, cheers mate! I managed to load the data and display the various callbacks. Had to add "data" to the functions – function(data) – and delete the semicolon after the error-function. I'm guessing the callback is fired as it's supposed to – as soon as the generated data (some html tags [img] etc.) is received from the PHP file. However that also means, that the callback success-function is fired BEFORE the images are fully rendered on the page – it's fired when the tags are received. This comment is also valid for answer #2. :) – Tobias Jul 19 '13 at 00:48
I have updated my answer with your comments. Yes, `success` will not be aware of your image loading times. Perhaps use `setTimeout()` to delay the removal of the loading indicator? Or use some other code to detect the loading of the images. – Jake N Jul 19 '13 at 00:50
setTimeout() could work I guess, however the amount of images loaded is not the same every time. Maybe I could link the timeout-time to the image count though. Do you maybe have any ideas what else could detect the finished loading of the images? Yeah useless loaders are a pain. :) – Tobias Jul 19 '13 at 00:53
Sorry I don't, I would google it and go from there, see how you get on. – Jake N Jul 19 '13 at 00:54

score 1 · Answer 2 · answered Jul 19 '13 at 00:32

The function you have with the finished loading... alert is a success callback, so it gets executed once the AJAX call has finished. This means you don't need to use $(window).load.

Also, you can use the html method on an element to change its contents and display a message.

Something like this would work fine:

$("#somebutton").click(function(){
    $('#divID').html('Loading...');
    $.post('loadmore.php', {
        somevariable: somevariable
    },
    function(data){
        $("body").append(data);
        $('#divID').html('');
    }); 
});

score 0 · Answer 3 · edited May 23 '17 at 10:25

0

I managed to solve my problem by reading and tweaking the code in the following article. The function load() with the equation containing the self-explanatory variables [imagesLoaded >= imageCount] did the trick.

Know when images are done loading in AJAX response

edited May 23 '17 at 10:25

Community

1
1

answered Jul 19 '13 at 01:43

Tobias

319
3
16

AJAX/PHP – callback after finished loading data

3 Answers3