How do i display a page ONLY after the iframe has been loaded completely?

Question

I have a page, index.php, on my application that displays data from another page, weather.php. Unfortunately, the iframe takes a few seconds to load so after the page has loaded fully (i mean the index.php page), the iframe space is there. So what i want to do is to make the page wait for the iframe to load completely before displaying the complete html.How do i go about this?

Answer 1

You can display a spinner until the iframe is loaded.

Below code can be used for checking the iframe loading status and remove the spinner.

var myIframe = document.getElementById('iframeid');
myIframe.addEventListener("load", function() {
    // remove spinner here
});