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
}
?>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With