Jquery/javascript check if the div finished loading?

Question

I have a facebook like button on my website like that:

<div class="fb-like" data-href="https://www.facebook.com/xxx"
             data-send="false" data-width="300" 
             data-show-faces="true">
</div>

I want to use jQuery or java script to check if this div is 100% finished loading on the page and then do other stuff.

I used $(document).ready and .load to check but non of them worked (they do the function even before the div finished loading). Does this problem have to do anything with the fact that this div contain an iframe from another website ? what am I doing wrong here ?

UPDATE I just tried this and it did not work at all:

$(document).ready(function() {
    $(".fb-like").load(function (){
         alert("Loaded :)");
    });
});

Answer 1

I believe the issue is that you need to test if the iframe is loaded rather than the div. I would suggest changing your selector to include the child iframe and checking for the load event on this.

$('.fb-like iframe').load(function() {
  console.log('iframe loaded');
});

Answer 2

$('.fb-like iframe').on(function() {
  console.log('iframe loaded');
 });