JQuery wait for the full AJAX page to load

I am using AJAX to display the contents of page B on page A.

How can I make jQuery wait for everything (text, images, etc.) to load before the content is displayed?

$.ajax({
    url:"pageB.html",
    beforeSend: function() {
        //show loading animation here
    }
    success: function(data) {
        //hide loading animation here
        $("body").append(data);
    }
});

I use beforeSend to display loading animations to the user when an AJAX request is being processed. Now I want to “extend” the waiting time so that the loading animation does not disappear before all the images have been loaded.

I tried to hide the attached data first, wait for all the images to load, and then show the content   $("body").on("load", "images class here", function() {//show content})inside success, but the event does not fire.

Any ideas?

UPDATE:

Updated code:

$.ajax({
    url:"pageB.html",
    beforeSend: function() {
        //show loading animation here
    }
    success: function(data) {
        //hide loading animation here
        $("body").append(data);
        $("body").on("onload", "img", function() {//display content});
    }
});