Question

我是JS / JQuery / JQueryUI的新手，但在我正在开发的新网站上做了一些工作。

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

我的问题是其中一个iframe包含YouTube div。为了让它在显示另一个src时停止播放，我只需删除.attr iframe（笨重，我知道）。这意味着由于每次都会将源重新附加到div，因此返回到<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>比我想要的慢，并且jQuery断断续续。

我已将精简版本放入JSFiddle。任何有关改善表现的建议都将不胜感激！

PS：我作为占位符的视频很有趣，你应该享受它！：）

HTML：

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

CSS

$(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', ' ');
    });
});

的JavaScript

{!! Form::text('name', null, 
    array('required', 
    'id'=>'name', 
    'class'=>'form-control',
    'required'=>'required',
    'placeholder'=>'Your name')) !!}

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',
    });
});

每当我们隐藏player.stopVideo();元素时，我们都可以使用home。但如果只是这么简单。

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

我们需要更微妙的东西，将元素放在一边隐藏元素。为此，我们使用定位：

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

这使得它们进一步位于视口外的文档右侧，并且因为单元是相对的，所以无论我们拉伸多少窗口，它都是永远不可能的。这需要对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');
        });
    });
});

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

var all = $('.content');
这将选择所有.content元素并将它们保留在变量all的回调之外，因此我们只需在文档加载时执行此操作。
我们在所有button元素上创建回调。下一步假设已收到点击事件。
我们将所有.content元素设置为隐藏。实际上，这应该只影响当前未隐藏的那个。
我们停止播放视频。这只会影响嵌入式iframe，我们也不会检查哪个.content元素处于活动状态，因为停止已停止的视频并没有什么特别之处。
使用触发id事件的按钮的click，我们会选择相应的.content元素。
我们将show()替换为animate()，并使用它来修改类hidden中使用的CSS属性。这会将元素从隐藏位置滑动到正常位置。
动画完成后会执行回调。我们使用它首先从我们现在可见的元素中删除hidden类，然后删除我们的动画设置style的{{1}}属性，因为这样会稍后干扰。< / p>

我们已经完成了。这应该是顺利的。此JSFiddle上提供了演示。

加载YouTube iframe时，JQuery效果会出现问题

1 个答案: