7

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

4

4 回答 4

14

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

不设置视频的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);
}
于 2013-10-20T20:47:51.213 回答
1

好的，它会如下所示：

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

于 2013-10-20T23:46:51.967 回答
0

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

于 2013-10-20T20:44:20.553 回答
0

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

于 2016-02-11T09:57:25.980 回答