不要同时在 Owl Carousel 中加载所有 iFrame

Posted 2023-05-08

【中文标题】不要同时在 Owl Carousel 中加载所有 iFrame

【英文标题】：dont load all iFrames in Owl Carousel same time

【发布时间】：2021-08-07 13:46:16

【问题描述】：

我有一个在 Owl Carousel 滑块中有 3 个 iFrame 的网站。它需要很多性能，因为它加载了我需要展示的 3D-CGI 内容。一个 iFrame 会在几秒钟内加载，这没问题，但它会同时加载所有 3 个 iFrame，这会导致加载时间很长，一些旧智能手机无法处理。

如何让它停止加载所有 3 个 iFrame，并在查看时加载每个 iFrame？

JsFiddle

$('.carousel2').owlCarousel(
    loop:true,
    autoplay:false,
    dotsEach: false,
    responsiveClass:true,
    mouseDraggable: false,
    navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
    responsive:
        0:
            items:1,
            margin: 10,
            dots:true,
            nav:true,
            loop:true
        ,
        600:
            items:1,
            nav:true,
            dots:true,
            margin: 100,
            loop:true
        ,
        1000:
            items:1,
            margin: 100,
            dots:true,
            nav:true,
            loop:true
        
    
)

// On Scroll:
// Change Header from Transparent to white and back and from absolute to fixed
window.onscroll = function() 
    // Change iframe data-src to src to render it when its in view
    // && window.matchMedia("(min-width: 680px)").matches
    if ( window.pageYOffset > 150 ) 
      var iframe1=$('.myIframe1');
      var iframe2=$('.myIframe2');
      var iframe3=$('.myIframe3');
      if (iframe1.data('src'))
          iframe1.prop('src', iframe1.data('src')).data('src', false);
      
      if (iframe2.data('src'))
          iframe2.prop('src', iframe2.data('src')).data('src', false);
      
      if (iframe3.data('src'))
          iframe3.prop('src', iframe3.data('src')).data('src', false);
      
    

.space 
  height: 200px;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" integrity="sha512-UTNP5BXLIptsaj5WdKFrkFov94lDx+eBvbKyoe1YAfjeRPC+gT5kyZ10kOHCfNZqEui1sxmqvodNUx3KbuYI/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="space"></div>
<div class="interactive_desktop">
  <div class="carousel2 owl-carousel owl-theme">
      <div class="item products_3_img">
      <iframe class="myIframe1" style="width: 800px; height: 800px;" src="about:blank" data-src="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" ></iframe>
      </div>
      <div class="item products_3_img">
      <iframe class="myIframe2" style="width: 800px; height: 800px;" src="about:blank" data-src="https://de.wikipedia.org/wiki/Portal:Wikipedia_nach_Themen"></iframe>
      </div>
      <div class="item products_3_img">
      <iframe class="myIframe3" style="width: 800px; height: 800px;" src="about:blank" data-src="https://de.wikipedia.org/w/index.php?title=Portal:Wikipedia_nach_Themen&oldid=212000847"></iframe>
      </div>
  </div>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js" integrity="sha512-gY25nC63ddE0LcLPhxUJGFxa2GoIyA5FLym4UJqHDEMHjp8RET6Zn/SHo1sltt3WuVtqfyxECP38/daUc/WVEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

【问题讨论】：

你有没有被lazyLoad:true,强制猫头鹰轮播延迟加载幻灯片？

是的，我使用了lazyload，但它对我的问题没有影响。一旦我进入 iframe 的视口，它就会加载所有 3 个。

如果项目获得活动类然后将 iframe 附加到其中，您会添加 JQuery 脚本吗？

我找到了解决方案，它由 Owl Carousel 控制，我在那里找到了延迟加载的选项。感谢您的帮助

不客气。

【参考方案1】：

猫头鹰轮播有一个选项可以激活延迟加载。

$('.owl-carousel').owlCarousel( 项目：4， 延迟加载：真， 循环：真， 边距：10 );