jquery懒加载
jQuery 懒加载的实现方法
懒加载（Lazy Load）是一种优化网页性能的技术，通过延迟加载非可视区域的内容（如图片、视频等），减少初始页面加载时间。以下是使用 jQuery 实现懒加载的几种方法。
方法一：使用 data-src 属性延迟加载图片
将图片的真实路径存储在 data-src 属性中，当图片进入可视区域时，再将 data-src 的值赋给 src 属性。
<img class="lazy" data-src="path/to/image.jpg" alt="Lazy Loaded Image">$(document).ready(function() {
$(window).on('scroll resize', function() {
$('.lazy').each(function() {
if ($(this).isInViewport()) {
$(this).attr('src', $(this).data('src'));
$(this).removeClass('lazy');
}
});
}).trigger('scroll');
});
// 检查元素是否在可视区域
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop + $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop + $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};方法二：使用 jQuery Lazy 插件
jQuery Lazy 是一个轻量级的懒加载插件，支持图片和其他内容的延迟加载。
<img class="lazy" data-src="path/to/image.jpg" alt="Lazy Loaded Image">$(document).ready(function() {
$('.lazy').Lazy({
effect: 'fadeIn',
threshold: 0, // 触发加载的提前量
});
});方法三：使用 Intersection Observer API（现代浏览器）
虽然这不是纯 jQuery 的实现，但结合 jQuery 可以更高效地实现懒加载。
$(document).ready(function() {
const observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
const $img = $(entry.target);
$img.attr('src', $img.data('src'));
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.1
});
$('.lazy').each(function() {
observer.observe(this);
});
});方法四：使用 jquery-lazyload 插件
jquery-lazyload 是一个流行的懒加载插件，支持图片延迟加载。
<img class="lazy" data-original="path/to/image.jpg" alt="Lazy Loaded Image">$(document).ready(function() {
$('.lazy').lazyload({
effect: 'fadeIn',
threshold: 200 // 提前加载的像素值
});
});注意事项
- 占位符：为懒加载图片设置占位符（如低分辨率图片或背景色），避免布局抖动。
- SEO 友好：确保懒加载内容能被搜索引擎抓取，例如使用
<noscript>标签提供备用内容。 - 性能优化：结合防抖（debounce）或节流（throttle）技术，避免频繁触发滚动事件。
通过以上方法，可以轻松实现 jQuery 懒加载功能，提升页面加载速度和用户体验。
