javascript - Bootstrap - 想要隐藏内容直到模式加载

Question

我正在使用 jquery modal 在单个页面中加载多个 vimeo 视频。我注意到 DOM 中所有视频的加载 (34) 都会影响性能(造成加载滞后)。因此，我想确保仅在触发 shown.bs.modal 事件时加载视频播放器。

这里几乎是个菜鸟，所以我不知道该怎么做。

模态:

<div class="modal fade" id="<?php echo $target; ?>" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">    

      <div class="modal-body">
                <iframe class="test" id="vimeo" src="//player.vimeo.com/video/<?php echo $id; ?>" 
      frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
      </div>      

  <div class="modal-footer">
    <?php echo $name; ?>
  </div>

    </div>
  </div>
</div>

注意:阅读已接受答案的评论

Answer 1

我相信我已经找到了解决方案。 Here is a working demo 。如果您检查浏览器的网络部分，您会发现它们在相应的模式打开之前不会加载。

您最初可以将 iframe 的 src 留空，这样它就不会加载任何内容。将您的 URL 存储在数组中，然后您可以在 shown.bs.modal 事件上使用事件处理程序，如您所提到的。

var iframes = ["URL1","URL2","URL3"];

$('.modal').on('shown.bs.modal', function() {
    var id = $(this).data('id');
    $(this).find('iframe').attr('src',iframes[id]);
});

您会注意到我引用了一个 data-id，您可以非常轻松地将其添加到每个模态中。

<div class="modal fade" id="modal1" data-id="0" tabindex="-1" role="dialog" aria-hidden="true">

<div class="modal fade" id="modal2" data-id="1" tabindex="-1" role="dialog" aria-hidden="true">

我从 0 开始，因为数组从 0 索引开始。

***注意 - 这样做的缺点是 iframe 必须在每次打开相应模态时加载 URL。

编辑:实际上，使用另一个数据属性，您可以避免每次加载 URL 的问题。 Updated demo .

<div class="modal fade" id="modal1" data-id="0" data-loaded="false" tabindex="-1" role="dialog" aria-hidden="true">

如果 URL 已加载，请在替换 URL 之前检查 shown.bs.modal 事件中的属性。

$('.modal').on('shown.bs.modal', function() {
    var loaded = $(this).data('loaded');

    if(loaded == false) {
        var id = $(this).data('id');
        $(this).find('iframe').attr('src',iframes[id]);

        $(this).data('loaded', 'true');
    }
});

编辑 2 - 使用 php 数组中的 ID，您可以将它们转换为 JS 数组，如下所示:

var iframes =<?php echo json_encode($php_array);?>;