1

小さいながらも厄介な問題があります。私は JQuery 用の Lazyload プラグイン (Mika Tuupola - here ) を使用していますが、div background-image 属性で fadeIn 効果を使用すると、画像が最終的に読み込まれるときに内部コンテンツがちらつくという問題があります。基本的に、画像が読み込まれるとコンテンツが再読み込みされます。どうすればこれを回避できますか?

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

私の JS での Lazyload の使用法は、上記の構造を数回繰り返している (同じイメージをロードしている) ため、コンテナー要素に反しています。

$("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 に答える