Load iFrame after page load

Question

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

use jquery $(document).ready(function(){ //add code here }); — Philemon philip Kunjumon, Apr 30 '12 at 08:48
http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/ — Grunf, Apr 30 '12 at 08:50
Hmmm - that's not working. It's within a MySQL echo - is that an issue? — Phil Howell, Apr 30 '12 at 08:52

Gerardo Lima · Answer 1 · 2012-04-30T12:04:05.110

13

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.

edited Apr 30 '12 at 12:04

answered Apr 30 '12 at 10:07

Gerardo Lima

6,467
3
31
47

Thanks - how do I call loadDeferredIframe? – Phil Howell Apr 30 '12 at 10:25
...from the page initialization function that is. I'm not sure what you mean by that. – Phil Howell Apr 30 '12 at 10:34
@PhilHowell just call `loadDeferredIframe()` from inside the function you use for `window.onload`. If you don't have such function, you can do: `window.onload = loadDeferredIframe;` – Gerardo Lima Apr 30 '12 at 10:40
I'm sorry - I don't follow. Could you possibly append your original post with step by step instructions? Thanks so much. – Phil Howell Apr 30 '12 at 10:47
Not working at all :S - has stopped most of the script working on existing page http://crbase.phil-howell.com/employers/pag.php – Phil Howell Apr 30 '12 at 11:10

score 7 · Answer 2 · answered Apr 30 '12 at 08:53

7

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);
};

answered Apr 30 '12 at 08:53

Sudhir Bastakoti

99,167
15
158
162

score 3 · Answer 3 · edited May 23 '17 at 12:16

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.

edited May 23 '17 at 12:16

Community

1
1

answered Apr 30 '12 at 08:54

Richard

21,728
13
62
101

I needed to display information from another table within an echo. – Phil Howell Apr 30 '12 at 08:57
There does not appear to be any jQuery or any other script in the page you have linked to. – Richard Apr 30 '12 at 09:07
? I've amended my original post with the code. Don't know if that will make things clearer... – Phil Howell Apr 30 '12 at 09:10
I'm not very familiar with jQuery I'm afraid. – Phil Howell Apr 30 '12 at 09:15

score 0 · Answer 4 · answered Aug 18 '23 at 12:25

0

you can lazy load the iframe

<iframe src="someSrc.com" loading="lazy"></iframe>

answered Aug 18 '23 at 12:25

Yehuda Zvi

239
3
9

Load iFrame after page load

4 Answers4

Linked