在可见时加载 iframe

Have iframe load when visible

本文关键字：加载 iframe      更新时间：2023-09-26

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

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

不要设置视频的 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);
}

好的，所以它将如下所示：

.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();

示例：手风琴加载框架

如果要

执行此操作，可以在打开折叠项时触发的事件上设置 iframe 的 src 属性（指向视频）。我已经有一段时间没有使用手风琴了， 但很确定它有一个 init 事件.

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

相关文章：