Show iframe only after fully loaded in HTML
An iframe is an HTML element that allows you to embed other HTML documents within the current document. Iframes are often used to load third-party content, such as advertisements or videos.
<iframe
style="display:none;"
onload="this.style.display = 'block';"
src="https://example.com"></iframe>The problem with iframes is that they can slow down the loading of a web page, as the browser has to wait for the iframe content to load before it can continue loading the rest of the page.
One way to solve this problem is to only show the iframe once it has fully loaded. This can be done using the "onload" event handler.
The "onload" event handler is a function that is executed when the iframe has finished loading. We can use this to hide the iframe until it has finished loading, and then show it once the onload event has fired.
This approach can improve the loading time of a web page, as the browser can continue loading the rest of the page while the iframe is loading in the background.
We have applied a display none CSS property to the iframe initially. And added an onload event on the iframe that will apply the display block CSS property.