猫头鹰旋转木马在页面加载时闪烁

Question

我有几个猫头鹰旋转木马在运行。当它第一次加载时，旋转木马会以全宽闪烁，直到jquery开始播放，然后调整所有内容的大小。反正有没有阻止这个？这是我的代码：

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（猫头鹰）

 $(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)); ?>

});

Answer 1

您可以在CSS中使用display: none;隐藏轮播项目，然后通过将处理程序绑定到initialized.owl.carousel事件来初始化轮播后显示它们。我发现最好将它与一个带有加载程序gif的占位符结合起来，以进一步减少页面跳转。

var carousel = $('#owlslide');
carousel.on({

    'initialized.owl.carousel': function () {
         carousel.find('.item').show();
         carousel.find('.loading-placeholder').hide();
    }

}).owlCarousel(options);

请注意，在初始化轮播之前必须绑定处理程序。

Answer 2

仍然不是最佳解决方案，但如果将不透明度设置为0，它将在某个级别工作，并且所有项目都不会在页面加载时出现。

.owl-carousel:not(.owl-loaded){ 
    opacity: 0; 
}

Answer 3

$('.item').trigger('initialized.owl.carousel').show();

Answer 4

如果您使用的是OwlCarousel2，则插件在完成渲染轮播项目后，会将CSS类.owl-loaded附加到.owl-carousel。只需在容器上设置display: none并在附加的类上重置display: block。

即在你的CSS文件中：

.owl-carousel {
    display: none; 
}

.owl-carousel.owl-loaded {
    display: block;
}

Answer 5

只需在加载时隐藏图像，并在加载完成时自动显示！

.owl-carousel.loading{

 display:none;

}