Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Load iFrame after page load

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
            }
        ?>
like image 618
Phil Howell Avatar asked Apr 30 '12 08:04

Phil Howell


1 Answers

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.

like image 61
Gerardo Lima Avatar answered Sep 26 '22 07:09

Gerardo Lima