Load iFrame after page load
html, iframe, javascript, load
Solution
As @Sudhir and @Richard showed, you can solve this problem by deferring the load of `iframe` contents and it just takes a few javascript lines.
Sometimes, though, is more convenient to place the `iframe` element into the source code instead of creating the element at runtime. Well, you can have it too, by initially creating the `iframe` element pointing to `about:blank` and changing its source at runtime:
<html>
<head>
<script>
function loadDeferredIframe() {
// this function will load the Google homepage into the iframe
var iframe = document.getElementById("my-deferred-iframe");
iframe.src = "./" // here goes your url
};
window.onload = loadDeferredIframe;
</script>
</head>
<body>
<p>some content</p>
<!-- the following iframe will be rendered with no content -->
<iframe id="my-deferred-iframe" src="about:blank" />
<p>some content</p>
</body>
</html>
Edited for @PhilHowell: I hope the idea is clearer now.
Problem
I have a PHP page with a few iFrames that cause the page to load fairly slowly. How do I go about only loading those iFrames once the page has completely loaded? I assume I need to use JavaScript but I haven't yet found a code that works. Many thanks. EDIT - The iFrame needs to appear within a PHP echo. Here's the code: ``` <?php while($i = mysql_fetch_array($e)) { ?> <div class='dhtmlgoodies_question'> <div style='float:left'><img src='../images/categories/<?=$i[Category]?>.png'></div> <div class='name'><?=$i[Name]?></div> <div class='location'><?=$i[Area]?></div> </div> <div class='dhtmlgoodies_answer'> <div> <div style='background-color:#FFF; margin-left:248px; padding:10px; color:#666'> <?=$i[Address]?><br> <?=$i[Area]?><br> <a href='http://maps.google.com/maps?q=<?=$i[Postcode]?>'><?=$i[Postcode]?></a>< <p> <?=$i[ContactName]?><br> <?=$i[TelephoneNumber]?> </div> <p> <a href='http://crbase.phil-howell.com/view.php?Employer=<?=$i[Employer]?>'> Edit this entry </a> <br> //HERE IS WHERE I WANT TO LOAD THE iFRAME </p> </div> </div> </div> <?php } ?> ```