Bootstrap-要隐藏内容直到模态加载 [英] Bootstrap - Want hide content's until modal loads

问题描述

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

I'm using jquery modal to load multiple vimeo video's in a single page. I've been noticing that all the video's loading (34) in the DOM affects performance (creating a lag on load). So I want make sure that the video players are only loaded when the shown.bs.modal event has been triggered.

这里有些菜鸟，所以我不确定该怎么做.

Pretty much a noob here, so I'm not sure how to do this.

模式:

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

注意:请在收到的答复上阅读评论

推荐答案

我相信已经找到了解决方案. 这是一个有效的演示.如果您查看浏览器的网络"部分，您会注意到它们只有在相应的模式打开后才会加载.

I believe I have found a solution. Here is a working demo. If you check the networking section of your browser you will notice they do not load until the corresponding modal opens.

起初，您可以将iframe的src保留为空，因此不会加载任何内容.将您的URL存储在一个数组中，然后您就可以在提到的shown.bs.modal事件上使用事件处理程序.

You can initially leave the src of your iframes empty, so it won't load anything. Store your URLs inside of an array and then you can use an event handler on the shown.bs.modal event as you mentioned.

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，您可以很容易地将其添加到每个模态中.

You will notice I am referencing a data-id, which you can add to each of your modals very easily.

<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索引开始.

I started with 0, since arrays start with 0 index.

***注意-这样做的缺点是，每次打开相应的模式时，iframe都必须加载网址.

***Note - The downfall to this is that the iframe will have to load the URL EVERY TIME you open the corresponding modal.

实际上，使用另一个数据属性，可以避免每次加载URL的问题. 更新了演示.

Actually, using another data attribute, you can avoid the issue of URLs loading every time. 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事件中的属性.

Check the attribute in the shown.bs.modal event before replacing the URL if it is already loaded.

$('.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数组，如下所示:

EDIT 2 - With IDs in a php array, you can convert them to a JS array like this:

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

这篇关于Bootstrap-要隐藏内容直到模态加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！