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

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

我已经运行几个猫头鹰旋转木马上。你会注意到，当你第一次加载页面时，轮播中的全部内容都会以全角闪烁，直到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] 
    ], 

    //navigation:true, 
// navigationText: [ 
//  "<i class=' btn '>< Previous </i>", 
//  "<i class='btn '>Next ></i>" 
//  ], 
    }); 
<?php $i++; }while($cara = mysql_fetch_assoc($catCara)); ?> 

});

来源

2015-12-02 Daniel Robinson

您可以添加一些加载器到页面，并在jQuery完成后删除它。 –

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

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

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

}).owlCarousel(options);

请注意，您必须在初始化传送带之前绑定处理程序。

来源

2015-12-02 23:28:38 Taytorious

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

来源

2016-04-25 14:11:59

欢迎来到Stackoverflow。感谢您回答这个问题。为了改进这个答案，解释了为什么这将解决OP的问题，以及在他们的示例代码中他们应该把它放在哪里。有关编写好答案的更多信息，请参阅https://stackoverflow.com/help/how-to-answer –

如果使用OwlCarousel2，插件高度的CSS类.owl-loaded到.owl-carousel它呈现完毕旋转木马项目之后。只需在容器上设置display: none，并在附加的类上重置display: block。

即在你的CSS文件：

.owl-carousel { 
    display: none; 
} 

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

来源

2017-09-05 22:30:13 jbiddick

上装载只是隐藏图像和将在车展加载完成后！

 
.owl-carousel.loading{ 

display:none; 

}

来源

2017-10-06 11:27:26

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

回答

相关问题