jquery - jQuery Lazy 水平 data-src 加载淡入淡出或动画加载图像

Question

jQuery Lazy 水平数据-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">

Answer 1

感谢您在这里提出问题。请让我解释一下为什么您的效果没有按预期工作。

1. 您已将滚动方向设置为horizontal。但实际上你的例子有效vertical。所以插件会检查错误的尺寸。将值设置为vertial或仅删除配置参数，以检查所有尺寸。

2. 您设置了effecttofadeIn但忘记设置effectTime. 所以默认时间为零，基本看不出什么效果。所以给它一个适当的时间。

3. 默认情况下，Lazy 将监听window对象上的滚动事件。但是您使用的是由 class 定义的滚动容器.wrapper-scroll。您需要使用参数将此告诉脚本appendScroll。

4. 对于效果，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>