jQuery Faule horizontalen Daten src Last verblassen oder Laden animieren Bild

Question

jQuery Faule horizontalen Daten src Last verblassen oder animieren loading image

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

Beispiel https://jsfiddle.net/ypcao1xx/

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

Answer 1

Danke der Nachfrage Ihre Frage nicht arbeiten Hier. Bitte lassen Sie mich erklären, warum Ihr Effekt nicht wie erwartet funktioniert.

1. Sie hatten die Bildlaufrichtung auf horizontal eingestellt. Aber tatsächlich funktioniert dein Beispiel vertical. Also wird das Plugin die falschen Dimensionen überprüfen. Setzen Sie den Wert auf vertial oder entfernen Sie einfach den Parameter config, um alle Dimensionen prüfen zu lassen.

2. Sie haben die effect auf fadeIn eingestellt, aber vergessen, effectTime zu setzen. Die Standardzeit wäre also null, was im Grunde keinen sichtbaren Effekt darstellt. Also gib ihm eine gute Zeit.

3. Standardmäßig hört Lazy Scroll-Ereignisse auf dem Objekt window ab. Sie verwenden jedoch einen Scroll-Container, der durch die Klasse .wrapper-scroll definiert ist. Sie müssen dies dem Skript mit dem Parameter mitteilen.

4. Für Effekte sollte die threshold auf Null gesetzt werden, da sonst der Effekt beginnt, bevor der Benutzer das Element sehen könnte. Es wird ohne auch funktionieren, aber möglicherweise nicht sichtbar anders.

halten diese Dinge in ming, wir haben jetzt ein funktionierendes Beispiel:

$('.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>