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

Question

我有一个小但烦人的问题。我正在为 JQuery (Mika Tuupola - here) 使用 Lazyload 插件，我遇到了一个问题，即在 div 背景图像属性上使用淡入效果会导致内部内容在图像最终加载时闪烁。它实质上是在加载图像时重新加载内容。我该如何避免这种情况？

我的html摘录：

<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>

我对 Lazyload 的 JS 使用是针对容器元素的，因为我将上面的结构重复了几次（加载相同的图像）：

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

在大多数情况下它运行良好，但闪烁有点令人不快。希望这足够详细，我会看看我是否可以得到一个样本 fiddle（你可能需要忍受我......）

Answer 1

我是 jQuery 的另一个 lazy load plugin 的创建者。你不能这样解决问题。问题是，当外部 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>

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

Lazyload plugin against a background-image div is causing the content contained within the div to flicker when loading the image

html

javascript

jquery

jquery-lazyload