jQuery Lazy horizontal data-src load fade or animate loading image

Question

jQuery Lazy horizontal data-src load fade or animate loading image dont work

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

example https://jsfiddle.net/ypcao1xx/

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

Answer 1

Thanks for asking your question here. Please let me explain why your effect is not working as expected.

1. You had set the scroll direction to horizontal. But actually your example works vertical. So the plugin will check the wrong dimensions. Set the value to vertial or just remove the config parameter, to let check all dimensions.

2. You set the effect to fadeIn but forgot to set a effectTime. So the default time would be zero, what is basically no seeable effect. So give it a propper time.

3. By default, Lazy will listen on scroll events on the window object. But you are using a scroll container, defined by class .wrapper-scroll. You need to tell this to the script, with the appendScroll parameter.

4. For effects the threshold should be set to zero, because otherwise the effect starts, before the user might see the element. It will work without too, but may be not visibile otherwise.

Keeping this things in ming, we now have a working example:

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