Question

我在引导程序模式内使用iframe：

<div class="modal fade" id="newsModal" tabindex="-1" role="dialog" aria-labelledby="newsModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <div>
          <div id="loadingMessage">Loading...</div> 
          <iframe width="100%" class="frame embed-responsive-item" height="350" src=""></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

当单击具有相同类的某些元素的元素时，该iframe将打开：

<?php foreach($new as $news){ ?>
    <div class="post_frame" data-link="<?php echo $news['link']; ?>" data-toggle="modal" data-target="#newsModal">
         Lorem ipsum dolor sit amet
    </div>
<?php } ?>

我正在使用该代码设置iframe的来源：

$('.post_frame').each(function() {
    $(this).click(function() {
        var data = $(this).data('link'),
            frame = $('.frame');

        frame.attr('src',  data);
    });     

});

我要隐藏预加载器：

frame.load(function() {
    $('#loadingMessage').css('display', 'none');
});

但是预加载器仍然存在。

当我关闭该模式并单击具有相同类post_frame的另一个元素时，先前的源内容仍然存在，直到新源的内容加载为止。

如何在加载每个源之前创建一个预加载器？

Answer 1

更改此：

var data = $(this).data('link'),

对此：

var data = $(this).data('link');

然后从当前位置（内部函数）中删除它：

frame = $('.frame');

并将其放在函数外部的全局范围内

var frame = $('.frame');

如何将预加载器添加到其src动态更改的iframe？

1 个答案: