jQuery 延迟水平数据源加载淡入淡出或动画加载图像
jQuery Lazy horizontal data-src load fade or animate loading image
jQuery 延迟水平数据源加载淡入淡出或动画加载图像不起作用
$('.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">
感谢您在这里提问。请让我解释一下为什么您的效果没有按预期工作。
您已将滚动方向设置为 horizontal
。但实际上你的例子有效vertical
。所以插件会检查错误的尺寸。将值设置为 vertial
或仅删除配置参数,以检查所有维度。
您将 effect
设置为 fadeIn
但忘记设置 effectTime
。所以默认时间会是零,基本上看不到什么效果。所以给它一个适当的时间。
默认情况下,Lazy 将监听 window
对象上的滚动事件。但是您正在使用由 class .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>
jQuery 延迟水平数据源加载淡入淡出或动画加载图像不起作用
$('.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">
感谢您在这里提问。请让我解释一下为什么您的效果没有按预期工作。
您已将滚动方向设置为
horizontal
。但实际上你的例子有效vertical
。所以插件会检查错误的尺寸。将值设置为vertial
或仅删除配置参数,以检查所有维度。您将
effect
设置为fadeIn
但忘记设置effectTime
。所以默认时间会是零,基本上看不到什么效果。所以给它一个适当的时间。默认情况下,Lazy 将监听
window
对象上的滚动事件。但是您正在使用由 class.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>