1

我正在创建一个包含多个 YouTube iframe 的网站，这些 iframe 出现在 Zurb Foundations 显示模式中。该网站的最终版本将包含大约 30 个视频，这将产生沉重的负载并降低页面速度。为了解决这个问题，我打算使用lazyYT.js来延迟加载视频它在第一次加载时效果很好，但是在打开模式并完成播放然后关闭模式后，视频将重新启动并在后台播放。

我在延迟加载中尝试了多种变体，但均未成功。我认为问题在于显示未正确终止 iframe 或延迟加载被错误触发。

小提琴 http://jsfiddle.net/j43aepqh/6/

HTML：

<!-- Triggers the modals -->
<a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a>


<div id="videoModal" class="reveal-modal large" data-reveal="">
  <h2>This modal has video</h2>
  <div class="flex-video widescreen vimeo" style="display: block;">
    <div class="js-lazyYT" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"></div>
  </div>

  <a class="close-reveal-modal">&#215;</a>
</div>
<!-- Reveal Modals end -->


<script>$(document).foundation();</script>
<script>$('.js-lazyYT').lazyYT();</script>

这让我很生气，因为我无法理解正在发生的事情以及如何解决问题。

这是在网站上发布视频的正确有效方式吗？我对使用模态和 YouTubes iframe 嵌入在单个页面上发布多个视频的任何其他方法持开放态度，而不会导致严重的页面速度问题。

是否有任何好的脚本可以延迟 iframe 的加载或一个一个加载它们的方法？

任何帮助或建议将不胜感激。

ps第一次使用stackoverflow，希望我做对了

4

3 回答 3

0

我遇到了同样的问题。我能够使用不同的脚本来延迟加载工作，在这里可以找到：http ://www.labnol.org/internet/light-youtube-embeds/27941/

请让我知道这对你有没有用！

布伦特

于 2014-11-13T03:50:25.243 回答
0

我刚刚处理了一个可能类似的情况。我的主页上有大约 30 个视频的缩略图，当单击一个时，会打开一个模态窗口，其中包含 iframe 视频。

以前，我的页面加载时间很长，因为所有模式窗口都在页面加载时加载了 iframe。我也尝试过 js-lazyYT，但在模态关闭后播放视频时遇到了问题。我通过以下方式处理了这个问题：

HTML

<!-- Image link to modal -->
<div class="small-12 medium-4 medium-pull-8 columns">
    <a class="youtube-modal-reveal" data-reveal-id="{{ videoWorkshop.vID }}">
        <img src="http://img.youtube.com/vi/{{ videoWorkshop.vID }}/sddefault.jpg">
    </a>
</div>

<!-- Modal -->
<div id="{{ videoWorkshop.vID }}" class="reveal-modal large" data-reveal="">
    <div class="flex-video">
    </div>
    <a class="close-reveal-modal">&#215;</a>
</div>

JS

(function() {
    $(".youtube-modal-reveal").each(function( index, element ) {
        // Use the one function as we only need to load the video once, even if they visit the modal multiple times
        $(element).one( "click", function() { 
            var id = $(this).attr("data-reveal-id");
            var flexVideoContainer = $("#"+id).children(".flex-video");
            $(flexVideoContainer).html("<iframe src='//www.youtube.com/embed/" + id + "?rel=0' frameborder='0' allowfullscreen></iframe>");
        });
    });
})();
于 2015-04-27T16:15:46.430 回答
0

我假设您想要在模式打开时进行延迟加载。尝试以下（在一个$(document).ready(...)块内）：

$(".reveal-modal").on("opened", function () {
  $(this).find(".js-lazyYT").lazyYT();
});

您可能还想在关闭时销毁加载的对象。

$(".reveal-modal").on("closed", function () {
  // Implementation left to reader
});
于 2016-01-05T17:22:40.113 回答