图片懒加载，顾名思义，是指当图片在当前视窗内不可见时不加载该图片，当图片在当前视窗内可见时再加载该图片。它的主要目的是提高网页加载的性能和体验。这篇文章将介绍几种常用的 JavaScript 实现图片懒加载的方法
第一种方法：基于 IntersectionObserver Api
IntersectionObserver API 是一个异步接口，可以监视 DOM 元素与父元素或祖先元素的交叉情况。它可以通过设置一个阈值，来控制图片加载的时机。
如果你的应用支持使用 IntersectionObserver API，那么使用它可以非常简单。下面是代码实现：
// 创建一个 IntersectionObserver 对象 Const observer = new IntersectionObserver(entries => { // 遍历所有的图片元素 entries.forEach(entry => { // 当图片在当前视窗内可见时 if (entry.isIntersecting) { // 加载图片 const img = entry.target; img.src = img.dataset.src; // 取消对该图片的监视 observer.unobserve(img); } }); }); // 获取所有需要懒加载的图片元素 const imgs = document.querySelectorAll('img[data-src]'); // 为每个图片元素添加监视 imgs.forEach(img => { observer.observe(img); });
第二种方法：基于 getBoundingClientRect() 和 window.scrollYgetBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。window.scrollY 表示页面在垂直方向上滚动的距离。通过判断图片是否在当前视窗内，可以决定是否加载图片。
下面是代码实现：
const imgs = document.querySelectorAll('img[data-src]');
const options = {
rootMargin: '0px 0px 50px 0px'
};
function loadImage(img) {
const src = img.getAttribute('data-src');
if (!src) return;
img.src = src;
}
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
loadImage(img);
observer.unobserve(img);
}
});
}, options);
imgs.forEach(img => {
observer.observe(img);
});第三种方法：基于 throttle 函数
throttle 函数可以控制函数的调用频率，防止函数的频繁调用，提高代码的性能。我们可以将懒加载的代码包装在 throttle 函数中，并且在页面滚动事件发生时调用该函数。
下面是代码实现：
const imgs = document.querySelectorAll('img[data-src]');
function loadImage(img) {
const src = img.getAttribute('data-src');
if (!src) return;
img.src = src;
}
function handleScroll() {
imgs.forEach(img => {
const rect = img.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
loadImage(img);
}
});
}
window.addEventListener('scroll', throttle(handleScroll, 200));
function throttle(fn, wait) {
Let inThrottle;
return function() {
const context = this;
const args = arguments;
if (!inThrottle) {
fn.Apply(context, args);
inThrottle = true;
setTimeout(() => (inThrottle = false), wait); } }; }以上三种方法都可以实现图片懒加载的功能，可以根据需求来选择合适的方法。对于一些简单的需求，我们可以使用基于滚动事件的方法实现；对于需要更复杂的场景，我们可以使用 IntersectionObserver 或者基于 throttle 函数的方法。
最后需要注意的是，在实际项目开发中，可能需要考虑图片加载的兼容性，特别是对于低版本的浏览器。因此我们可以使用 polyfill 来兼容低版本的浏览器。
总的来说，图片懒加载是一个非常有用的技巧，可以提高页面加载速度，提高用户体验。我们应该根据项目的需求，选择合适的方法来实现图片懒加载。另外，还有一种实现图片懒加载的方法是使用第三方库，如 lazyload.js、lozad.js、yall.js 等。这些库已经封装好了实现图片懒加载的逻辑，我们可以很方便地在项目中使用。下面是使用 yall.js 实现图片懒加载的代码：
// 引入 yall.js
import yall from 'yall-js';
// 初始化 yall.js
yall({
observeChanges: true,
threshold: 0.5
});
// 在页面中的图片标签中添加 data-src 属性
<img data-src="path/to/image.jpg" alt="图片">使用第三方库实现图片懒加载是最简单的方法，但是也有一些缺点，如体积较大，速度较慢等。因此，在实际项目开发中，我们需要考虑到项目的需求，合理选择实现方法。
总的来说，图片懒加载是一种非常有效的技巧，可以提高页面加载速度，提高用户体验。我们可以通过基于滚动事件、IntersectionObserver、throttle 函数和第三方库等多种方法来实现图片懒加载。在实际项目开发中，我们需要根据项目的需求，合理选择实现方法。
怎么知道是否进入可视区域了？
通过判断图片是否进入可视区域，决定是否加载图片是图片懒加载的核心逻辑。
在使用基于滚动事件和 throttle 函数实现图片懒加载的方法中，可以通过对图片的位置和页面的滚动位置进行判断，确定图片是否进入可视区域。
在使用 IntersectionObserver 实现图片懒加载的方法中，IntersectionObserver API 提供了一种更高效和简单的方法来判断元素是否进入可视区域。 IntersectionObserver API 会自动监听目标元素和观察区域的交集，并在目标元素进入或离开可视区域时触发回调函数。
在使用第三方库实现图片懒加载的方法中，第三方库已经封装好了判断元素是否进入可视区域的逻辑，我们只需要在页面中正确配置图片标签即可。
综上所述，不同的实现方法有不同的判断元素是否进入可视区域的方法，但都可以很方便地实现图片懒加载的功能。