Question

我正在使用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>

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

Answer 1

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

您最初可以将iframe的src留空，因此不会加载任何内容。将您的网址存储在数组中，然后您可以在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，请检查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);?>;

Answer 2

在关闭使用时清除模态

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

对于其他部分，不太确定你想做什么。您可以查看jScroll，以便在用户开始滚动模式时仅加载其余视频。

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

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

2 个答案: