Javascript 引导-想要隐藏内容'；直到模态载荷

我使用jquery模式在一个页面中加载多个vimeo视频。我注意到DOM中所有视频的加载（34）都会影响性能（在加载时产生延迟）。因此，我想确保视频播放器仅在

show.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>

---

在关闭模式时清除模式

$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});

另一方面，我不太确定你想做什么。您可以查看jScroll，这样当用户开始在模式中滚动时，它将只加载其余的视频

编辑：您可以从外部html文件加载模态的内容，这样只有当有人单击模态链接时才会加载视频iframe。
我相信我找到了解决方案。如果您检查浏览器的“网络”部分，您会注意到它们在相应的模式打开之前不会加载

最初可以将iframe的src保留为空，这样它就不会加载任何内容。将URL存储在一个数组中，然后您可以在
show.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]);
});

你会注意到我引用了一个
数据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">

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

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

var-iframes=；
所以您希望模式在开始加载iframe内部的视频之前打开，也就是在模式内部，对吗？差不多。我想确保iframe只有在用户请求时才被加载。我还应该补充一点，当用户关闭模式时，理想情况下，当iframe被删除或src被更改时，视频将停止播放。通过这种方式，不会有多个视频在后台播放或加载，从而降低性能。不，它不会在模式中播放，它会继续播放。这很好，但我遇到的问题仍然存在，当模式关闭时，视频仍在播放。在这种情况下，用户将连续观看多个视频，但在关闭模态之前可能没有足够的悟性来停止视频。@dvoutt如何关闭模态？在我制作的JSFIDLE中，视频在模式关闭时停止（通过在模式窗口外单击）。是的，这几乎是没有关闭按钮的唯一方法。考虑到我将PHP放入模式中，并且您使用javascript数组存储URL，这一操作有点复杂。我已经设置了下面的代码，可以很好地关闭模式<代码>变量模态=$（'.modal'）
var vidsrc=modal.find（'iframe'）.attr（'src'）
$（modal）.on（'hide.bs.modal'，function（）{$（this.find（'iframe'）.attr（'src'，''；}）@dvoutt是的，应该可以。但是，请注意，这样做需要您在每次打开模式时重新加载src。否则，在第一次打开iframe之后的任何时候都不会有src。由于迭代的原因，它不太管用，但我确实找到了使它管用的代码<代码>变量iframes=新数组（）；iframes.push（“”）。有点联合交易。
$('.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');
    }
});

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