如何解决Slick Slider延迟加载问题
我似乎无法随Slick.js Carousel的工作而懒惰加载。当我检查devtools窗口中的Network选项卡时，可以看到图像延迟加载，但是它们没有出现在轮播页面上。我正在使用data-lazy属性，并尝试将第一个幻灯片设置为“ src”而不是“ data-lazy”，但对我来说似乎没有任何作用。
Plot[{f[x],g[x]},{x,20}]解决方法
我可以通过将jquery.min.js换成jquery.slim.min.js来加载图像。在下面尝试一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<!-- Slick slider css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
</head>
<body>
<section class="slickshow carousel">
<!--slide-->
<div class="slide"><img data-lazy="https://via.placeholder.com/1440x500?text=Placeholder+Image">
<h2>SUMMERTIME SAVINGS</h2>
<p>100s of Items On Sale!</p>
<p><a href="#">Shop the Sale Now!</a></p>
</div>
<!--slide-->
<div class="slide"><img data-lazy="https://via.placeholder.com/1440x500?text=Another+One">
</div>
<!--slide-->
<div class="slide"><img data-lazy="https://via.placeholder.com/1440x500?text=Placeholder+Image">
<h2>MORE SAVINGS</h2>
<p>More Text Too!</p>
<p><a href="#">Shop Now</a></p>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
jQuery(".slickshow").slick({
lazyLoad: 'ondemand',slide: '.slide',autoplay: true,autoplaySpeed: 5000,dots: true,// string (html|jQuery selector) | object (DOM node|jQuery object)
prevArrow: '<button type="button" class="slick-next">❮</button>',nextArrow: '<button type="button" class="slick-next">❯</button>',speed: 1000,fade: true,cssEase: 'linear',slidesToShow: 1,adaptiveHeight: true,swipe: true,swipeToSlide: true,infinite: true
});
});
// On swipe event
jQuery('.slickshow').on('swipe',function(event,slick,direction) {
console.log(direction);
// left
});
// On edge hit
jQuery('.slickshow').on('edge',direction) {
console.log('edge was hit')
});
// On before slide change
jQuery('.slickshow').on('beforeChange',currentSlide,nextSlide) {
console.log(nextSlide);
});
</script>
</body>
</html>,
如果滑块进入视口，您可以使用 IntersectionObserver 方法延迟加载图像。
以下是如何实现它的示例：
source with some more explanation
let slickSliders = document.querySelectorAll('.slick-slider');
if ('IntersectionObserver' in window) {
// IntersectionObserver Supported
let config = {
root: null,rootMargin: '0px',threshold: 0.0
};
let observer = new IntersectionObserver(onChange,config);
slickSliders.forEach(slider => observer.observe(slider));
function onChange(elements,observer) {
elements.forEach(element => {
if (element.isIntersecting) {
console.log("element intersecting",element.target);
var options = {};
// Stop watching and load the slickSlider
loadSlick(element.target,options);
observer.unobserve(element.target);
}
});
}
} else {
// IntersectionObserver NOT Supported
slickSliders.forEach(slickSlider => loadSlick(slickSlider));
}
function loadSlick(slickSlider,options) {
$slickSlider = $(slickSlider);
$slickSlider.slick(options);
}h1,h2{
text-align: center;
color: white;
}
body{
background: url("https://informatikspickzettel.de/wp-content/uploads/informatikspickzettel.de-background-2400765-1920.jpg");
}
.spacer{
display: block;
width: 100%;
height: 100vh;
background: rgba(255,255,0.7);
display: flex;
color: white;
justify-content: center;
align-items: center;
font-size: 40px;
margin: 50px 0;
}
.slick-slider{
width: 300px;
height: 300px;
margin: 0 auto;
}
.item{
background: lightgray;
height: 300px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" />
<h1>Slick-Slider Initialization on Intersection</h1>
<h2>Scroll down</h2>
<a href="https://informatikspickzettel.de" class="spacer">
<img src="https://informatikspickzettel.de/wp-content/uploads/informatikspickzettel.de-informatikspickzettel-logo.png" alt="Informatikspickzettel.de">
</a>
<div class="slick-slider slider1">
<div class="item"><img data-lazy="https://via.placeholder.com/300.png/09f/fff" alt="placeholder" /></div>
<div class="item"><img data-lazy="https://via.placeholder.com/300/02f/fff" alt="placeholder" /></div>
<div class="item"><img data-lazy="https://via.placeholder.com/300/04f/fff" alt="placeholder" /></div>
</div>
<a href="https://informatikspickzettel.de" class="spacer">
<img src="https://informatikspickzettel.de/wp-content/uploads/informatikspickzettel.de-informatikspickzettel-logo.png" alt="Informatikspickzettel.de">
</a>
<div class="slick-slider slider2">
<div class="item"><img data-lazy="https://via.placeholder.com/300/c4f/fff" alt="placeholder" /></div>
<div class="item"><img data-lazy="https://via.placeholder.com/300/c2f/fff" alt="placeholder" /></div>
<div class="item"><img data-lazy="https://via.placeholder.com/300/c6f/fff" alt="placeholder" /></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
