不要同时加载 Owl 轮播中的所有 iFrame
dont load all iFrames in Owl Carousel same time
我有一个网站,在 Owl 轮播滑块中有 3 个 iFrame。它需要大量的性能,因为它加载了我需要显示的 3D-CGI 内容。加载单个 iFrame 只需几秒钟,这没问题,但它会同时加载所有 3 个 iFrame,这将导致加载时间非常长,一些较旧的智能手机无法处理。
如何让它停止加载所有 3 个 iFrame 并在查看时加载每个 iFrame?
$('.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>
owl轮播有一个选项可以激活延迟加载。
$('.owl-轮播').owl轮播({
items:4,
lazyLoad:true,
loop:true,
margin:10
});
我有一个网站,在 Owl 轮播滑块中有 3 个 iFrame。它需要大量的性能,因为它加载了我需要显示的 3D-CGI 内容。加载单个 iFrame 只需几秒钟,这没问题,但它会同时加载所有 3 个 iFrame,这将导致加载时间非常长,一些较旧的智能手机无法处理。
如何让它停止加载所有 3 个 iFrame 并在查看时加载每个 iFrame?
$('.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>
owl轮播有一个选项可以激活延迟加载。
$('.owl-轮播').owl轮播({ items:4, lazyLoad:true, loop:true, margin:10 });