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

在本页面

http://www.exclusivecard.co.uk/offers.php

我有几个猫头鹰旋转木马在运行.您会注意到,当您第一次加载页面时,旋转木马中的所有优惠都会以全宽闪烁,直到jquery启动,然后调整所有内容的大小.反正有没有阻止这个？我发布了一些我正在使用的代码

HTML

 
 

     
       

         <-- some other stuff -->
       
     
 
 

Jquery(猫头鹰)

 $(document).ready(function(){

 $("#owlslide").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]
  ],        
  });


});

小智.. 8

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

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

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

}).owlCarousel(options);

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

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

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

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

}).owlCarousel(options);

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