在可见时加载iframe

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

Answer 1

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

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

使用任何触发手风琴的东西，$（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

 
 
Video 1
 
  
 
Video 2
 
  
 
Video 3
 
  
  

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属性，该属性指向video。 我还没有和手风琴一起工作，但很确定有一个init事件。

Answer 4

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