javascript - 加载 YouTube iframe 时 JQuery 效果卡顿

Question

我对 JS/JQuery/JQueryUI 很陌生，但已经在我正在开发的新网站上做了一些工作。

我已经设置了一个基本的导航栏，其中 .click 使不同的 div 使用 .show 滑入 View ，而其他三个使用 .hide 弹出。我为自己感到非常自豪，尽管这是非常基本的。

我的问题是其中一个 div 包含 YouTube iframe。为了让它在显示另一个 div 时停止播放，我只需使用 .attr 删除 src (我知道这很笨拙)。这意味着，由于每次都会将源代码重新附加到 iframe 中，因此返回到该 div 的速度比我希望的要慢，并且 jQuery 会出现卡顿。

我已将精简版本放入JSFiddle 。任何有关提高性能的建议将不胜感激!

PS:我作为占位符的视频很搞笑，你应该喜欢它! :)

HTML:

<div class="button" id="home">1</div>
<div class="button" id="about">2</div>
<div class="button" id="latest">3</div>
<div class="button" id="contact">4</div>

<div class="home"><iframe class="video" id="homeVid"
    src="https://www.youtube.com/embed/gspaoaecNAg?controls=0?showinfo=0?rel=0?enablejsapi=1"
    frameborder="0" allowfullscreen></iframe></div>
<div class="content about"></div>
<div class="content latest"></div>
<div class="content contact"></div>

CSS

.content {
    width: 600px;
    height: 480px;
    display: none;
    clear:both
}

.home, .video {
    width: 600px;
    height: 480px;
    display: flex;
    clear:both;
    background-color: #CCC
}

.about {background-color: #F00}
.latest {background-color: #0F0}
.contact {background-color: #00F}

.button {
    width: 25px;
    height: 25px;
    border: 1px solid black
}

JavaScript

$(document).ready(function() {
    var urlhome = $('#homeVid').attr('src');
    $('#home').click(function() {
            $('.home').show('slide', {direction: 'right', easing: 'swing'}, 400);
            $('.about, .contact, .latest').hide(0);
            $('#homeVid').attr('src', urlhome);
    });
    $('#about').click(function() {
            $('.about').show('slide', {direction: 'right', easing: 'swing'}, 400);
            $('.home, .contact, .latest').hide(0);
            $('#homeVid').attr('src', ' ');
    });
    $('#latest').click(function() {
            $('.latest').show('slide', {direction: 'right', easing: 'swing'}, 400);
            $('.home, .contact, .about').hide(0);
            $('#homeVid').attr('src', ' ');
    });
    $('#contact').click(function() {
            $('.contact').show('slide', {direction: 'right', easing: 'swing'}, 400);
            $('.home, .about, .latest').hide(0);
            $('#homeVid').attr('src', ' ');
    });
});

Answer 1

事实上，添加和删除 iframe 会降低性能。相反，我们必须停止播放并将其隐藏。

这需要使用YouTube Player API Reference for iframe Embeds以不同的方式将其插入到文档中。 。然后我们这样做:

HTML

<div class="content home">
    <div id="player"></div>
</div>
var player;

JavaScript

$(window).load(function(){

    player = new YT.Player('player', {
        height: '480',
        width: '600',
        videoId: 'gspaoaecNAg',
    });
});

每当我们隐藏 home 元素时，我们都可以简单地使用 player.stopVideo(); 。但如果事情这么简单就好了。

使用 jQuery 的 hide()有副作用，因为它隐藏元素的方式是将元素的 CSS 设置为 display:none ，从而有效地将它们从文档中删除。这会破坏 iframe 并在 show() 上重新创建它。 ，这会带来与之前相同的性能问题。

我们需要一些更微妙的东西，通过将元素放在一边来隐藏它们。为此，我们使用定位:

.hidden {
    position:fixed;
    left:200%;
}

这将它们放在文档的右侧、视口(viewport)之外，并且由于单位是相对的，因此无论我们将窗口拉伸(stretch)多少，它都永远不会可见。这需要对 HTML 进行一些更改，以及其他一些优化，我将在下面进一步详细介绍。

HTML:

<div class="button" id="home">1</div>
<div class="button" id="about">2</div>
<div class="button" id="latest">3</div>
<div class="button" id="contact">4</div>

<div class="content home">
    <div id="player"></div>
</div>
<div class="content about hidden"></div>
<div class="content latest hidden"></div>
<div class="content contact hidden"></div>

我们已将hidden类添加到所有一开始不可见的元素中。我们还添加了一个描述元素本身的类，并将其设置为其相应按钮的id。每个元素中都有 content 类。

JavaScript:

var player;

$(window).load(function(){

    player = new YT.Player('player', {
        height: '480',
        width: '600',
        videoId: 'gspaoaecNAg',
    });
});

$(document).ready(function() {

    var all = $('.content');

    $('.button').click(function() {

        all.addClass('hidden');

        player.stopVideo();

        $('.'+this.id).animate({
            'left': '0px', 
            easing: 'swing'
        }, 400, function(){
            $(this).removeClass('hidden')
                .removeAttr('style');
        });
    });
});

这已经过优化，以避免单独检查每个元素。第一部分已经解释过，其余部分如下:

1. var all = $('.content');
   这将选择所有 .content 元素，并在回调外部的变量 all 中保留它们的引用，因此我们只需在文档加载时执行此操作一次。

2. 我们在所有 button 元素上创建回调。下一步假设已收到点击事件。

3. 我们将所有 .content 元素设置为隐藏。实际上，这应该只影响当前未隐藏的。

4. 我们停止视频。这只会影响嵌入的 iframe，我们不会费心检查哪个 .content 元素处于事件状态，因为停止已经停止的视频没有什么特别的。

5. 使用触发 click 事件的按钮的 id，我们选择相应的 .content 元素。

6. 我们替换show()与 animate()并用它来修改 hidden 类中使用的 CSS 属性。这会将元素从隐藏位置滑动到正常位置。

7. 动画完成后会执行回调。我们使用它首先从现在可见的元素中删除 hidden 类，然后删除动画设置的 style 属性 left:0px;，因为将其留在那里会干扰以后。

我们就完成了。现在应该很顺利了。此处提供演示 JSFiddle .