Question

我在网上搜索过，但我找不到这样的问题......
当我用我的猫头鹰刷新网页时，我的照片不会加载，我只得到这样的东西：

每次刷新都不会发生这种情况但是每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

Answer 1

在DOM ready事件上加载图像和激活轮播之间存在竞争条件。只需将您的owl调用移动到window.load事件，它就可以解决问题。所有图像加载完成后，加载事件将激活。

猫头鹰旋转木马2 - 有时照片不会加载

1 个答案: