Question

我使用2.0.0b4创建了一个猫头鹰旋转木马，图像作为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);
}

猫头鹰旋转木马2：背景图像没有及时加载？

1 个答案: