仅当单击元素时，才将div中的iframe加载

Question

When the page is loaded also all div's are loaded but not yet visible. Is there a way to start loading the content of the div when it's clicked? Now the page is slowed down because of all div's. I have tested this be removing all but one div and the page as been much faster.

How can I prevent from all data being loaded before a link is clicked?

Header

<script type="text/javascript">
$(document).ready(function(){

    $.fn.popOpen = function(){

        var popID = $(this).attr('rel'); //Get Popup Name
        var popURL = $(this).attr('href'); //Get Popup href to define size

        //Pull Query & Variables from href URL
        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1]; //Gets the first query string value


        //Fade in the Popup and add close button
        $('#' + popID).fadeIn('slow').css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="images/icon/delete.png" class="btn_close" title="<?php echo $lang['sluit'] ?>" /></a>');

        //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
        var popMargTop = ($('#' + popID).height() + 20) / 2;
        var popMargLeft = ($('#' + popID).width() + 20) / 2;

        //Apply Margin to Popup
        $('#' + popID).css({
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        //Fade in Background
        $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
    };

    //When you click on a link with class of poplight and the href starts with a #
    $('a.poplight[href^=#]').live('click', function() {
        $(this).popOpen(); //Run popOpen function on click
        return false;
    });

    //Close Popups and Fade Layer
    //$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
    $('a.close').live('click', function() { //When clicking on the close...
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove();  //fade them both out
            location.reload(); // reload page
        });
        return false;
    });
});
</script>

Div

<div id="popup_planning_opmerking'.$row['planning_id'].'" class="popup_block">
                                    <iframe id="ifr_2_'.$row['planning_id'].'" frameborder="0" scrolling="no" width="525" height="300">
                                    </iframe>
                                    </div>

Link to popup

<?php
echo '<td><a href="#?w=525" rel="popup_planning_opmerking'.$row['planning_id'].'" class="poplight" title="'.$lang['form_submit'].'"><img align="center" src="images/icon/edit_sm.png" onClick=\'document.getElementById("ifr_2_'.$row['planning_id'].'").src="planning_opmerking.php?id='.$row['planning_id'].'";\' /></a>';
?>

Output

                              <td nowrap class="editable_select_plaatnr" id="planning_platen|plaat_no|13718|planning_snijden"></td><td><a href="#?w=525" rel="popup_planning_opmerking13718" class="poplight" title="Verstuur"><img align="center" src="images/icon/edit_sm.png" onClick='document.getElementById("ifr_2_13718").src="planning_opmerking.php?id=13718";' /></a> <a href="#?w=400" rel="popup_delete_planning13718" class="poplight" title="Verstuur"><img align="center" src="images/icon/delete_sm.png" onClick='document.getElementById("ifr_3_13718").src="planning_delete.php?id=13718";' /></a></td>
                              <td></td>
                              <td class="row_right"></td>
                              </tr>
                              <tr>
                                  <td> <div id="details13718"></div> </td>
                              </tr>
                            <div id="popup_planning_gereed13718" class="popup_block">
                            <iframe id="ifr_1_13718" frameborder="0" width="600" height="725">
                            </iframe>
                            </div>

                            <div id="popup_planning_opmerking13718" class="popup_block">
                            <iframe id="ifr_2_13718" frameborder="0" scrolling="no" width="525" height="300">
                            </iframe>
                            </div>

Answer 1

如果在单击链接时可以同时访问<a>和<div>元素，是否不能简单地将<iframe> url作为一些自定义URL添加到<a>元素并在添加新的<iframe>时添加您使div可见吗？