jQuery 图片异步加载是一种在前端网页中实现图片按需加载的技术。通过这种方式,可以在页面滚动或用户交互时动态加载图片,而不是一次性加载所有图片,从而提高页面加载速度和用户体验。
以下是一个简单的 jQuery 图片异步加载示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 图片异步加载示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
img {
width: 100%;
height: auto;
display: block;
}
.lazy {
background-image: url('placeholder.jpg');
background-size: cover;
}
</style>
</head>
<body>
<img class="lazy" data-src="image1.jpg" alt="Image 1">
<img class="lazy" data-src="image2.jpg" alt="Image 2">
<img class="lazy" data-src="image3.jpg" alt="Image 3">
<!-- 更多图片 -->
<script>
$(document).ready(function() {
function lazyLoadImages() {
$('.lazy').each(function() {
if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
var imgSrc = $(this).data('src');
$(this).attr('src', imgSrc).removeClass('lazy');
}
});
}
$(window).scroll(function() {
lazyLoadImages();
});
lazyLoadImages(); // 初始加载
});
</script>
</body>
</html>
IntersectionObserver
API 或 jQuery 插件(如 lazysizes
)来确保图片按顺序加载。通过以上方法,可以有效解决 jQuery 图片异步加载过程中遇到的常见问题,提升用户体验和页面性能。
领取专属 10元无门槛券
手把手带您无忧上云