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

【问题标题】：Bootstrap - Want hide content's until modal loadsBootstrap - 想要隐藏内容直到模式加载
【发布时间】：2014-07-22 16:21:51
【问题描述】：

我正在使用 jquery 模式在单个页面中加载多个 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>

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

【问题讨论】：

所以您希望模态框在开始加载 iframe 内的视频之前打开，也就是模态框内，对吗？
差不多。我想确保 iframe 仅在用户请求时才被加载。我还应该补充一点，当用户理想地关闭模式时，视频将停止播放，因为 iframe 被删除或 src 更改。这样就不会在后台播放或加载多个视频而降低性能。

标签： javascript php jquery twitter-bootstrap

【解决方案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);?>;

【讨论】：

这很好，但我仍然遇到问题，当模式关闭时视频仍在播放。在这种情况下，用户将连续观看多个视频，但可能不够精明，无法在关闭模式之前停止视频。
@dvoutt 你是如何关闭模式的？在我制作的 JSFiddle 中，当模态关闭时视频停止（通过单击模态窗口外部）。
是的，几乎没有关闭按钮的唯一方法。考虑到我将 PHP 放入模态并且您使用 javascript 数组来存储 url，这有点复杂。我已经设置了以下代码，它非常适合关闭模式。 var modal = $('.modal');var vidsrc = modal.find('iframe').attr('src');$(modal).on('hide.bs.modal', function() { $(this).find('iframe').attr('src', ''); });
@dvoutt 是的，应该可以。但是，请注意，这样做需要您在每次打开模式时重新加载 src。否则，在第一次打开后，您的 iframe 将不会有 src。
由于迭代的原因不太好用，但我确实找到了使其工作的代码。 var iframes = new Array(); <?php foreach($videos as $video){ ?> iframes.push('<?php echo "//player.vimeo.com/video/" . $video['id']; ?>'); <?php } ?>。有点组合交易。

【解决方案2】：

关闭模态时清除模态

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

另一方面，您不太确定您要做什么。您可以查看 jScroll，以便它仅在用户开始滚动模式时加载其余视频。

编辑：您可以从外部 html 文件加载模式的内容，这样只有当有人点击模式链接时才会加载视频 iframe。

【讨论】：

不，它不会不在模式中，它会继续播放