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
            }
        ?>

回答1:

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.

回答2:

Try adding at end of your body:


window.onload = function() {
    var iframe = document.createElement('iframe');
    iframe.style.display = "none";
    iframe.src = your_iframe_source_url;
    document.body.appendChild(iframe);
};

回答3:

If you want to, you can load your iframes once the page has loaed like this:

I have used jquery for simplicity here:

$(function() {

   $('<iframe />').attr('src', 'http://www.google.com').appendTo('#yourelementId'); 

});

see more here:

http://jquery-howto.blogspot.co.uk/2010/02/dynamically-create-iframe-with-jquery.html

JS Iframe loader

So for PHP Echo:

<?php

  echo "<div id='yourelementId'></div><script>$(function() { $('<iframe />').attr('src', 'http://www.google.com').appendTo('#yourelementId');});</script>"; 

?>

Oh and make sure you have linked jQuery in or use the code that Sudhir has given.

来源：https://stackoverflow.com/questions/10380787/load-iframe-after-page-load

标签

javascript

iframe

html

load