懒加载js实现
懒加载 JavaScript 的实现方法
懒加载（Lazy Loading）是一种优化技术，用于延迟加载非关键资源（如图片、脚本等），直到它们即将进入视口（viewport）时才加载。以下是几种实现 JavaScript 懒加载的方法：
使用 IntersectionObserver API
IntersectionObserver 是现代浏览器提供的 API，可以高效地监听元素是否进入视口。
document.addEventListener('DOMContentLoaded', function() {
const lazyScripts = document.querySelectorAll('script[data-src]');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const script = entry.target;
script.src = script.getAttribute('data-src');
observer.unobserve(script);
}
});
});
lazyScripts.forEach(script => {
observer.observe(script);
});
});使用 data-src 属性
通过将脚本的 src 替换为 data-src 属性，并在需要时动态加载。
<script data-src="path/to/your/script.js"></script>function lazyLoadScripts() {
const scripts = document.querySelectorAll('script[data-src]');
scripts.forEach(script => {
script.src = script.getAttribute('data-src');
});
}
// 触发条件：滚动事件或视口检查
window.addEventListener('scroll', lazyLoadScripts);动态创建 script 标签
通过动态创建 script 标签并插入到 DOM 中，实现按需加载。
function loadScript(url) {
const script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}
// 触发条件：用户操作或视口检查
loadScript('path/to/your/script.js');使用 async 或 defer 属性
虽然这不是严格的懒加载，但可以通过 async 或 defer 属性优化脚本加载行为。
<script async src="path/to/your/script.js"></script>
<script defer src="path/to/your/script.js"></script>使用第三方库
一些库（如 Lozad.js 或 lazysizes）可以简化懒加载的实现。
<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
const observer = lozad();
observer.observe();
</script>注意事项
- 性能优化：懒加载脚本可以减少初始页面加载时间，但需确保关键功能不受影响。
- 兼容性：
IntersectionObserver在旧浏览器中可能需要 polyfill。 - 触发条件：根据实际需求选择合适的触发条件（如滚动、视口检查或用户交互）。
