猫头鹰轮播2：背景图片加载不及时？

Question

我使用2.0.0b4创建了一个Owl Carousel，在div中使用图像作为背景样式，如下所示:

<div class="owl-carousel">
  <div class="item" style='background-image: url("http://example.com/image_1.jpg");'></div>
  <div class="item" style='background-image: url("http://example.com/image_2.jpg");'></div>
  <div class="item" style='background-image: url("http://example.com/image_3.jpg");'></div>
  ...more...
</div>
<script>
    $(document).ready(function(){
      var owl = $(".owl-carousel")
      owl.owlCarousel({
        // loop: true,
        nav: true,
        items: 4,
        responsive:{
            0:{
                items: 2,
                slideBy: 2
            },
            480:{
                items:3,
                slideBy: 3
            },
            768:{
                items:4,
                slideBy: 4
            }
        }
      })
    })
</script>

工作得很好，OC2的所有响应质量都很好。唯一的麻烦是:每次你滚动旋转木马时，图像都会进入空白状态，只有在一次绘制完它们的背景后才会出现。所以当它们加载时，你会看到这个丑陋的闪烁(我认为这与延迟加载是分开的)。

当你向前滚动时，当你向后滚动到你已经看到的div时，都会发生这种情况;就好像div只有在它们就位后才会渲染，所有的动画都已经发生了。

想法?

Answer 1

添加到你的css文件中:

.owl-item {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1.0, 1.0);
}