レイジーローディングIMG

Question

私は、次の方法で適用する必要が半透明オーバーレイ有するので、CSS backgroundタグ、ないbackground-imageタグに画像をlazyloadたい午前：

を

background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.60) 75%), url("myimage.jpg") scroll bottom no-repeat; 

現在、jquery.lazyライブラリ（https://github.com/eisbehr-/jquery.lazy/）を使用していますが、フェードトランジションをサポートしている限り、すべてのlazyloadingライブラリを使用できます。どのように私はこれを達成することができますか？

また、私はこれらのプラグインがどのように機能するのかわかりませんが、単に画像を追加するためにbackgroundタグにあるものを上書きするだけのように、ターゲットタグのものを上書きするだけです。半透明オーバーレイ。

ありがとうございます！

Answer 1

ここにOP！

はい、これには私のjQuery.Lazy pluginを使用できます。しかし、これはのデフォルトのバックグラウンドイメージではないため、コールバックを使用して正しく動作させる必要があります。私は完全な例を作りました。理解するのはかなり簡単です。

あなたがfade transitionsと書いてあります、このプラグインのeffectオプションを意味すると思います。そこで、fadeInというエフェクトを追加しました。必要がない場合は、オプションでeffectとeffectTimeを削除してください。

$(function() { 
 
    $("div").Lazy({ 
 
     effect: 'fadeIn', 
 
     effectTime: 1000, 
 
     beforeLoad: function(e) { 
 
      // before load, store the gradient onto the element data 
 
      e.data("gradient", e.css("background-image")); 
 
     }, 
 
     afterLoad: function(e) { 
 
      // afterwards create the wanted background image 
 
      e.css("background-image", e.data("gradient") + "," + e.css("background-image")); 
 
     } 
 
    }) 
 
});

div { 
 
    width: 600px; 
 
    height: 400px; 
 
    background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.60) 75%) scroll bottom no-repeat; 
 
}

<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 data-src="http://dummyimage.com/600x400/000/ff"></div>