2015-10-14 185 views
0

我已經在網上搜索,但我找不到這樣的問題...
當我用我的貓頭鷹刷新網頁我的照片不會加載,我只得到是這樣的: enter image description here貓頭鷹旋轉木馬2 - 有時照片不會加載

它不會發生在每一個刷新,但讓我們說每4-5 ... 當我翻到另一個之一,它會顯示照片......

這裏是我的js:

$(document).ready(function() { 
var $owl = $('.owl-carousel'); 
$owl.owlCarousel({ 
    loop:true, 
    center: true, 
    dots:false, 
    margin: 15, 
    responsiveClass:true, 
    autoWidth: true, 
    autoHeight: true, 
    autoplay: true, 
    autoplayTimeout: 5000, 
    autoplayHoverPause: true, 
    responsive:{ 
     0:{ 
      items: 1, 
      nav: false 
     }, 
     600:{ 
      items: 1, 
      nav: false 
     }, 
     1000:{ 
      items: 1, 
      nav: false 
     } 
    } 
}); 
$owl.on('mousewheel', '.owl-stage', function (e) { 
    if (e.deltaY>0) { 
     $owl.trigger('next.owl'); 
    } else { 
     $owl.trigger('prev.owl'); 
    } 
    e.preventDefault(); 
}); 
}); 

我的html:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Light Coorporation - Photo</title> 
    <?php include '../include/header_template.php' ?> 
    <link href="../owlcarousel/assets/owl.carousel.css"  rel="stylesheet"> 
    <link href="../owlcarousel/assets/owl.theme.default.min.css"  rel="stylesheet"> 
    <link href="../owlcarousel/assets/owl.theme.dots.modified.css"  rel="stylesheet"> 
</head> 
<body> 
    <?php include '../include/fixed_menu.php' ?> 
    <br><br><br><br> 
    <div class="wrapper col-xs-12 wrapper-photo" style="display:  none;"> 
     <div class="container"> 
      <div class="owl-carousel"> 
       <div class="item custom-photo-width"><img  src="../images/photo/01-04.jpg"></div> 
       <div class="item custom-photo-width"><img  src="../images/photo/01-06.jpg"></div> 
       <div class="item custom-photo-width"><img  src="../images/photo/01-07.jpg"></div> 
       <div class="item custom-photo-width"><img  src="../images/photo/01-08.jpg"></div> 
       <div class="item custom-photo-width"><img  src="../images/photo/02-04.jpg"></div> 
       ...more photos... 
      </div> 
     </div> 
     <br><br> 
     </div> 
     <script src="../owlcarousel/owl.carousel.min.js"></script> 
     <script src="../js/owl_custom.min.js"></script> 
     <script src="../js/jquery.mousewheel.min.js"></script> 
    <script> 
     $('.wrapper').fadeIn(1500); 
    </script> 
</body> 
</html> 

結果: http://bez-granic.eu/lc/photo

+0

如果您始終具有相同的響應設置,則不需要設置「響應」選項。 –

回答

0

你必須加載圖像和DOM ready事件激活傳送帶之間的競爭條件。 只需將您的貓頭鷹呼叫移至window.load事件即可解決問題。當所有圖像完成加載時,加載事件啓動。