1

我有一个小而烦人的问题。我正在为 JQuery 使用 Lazyload 插件（Mika Tuupola -这里），我遇到了一个问题，即在 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"
});

在大多数情况下，它运作良好，但闪烁有点偏离。希望这是足够的细节，我会看看我是否可以得到一个样本小提琴（你可能不得不忍受我......）

4

1 回答 1

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>

于 2016-08-25T13:34:08.143 回答