Loading gif not waiting for iFrame to load?

Question

I want a loading .gif to display until everything has loaded including an embedded iframe . However, currently the loading gif disappears once everything has loaded apart from the iframe . How can I get it to wait until the iframe has loaded too?

Currently using this:

<script>
  $(window).ready(function() {
    $('#loadinga').hide();
  });
</script>

Thanks

Answer 1

<iframe name="xyz"></iframe>

<script>
  var expectedLoadCount = 2; 

  function checkEverythingLoaded() {
    expectedLoadCount--;
    if (expectedLoadCount > 0) return
    $('#loadinga').hide();
  }

  $("#xyz").on("load", checkEverythingLoaded);
  $(window).ready(checkEverythingLoaded);
</script>

Answer 2

suppose your iframe id is iframeId

then try with this-

<iframe id="iframeId" src="..."></iframe>

<script>
document.getElementById('iframeId').onload = function() {
$('#loadinga').hide();

  alert('iframe is loaded');
};
</script>