Question

我正在为YouTuber开发一个网站，所以当然会在页面上加载视频。我通过AJAX使用外部PHP脚本调用API，返回视频的标题和ID。然后将它们放在HTML中。我目前的代码可能不是最有效的，但我开始只在页面上有一个视频，所以更容易添加到代码而不是重做它。这是我的代码（我觉得不需要包含PHP。它只返回带有每个视频信息的JSON）：

HTML：

<h3 id="video-title-1"></h3>

<!-- Video container -->
<div class="embed-responsive embed-responsive-16by9">
    <div id="video-div0">
        <iframe id="video-embed-1" class="embed-responsive-item" 
                width="710" height="399" src="" allowfullscreen></iframe>
     </div>
</div><!-- End video container -->

4 more of these, one for each video.

JS：

<script type="text/javascript">

    function getYTVideos() {

        var yTUrlPart = "http://www.youtube.com/embed/";

        $.ajax({
            type: 'POST',
            url: 'getYTVideos.php', 
            dataType: 'json', 
            success: function(data) {
                $("#video-title-1").html(data.video0.title);
                $("#video-embed-1").attr("src", yTUrlPart + data.video0.id);

                $("#video-title-2").html(data.video1.title);
                $("#video-embed-2").attr("src", yTUrlPart + data.video1.id);

                $("#video-title-3").html(data.video2.title);
                $("#video-embed-3").attr("src", yTUrlPart + data.video2.id);

                $("#video-title-4").html(data.video3.title);
                $("#video-embed-4").attr("src", yTUrlPart + data.video3.id);

                $("#video-title-5").html(data.video4.title);
                $("#video-embed-5").attr("src", yTUrlPart + data.video4.id);

                // Hides the loading icon/text
                $(".social-loading-youtube").hide();
                // Displays the videos, which start out as display: none.
                $("#carousel-videos").css("display", "block");
            }
        });
    };

现在，这一切都运转正常，但这就是问题所在。当标题和ID插入HTML时，加载图标会被隐藏，但显然实际的视频仍然需要加载。因此，在慢速互联网上，当加载图标消失时，标题会出现，但视频可能不会持续几秒钟，留下一个大的红色空间。

下面是我的意思，以使其更清晰：http://gfycat.com/DecentWigglyKillerwhale（Gifycat喜欢给他们非常奇怪的链接。另外，抱歉马铃薯质量）。

基本上，我的问题是...... 有没有办法在视频完全加载之前保持加载图标？

很抱歉这篇长篇文章。我感谢你给出的任何答案，谢谢，

奥利。

Answer 1

你可能会做类似

的事情

var loadedIframes = 0, onIframeLoad;
onIframeLoad = function() {
  loadedIframes++;
  if (jQuery("iframe").size() === loadedIframes) { //Once all iframes are loaded, you show/hide loader and iframes
    // Hides the loading icon/text
    $(".social-loading-youtube").hide();
    // Displays the videos, which start out as display: none.
    $("#carousel-videos").css("display", "block");
  }
}
jQuery('iframe').on("load", onIframeLoad);
function getYTVideos() {

    var yTUrlPart = "http://www.youtube.com/embed/";

    $.ajax({
        type: 'POST',
        url: 'getYTVideos.php', 
        dataType: 'json', 
        success: function(data) {
            $("#video-title-1").html(data.video0.title);
            $("#video-embed-1").attr("src", yTUrlPart + data.video0.id);

            $("#video-title-2").html(data.video1.title);
            $("#video-embed-2").attr("src", yTUrlPart + data.video1.id);

            $("#video-title-3").html(data.video2.title);
            $("#video-embed-3").attr("src", yTUrlPart + data.video2.id);

            $("#video-title-4").html(data.video3.title);
            $("#video-embed-4").attr("src", yTUrlPart + data.video3.id);

            $("#video-title-5").html(data.video4.title);
            $("#video-embed-5").attr("src", yTUrlPart + data.video4.id);
        }
    });
};
getYTVideos();

有没有办法在内容完全加载后加载YouTube iframe？

1 个答案: