针对背景图像div的Lazyload插件导致div中包含的内容在加载图像时闪烁

Question

我有一个小而恼人的问题。我正在使用JQuery的Lazyload插件(Mika Tuupola -在这里)，我有一个问题，即在div background-image属性上使用fadeIn效果会导致内部内容在图像最终加载时闪烁。当图像加载时，它会重新加载内容。我该如何避免这种情况?

My html extract:

<div class="wrap" id="wrap">    
    <div class="bg-image" data-original="images/image_1.jpg">
         <h1>Some title here</h1>
    </div>
    <div class="bg-image" data-original="images/image_1.jpg">
         <h1>Some other title here</h1>
    </div>
    <div class="bg-image" data-original="images/image_1.jpg">
         <h1>another title here</h1>
    </div>
</div>

我的JS使用Lazyload是针对容器元素，因为我有上面的结构重复了几次(加载相同的图像):

$("div.bg-image").lazyload({
    container: $("#wrap"),
     threshold: 200,
    effect: "fadeIn"
});

在大多数情况下，它工作得很好，但闪烁有点令人不快。希望这是足够的细节，我会看看我是否可以得到一个样本小提琴(你可能不得不忍受我…)

Answer 1

我是另一个jQuery延迟加载插件的创建者。你不能这样解决问题。问题是，当外部div褪色时，内容也将始终褪色。你无法阻止这种情况的发生。

一个可能的解决方案是将背景放在内容框后面的另一个div中。它会作为背景可见，但实际上不是。所以有一个额外的背景元素，它可以单独褪色。然后内容也不会褪色。

这里有一个简短的例子来说明我的意思:

$(".bg").lazy({
  threshold  : 0,
  effect     : "fadeIn",
  effectTime : 500
});

.wrap > div {
  width: 500px;
  height: 250px;
  position: relative;
}
.bg {
  width: 500px;
  height: 250px;
  position: absolute;
  z-index: -1;
}
h1 {
  text-align: center;
  line-height: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.3/jquery.lazy.min.js"></script>
<div class="wrap" id="wrap">
  <div>
    <div class="bg" data-src="http://dummyimage.com/500x250/ff00a2/ff00a2&text=1"></div>
    <h1>Some title here</h1>
  </div>
  <div>
    <div class="bg" data-src="http://dummyimage.com/500x250/0099ff/0099ff&text=2"></div>
    <h1>Some other title here</h1>
  </div>
  <div>
    <div class="bg" data-src="http://dummyimage.com/500x250/45d104/45d104&text=3"></div>
    <h1>another title here</h1>
  </div>
</div>