twitter-bootstrap 猫头鹰轮播在页面加载时闪烁
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34041928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
owl carousel flashing on page load
提问by Daniel Robinson
I have several owl carousels running. When it first loads the carousel flashes at full width until the jquery kicks in and then resizes everything. Is there anyway to stop this? Here's my code:
我有几个猫头鹰旋转木马在运行。当它第一次加载时，轮播会以全宽闪烁，直到 jquery 启动，然后调整所有内容的大小。有没有办法阻止这个？这是我的代码：
Html
html
<?php $k='1'; do { ?>
<div id="owlslide<?php echo $k;?>">
<?php do { ?>
<div class="owlItem ">
<-- some other stuff -->
</div>
<?php } while();?>
</div>
<?php $i++; } while();?>
Jquery (owl)
Jquery（猫头鹰）
$(document).ready(function(){
<?php $i='1'; do { ?>
$("#owlslide<?php echo $i;?>").owlCarousel({
autoPlay: false, //Set AutoPlay to 3 seconds
paginationNumbers: true,
itemsCustom : [
[0, 1],
[450, 1],
[600, 2],
[700, 2],
[1000, 3],
[1200, 4],
[1400, 4],
[1600, 5]
],
});
<?php $i++; }while($cara = mysql_fetch_assoc($catCara)); ?>
});
回答by Taytorious
You can hide the carousel items with display: none;in your CSS, then show them after the carousel has initialized by binding a handler to the initialized.owl.carouselevent. I find it's best to combine it with a placeholder that has a loader gif to further reduce page jump.
您可以display: none;在 CSS 中隐藏轮播项目，然后在轮播初始化后通过将处理程序绑定到initialize.owl.carousel事件来显示它们。我发现最好将它与具有加载程序 gif 的占位符结合使用，以进一步减少页面跳转。
var carousel = $('#owlslide');
carousel.on({
'initialized.owl.carousel': function () {
carousel.find('.item').show();
carousel.find('.loading-placeholder').hide();
}
}).owlCarousel(options);
Note that you have to bind the handler before you initialize the carousel.
请注意，您必须在初始化轮播之前绑定处理程序。
回答by Kamlesh
still not a best solution, but if you set the opacity to 0, it will work at some level and all the items will not be there on page load.
仍然不是最佳解决方案，但如果您将不透明度设置为 0，它将在一定程度上起作用，并且页面加载时所有项目都不会出现。
.owl-carousel:not(.owl-loaded){
opacity: 0;
}
回答by jbiddick
If you are using OwlCarousel2, the plugin attaches the CSS class .owl-loadedto the .owl-carouselafter it has finished rendering the carousel items. Simply set display: noneon the container and reset display: blockon the appended class.
如果您使用的是 OwlCarousel2，插件会在完成轮播项目渲染后将CSS 类附加.owl-loaded到.owl-carousel。只需display: none在容器上设置display: block并在附加的类上重置。
i.e. In your CSS file:
即在您的 CSS 文件中：
.owl-carousel {
display: none;
}
.owl-carousel.owl-loaded {
display: block;
}
回答by Pan Bouradas
Just hide images on loading and will auto show when loading complete!
只需在加载时隐藏图像，加载完成后将自动显示！
.owl-carousel.loading{
display:none;
}
回答by oliver taylor
$('.item').trigger('initialized.owl.carousel').show();
回答by Shurvir Mori
.owl-carousel:not(.owl-loaded){
opacity: 0;
visibility:hidden;
height:0;
}
Try this.
试试这个。
