ToB企服应用市场:ToB评测及商务社交产业平台

标题: 图片懒加载 [打印本页]

作者: 光之使者 时间: 2024-12-20 09:06
标题: 图片懒加载
什么是图片懒加载？

在网页中实现图片懒加载（Lazy Loading）可以有效地淘汰页面初始加载时间，提升用户体验。图片懒加载的核心思想是在用户即将滚动到图片位置时才加载图片资源，从而淘汰页面的初始加载量
怎样实现图片懒加载？

1.利用 HTML 原生loading属性

<img src="image.jpg" loading="lazy" alt="图片描述">

复制代码

2.利用 JavaScript 滚动变乱监听（不建议）

性能问题

scroll 变乱会在用户滚动时频仍触发，导致 JavaScript 函数不绝执行，尤其在页面内容较多时，对性能的影响明显。这种频仍触发的机制会引发“抖动”（jank），即页面在滚动时出现卡顿现象，影响用户体验。

复杂的代码逻辑

在 scroll 变乱中实现懒加载必要编写额外的代码来处理图片的加载判定逻辑，还必要兼顾视口大小变化等情况。这不仅增长了代码复杂性，还轻易引发 BUG

无法自动处理视口变化

如果用户调解浏览器窗口大小或在移动装备上旋转屏幕，scroll 变乱的触发条件大概必要额外处理。为了确保懒加载在这些情况下正确执行，必须监听 resize 变乱，并在代码中处理视口变化带来的各种问题，这进一步加大了代码复杂度。

滚动变乱监听必要防抖/节流

如果肯定要利用 scroll 变乱实现懒加载，通常必要用防抖（debounce）或节流（throttle）技术来限定变乱触发的频率。这固然能肯定程度上缓解性能问题，但会进一步增长代码复杂度和维护本钱。
3.利用JavaScript和Intersection Observer

如果必要兼容不支持 loading="lazy" 属性的浏览器，可以利用 JavaScript 的 Intersection Observer API 来实现图片懒加载。

//html
<img data-src="image.jpg" alt="图片描述" class="lazy-load">
//css
.lazy-load {
opacity: 0;
transition: opacity 0.3s;
}
.lazy-load.loaded {
opacity: 1;
}
//js
document.addEventListener("DOMContentLoaded", function () {
const images = document.querySelectorAll("img.lazy-load");
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.getAttribute("data-src");
img.classList.add("loaded");
observer.unobserve(img);
}
});
});
images.forEach(img => observer.observe(img));
});

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)