Question

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

Answer 1

您尚未显示任何允许我们在您的代码中包含此内容的代码。

不要设置视频的src，将其存储在数据中

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

Answer 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

Answer 3

如果您想这样做，您可以在打开手风琴时触发的事件上设置指向视频的iframe的src属性。我还没有和手风琴一起工作，但很确定它有一个init事件。

Answer 4

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

在可见时加载iframe

4 个答案: