javascript - 猫头鹰轮播 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);
}