javascript - Owl Carousel 2 : background image doesn't load in time?

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);
}