Wait until content loaded by .html() is ready

Question

I have a page where I use the jquery .get() method to load in contents and .html() to display them on my page. During the loading process I have a div box with a preloader positioned above my page to hide the new elements popping up and instead display a gif. Some pages take very long to load though, as there are iframes, pictures etc included in them. Now I only want the preloader div to be removed after everything has been fully loaded, which is where I can't find an answer, as there is no .html() callback function. I've tried .load(), .on() with load as an event, the .done() function on the .get() method but nothing seems to work as I would like to have it.

Is there any chance to find out, when the the contents of my ajax div have finished loading, so I can then remove the preloader?

Edit
This is my HTML Markup

<div class="wrapper">
<div class="ajax_cont">
<!-- The content will come in here -->
</div>
<div class="preloader"></div>
</div>

Maybe I didn't explain the problem clear enough, so here is my js code as well:

function load_ajax(linktofile) {
    $(".preloader").fadeIn(200);

    setTimeout(function() { 
        $.get("ajax/" + linktofile, function(data){}).done(function(data) {

            var content = $(data).filter('#loaded_content').html();

            $(".ajax_cont").html(content); //It takes a while until all pictures, which were included in content, are fully loaded in .ajax_contnt          

            setTimeout(function() { 
                $(".preloader").fadeOut(200); //I want this to be executed only when everything is fully ready
            }, 150);

        });
    }, 200);    
}

I've added a few comments to clarify, what exactly I meant.

put the preloader inside the html which is going to be replaced, so the ajax call will replace the preloader when it is completed — Nikos M., Jun 07 '15 at 14:58
I've added my html to the question. .done() wont work for me, as it waits for the ajax call to finish and not the content to be loaded completely. And if I replace the preloader then it disappears to early as well. — LL1997, Jun 07 '15 at 15:04
Take a look at http://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done — lmgonzalves, Jun 07 '15 at 15:32
Thanks - but unfortunately this didn't do the trick either. The problem isn't that it doesn't wait until the ajax request is completed, this works flawless. The thing is that I would like to wait until the new content inside `.ajax_cont` is completely ready (iframes, pictures etc) until `.preloader` fades out. — LL1997, Jun 08 '15 at 10:48
This answer might provide the solution to your problem: http://stackoverflow.com/a/17989377/2788872 — John Weisz, Aug 10 '15 at 13:18

Thapedict · Answer 1 · 2015-08-10T13:09:40.970

Try this

jQuery(document).ready(function($){
  // assuming .loader is a button/link to load content
  // and .preloader is the window (overlay) that will show while content is being loaded
  $('.loader').click(function(){

    // fadein
    $('.preloader').fadeIn(200);

    // load content
    $('.ajax_cont').load("ajax/" + linktofile,function(){

       // use jquery's **:last** to wait for the last image to load then fadeout
       $('.ajax_cont img:last').on('load',function(){
          $('.preloader').fadeOut(200);
       });

    });  // ajax_cont load
  });  // loader click
});  // document ready

Wait until content loaded by .html() is ready

1 Answers1