老师，帮我看看我的延迟加载，用swiper8写的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>延迟加载</title>
<link rel="stylesheet" href="./swiper-bundle.min.css" />
<style type="text/css">
.swiper {
--swiper-theme-color: #ff6600; /* 设置Swiper风格 */
--swiper-preloader-color: #00ff33; /* 单独设置预加载圆圈的颜色 */
width: 375px;
height: 200px;
}
.swiper-slide img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<!-- 延迟加载图片的结构 -->
<div class="swiper-slide">
<img data-src="./images/1.jpeg" class="swiper-lazy" />
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide">
<img data-src="./images/2.jpg" class="swiper-lazy" />
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide">
<img data-src="./images/3.jpg" class="swiper-lazy" />
<div class="swiper-lazy-preloader"></div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<script src="./swiper-bundle.min.js"></script>
<script>
var mySwiper = new Swiper(".swiper", {
lazy: {
loadPrevNext: true,
},
pagination: {
el: ".swiper-pagination",
},
});
</script>
</body>
</html>
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星