可见时加载 iframe答案

【问题标题】：Have iframe load when visible可见时加载 iframe
【发布时间】：2013-10-20 20:38:55
【问题描述】：

我有一个包含大约 100 个视频的页面 (youtube) 加载 iframe。它们都在手风琴风格的菜单中，我想知道是否有办法让它们在手风琴打开或页面上可见 iframe 时加载。现在它占用了太多的内存并且滞后了页面很多。

【问题讨论】：

你能确定每个手风琴项目何时打开吗？或者你能提供打开每个项目的 JS 和一些显示手风琴中至少一个项目的 HTML 吗？

【解决方案1】：

您尚未显示任何允许我们将其包含在您的代码中的代码。

不设置视频的src，保存在data中

<iframe src="about:blank" data-src="http://youtu.be/etc"></iframe>

使用任何触发手风琴的东西，$(this) 就是那个手风琴项目

var $iframe=$(this).find('iframe');
if ($iframe.data('src')){ // only do it once per iframe
    $iframe.prop('src', $iframe.data('src')).data('src', false);
}

【讨论】：

【解决方案2】：

好的，如下：

HTML

<div id="accordion">
    <h3>Video 1</h3>
    <div class="content" data-link="//www.youtube.com/embed/nlcIKh6sBtc">
        <iframe width="200" height="200" src="" frameborder="0"></iframe>
    </div>

    <h3>Video 2</h3>
    <div class="content" data-link="//www.youtube.com/embed/My2FRPA3Gf8">
        <iframe width="200" height="200" src="" frameborder="0"></iframe>
    </div>

    <h3>Video 3</h3>
    <div class="content" data-link="//www.youtube.com/embed/CevxZvSJLk8">
        <iframe width="200" height="200" src="" frameborder="0"></iframe>
    </div>
</div>

javascript

var elements = document.getElementsByClassName("content"), bubbles = false;

var observer = new WebKitMutationObserver(function (mutations) {
  mutations.forEach(attrModified);
});

for(var i = 0; i < elements.length; i++){
    observer.observe(elements[i], { attributes: true, subtree: bubbles });
}

function attrModified(mutation) {
    var contentStyle = mutation.target.getAttribute("style");
    var IsVisible = contentStyle.indexOf("block") != -1;
    if(!IsVisible){
        var $currentIframe = $(mutation.target).children("iframe");
        $currentIframe.attr("src", "");
    }
    else{
        var link = $(mutation.target).data("link");
        var $currentIframe = $(mutation.target).children("iframe");
        $currentIframe.attr("src", link);
    }
}

$("#accordion").accordion();

示例： AccordionLoadFrame

【讨论】：

【解决方案3】：

如果您想这样做，您可以在打开手风琴时触发的事件上设置指向视频的 iframe 的 src 属性。我已经有一段时间没有使用手风琴了，但很确定它有一个 init 事件。

【讨论】：

嗯，只是写代码供别人使用并不总是上帝。受益因素是研究，并给他们看的地方。我的想法。当代码发布时，他们需要其中一部分的帮助，然后您发布代码修复或完成。当问题是问一个方向时，我给他们一个方向。总比没有理由浪费评论，而是争论一些事情要好。 :)
这里，检查 iframe 是否可点击，如果是，则表示已加载。然后，设置手风琴触发事件的内容。贴一些代码，可以写一些具体的东西给你看看如何结合这个方法。

【解决方案4】：

对于那些正在寻找这个问题的答案的人，另一种解决方案是向内容添加延迟加载效果。可以使用jQuery LazyLoad Any 库来实现相同的功能。图书馆也有例如。渲染YouTube Video。

【讨论】：