jQueryのレイジー水平データ-SRCの負荷フェードや負荷イメージ

jQueryのレイジー水平データ-SRCの負荷フェードをアニメーション化したり、質問をするためのローディング画像がjQueryのレイジー水平データ-SRCの負荷フェードや負荷イメージ

$('.lazy').Lazy({ 
    // your configuration goes here 
    scrollDirection: 'horizontal', 
    effect: 'fadeIn', 
    visibleOnly: true, 
    onError: function(element) { 
    console.log('error loading ' + element.data('data-src')); 
    } 
});

例https://jsfiddle.net/ypcao1xx/

<div class="card-hor-image card-image lazy" data-src="https://www.gstatic.com/webp/gallery3/2.png">

出典

2016-12-18 ladysilvia

おかげいけない仕事アニメーションここに。あなたの効果が期待どおりに機能しない理由を説明してください。

スクロール方向をhorizontalに設定しました。しかし、実際にあなたの例はverticalで動作します。プラグインは間違ったディメンションをチェックします。値をvertialに設定するか、configパラメータを削除して、すべてのディメンションをチェックします。
effectをfadeInに設定しましたが、effectTimeを設定するのを忘れています。したがって、デフォルトの時間はゼロになりますが、基本的に見える効果はありません。だから、それには暫定的な時間を与えてください。
デフォルトでは、Lazyはwindowオブジェクトのスクロールイベントをリッスンします。しかし、クラス.wrapper-scrollで定義されているスクロールコンテナを使用しています。 appendScrollパラメータを使用して、これをスクリプトに伝える必要があります。

エフェクトの場合、thresholdはゼロに設定する必要があります。そうしないとエフェクトが開始されるため、ユーザーが要素を表示する可能性があります。それはあまりにも機能しませんが、それ以外の場合は目に見えないかもしれません。

$('.lazy').Lazy({ 
 
    appendScroll: $('.wrapper-scroll'), 
 
    effect: 'fadeIn', 
 
    effectTime: 3000, 
 
    threshold: 0 
 
});

*, *::before, *::after { 
 
    box-sizing: inherit; 
 
} 
 

 
.lazy { 
 
    height: 400px; 
 
} 
 

 
.wrapper-scroll { 
 
    overflow-x: scroll; 
 
    position: relative; 
 
    display: -webkit-box; 
 
} 
 

 
.content-scroll { 
 
    width: -webkit-max-content; 
 
    flex-grow: 0; 
 
    flex-shrink: 0; 
 
    flex-basis: auto; 
 
} 
 

 
.card-3d figure { 
 
    cursor: pointer; 
 
} 
 

 
.card-3d .front { 
 
    z-index: 1; 
 
} 
 

 
.list-carousel-item-sx { 
 
    display: inline-block; 
 
    position: relative; 
 
    overflow: hidden; 
 
    float: left; 
 
    height: 100%; 
 
} 
 

 
.list-carousel-item-sx .card-hor { 
 
    background-attachment: scroll; 
 
    background-repeat-x: no-repeat; 
 
    background-repeat-y: no-repeat; 
 
    background-position-x: 50%; 
 
    background-position-y: 50%; 
 
} 
 

 
.list-carousel-item-sx .card-hor-image { 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 50%; 
 
    background-color: rgba(125, 125, 125, 0.9); 
 
} 
 

 
.card-hor-image { 
 
    background-size: cover; 
 
    height: 300px; 
 
    width: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.4/jquery.lazy.min.js"></script> 
 

 
<div class="wrapper-scroll"> 
 
    <div class="content-scroll"> 
 
    <div class="list-carousel-item-sx"> 
 
     <div class="card-3D"> 
 
     <figure class="front "> 
 
      <div class="card-hor "> 
 
      <div class="card-hor-image card-image lazy" style="border-bottom-color: rgb(255, 255, 0);" data-src="https://www.gstatic.com/webp/gallery3/2.png"> 
 
      </div> 
 
      </div> 
 
     </figure> 
 
     </div> 
 
    </div> 
 
    <div class="list-carousel-item-sx"> 
 
     <div class="card-3D"> 
 
     <figure class="front "> 
 
      <div class="card-hor "> 
 
      <div class="card-hor-image card-image lazy" style="border-bottom-color: rgb(255, 255, 0);" data-src="https://www.gstatic.com/webp/gallery3/2.png"> 
 
      </div> 
 
      </div> 
 
     </figure> 
 
     </div> 
 
    </div> 
 
    <div class="list-carousel-item-sx"> 
 
     <div class="card-3D"> 
 
     <figure class="front "> 
 
      <div class="card-hor "> 
 
      <div class="card-hor-image card-image lazy" style="border-bottom-color: rgb(255, 255, 0);" data-src="https://www.gstatic.com/webp/gallery3/2.png"> 
 
      </div> 
 
      </div> 
 
     </figure> 
 
     </div> 
 
    </div> 
 
    <div class="list-carousel-item-sx"> 
 
     <div class="card-3D"> 
 
     <figure class="front "> 
 
      <div class="card-hor "> 
 
      <div class="card-hor-image card-image lazy" style="border-bottom-color: rgb(255, 255, 0);" data-src="https://www.gstatic.com/webp/gallery3/2.png"> 
 
      </div> 
 
      </div> 
 
     </figure> 
 
     </div> 
 
    </div> 
 
    <div class="list-carousel-item-sx"> 
 
     <div class="card-3D"> 
 
     <figure class="front "> 
 
      <div class="card-hor "> 
 
      <div class="card-hor-image card-image lazy" style="border-bottom-color: rgb(255, 255, 0);" data-src="https://www.gstatic.com/webp/gallery3/2.png"> 
 
      </div> 
 
      </div> 
 
     </figure> 
 
     </div> 
 
    </div> 
 
    <div class="list-carousel-item-sx"> 
 
     <div class="card-3D"> 
 
     <figure class="front "> 
 
      <div class="card-hor "> 
 
      <div class="card-hor-image card-image lazy" style="border-bottom-color: rgb(255, 255, 0);" data-src="https://www.gstatic.com/webp/gallery3/2.png"> 
 
      </div> 
 
      </div> 
 
     </figure> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

：

明にこの事を維持、我々は今、作業例を持っています

出典

2017-01-12 09:12:12 eisbehr

jQueryのレイジー水平データ-SRCの負荷フェードや負荷イメージ

答えて

関連する問題