Question

我有这部分代码。加载页面时，所有div都已加载但尚未可见。这是一种在单击时开始加载div内容的方法吗？现在由于所有div的

，页面速度变慢了

<a href="#?w=550" rel="popup_add_dossier" class="poplight" title="'.$lang['form_add'].'"><img src="images/icon/new.png" ></a>

<div id="popup_add_dossier" class="popup_block">
<iframe src="add_dossier.php" frameborder="0" scrolling="no" width="550" height="400">

Answer 1

你的意思是只在单击一个元素时才在if中加载iframe？如果是这样，您可以从iframe标记中删除iframe src属性，并仅在单击该元素时设置src。

关于iframe：

<iframe id='ifr' frameborder="0" scrolling="no" width="550" height="400">

在可点击元素上：

onClick='document.getElementById("ifr").src="add_dossier.php";'

Answer 2

jQuery让它变得简单！

在<head>部分下方加载。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
jQuery(function(){
    $("iframe").each(function(){
        this.tmp = this.src;
        this.src = "";
    })
    .parent(".popup_block")
    .click(function(){
        var frame = $(this).children("iframe")[0];
        console.log(frame);        frame.src = frame.tmp;
    });
});
</script>

Answer 3

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#button').click(function(){
        if(!$('#iframe').length) {
                $('#iframeHolder').html('<iframe id="iframe" src="http://google.com" width="700" height="450"></iframe>');
        }
    });   
});
</script>

<a id="button">Button</a>
<div id="iframeHolder"></div>

仅加载div iframe onclick

3 个答案: