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

感谢您在此提出问题。请让我解释为什么你的效果没有达到预期效果。

您已将滚动方向设为horizontal。但实际上你的例子有效vertical。所以插件会检查错误的尺寸。将值设置为vertial或只删除配置参数，以检查所有维度。
您将effect设置为fadeIn，但忘记设置effectTime。因此默认时间为零，基本上没有可见效果。所以给它一个适当的时间。
默认情况下，Lazy会侦听window对象上的滚动事件。但是您使用的是由类.wrapper-scroll定义的滚动容器。您需要使用appendScroll参数告诉脚本。
对于效果，threshold应设置为零，否则效果会在用户看到元素之前开始。它也可以不用，但可能不是可见的。

保持这一点，我们现在有一个工作的例子：

＆＃13;

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

＆＃13;

*, *::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;
}

＆＃13;

<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>

＆＃13;

jQuery Lazy水平数据-src加载淡化或动画加载图像

1 个答案: