Question

我尝试使用iframe嵌入视频，但它会降低页面加载速度。

如果用户现在点击播放，我怎样才能加载iframe？

<li class="embed-list">
    <?php echo $title; ?> 
    <span class="play">Play Now</span>
    <div class="embed-video">
        <iframe src="http://www.thevideo.me/embed-<?php echo $link; ?>-640x360.html" frameborder="0" allowfullscreen></iframe>
    </div>
</li>

jQuery('.embed-list').click(function () {
    $this = jQuery(this);
    $this.siblings().find('.embed-video').css('display', 'none');
    $this.find('.embed-video').css('display', 'block');
    $this.siblings('.embed-list').find('span').replaceWith("<span class='play'>Play Now</span>");
    $this.find('span').replaceWith("<span class='play'>Playing</span>");
});

Answer 1

您可以通过几种方法解决此问题。除了原始JavaScript与JavaScript之外，您还可以选择：

你可以1）正常加载包含页面的框架，但隐藏<iframe>直到用户点击立即播放。在很多情况下，这会使用户立即看到加载的视频或页面。

或者您可以2）在用户点击“立即播放”时将<iframe>附加到DOM，从而有效地导致视频或网页加载到需要时间的iframe中。

因为您已使用jQuery对此进行了标记，所以您可以使用jQuery执行上述第一种方式：

隐藏容器并将其切换

$(function(){
  var $play_button = $('.play');
  var $iframe_container = $('.embed-video');

  $iframe_container.hide();
  $play_button.on('click',function(){
    $iframe_container.toggle();
    });
});

或者，要使用您提到的代码块，您可以这样做：

$(function() {
  var $video = $('.embed-video').hide();
  jQuery('.embed-list').click(function() {
    $this = jQuery(this);
    $video.show();
    $this.siblings('.embed-list').find('span').replaceWith("<span class='play'>Play Now</span>");
    $this.find('span').replaceWith("<span class='play'>Playing</span>");
  });
});

在此处查看此行动：http://codepen.io/anon/pen/OVEKwR

仅在单击后加载iframe

1 个答案: