我正在使用jquery模式在一个页面中加载多个vimeovideo。 我一直注意到DOM中所有video的加载（34）都会影响性能（在加载时产生延迟）。 因此，我希望确保仅在触发shown.bs.modal事件时才加载video播放器。
这里几乎是一个菜鸟，所以我不知道该怎么做。
莫代尔：
<div class="modal fade" id="" tabindex="-1" role="dialog" aria-hidden="true"> 注意：阅读接受回答的评论
我相信我找到了解决方案。 这是一个工作演示 。 如果您检查浏览器的网络部分，您会注意到在相应的模态打开之前它们不会加载。
您最初可以将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 ，您可以非常轻松地将其添加到每个模态中。
我从0开始，因为数组以0索引开头。
***注意 – 这样做的缺点是iframe必须在每次打开相应的模态时加载URL。
编辑：实际上，使用其他数据属性，您可以避免每次加载URL的问题。 更新的演示 。
检查shown.bs.modal事件中的属性，然后替换已加载的URL。
$('.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 =;
在关闭使用时清除模态
$('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal'); });
对于其他部分不太确定你想做什么。 您可以查看jScroll，以便在用户开始滚动模式时仅加载其余video。
编辑：您可以从外部html文件加载模态的内容，这样只有当有人点击模态链接时才会加载videoiframe。