js 懒加载|极客笔记

js 懒加载

懒加载是一种提高网页性能的技术，通过延迟加载页面中的资源，可以减少页面加载时间，提高用户体验。在网页中使用js进行懒加载是一种常见的方式，下面将详细介绍如何使用js进行懒加载。

什么是懒加载

懒加载（Lazy Load）是一种延迟加载技术，它可以将页面中的一部分资源（如图片、视频、音频等）推迟到用户需要访问时再加载。懒加载的好处在于可以减少页面加载时间，减轻服务器压力，提高用户体验。

为什么要使用懒加载

在传统的页面加载方式中，当用户访问一个页面时，所有资源都会在页面刚加载时一次性加载完成，如果页面中包含大量的图片或者其他资源，这样会导致页面加载时间过长，影响用户体验，尤其是在移动设备上。通过使用懒加载技术，可以将页面中的一部分资源推迟加载，只有当用户滚动到需要加载的位置时才加载该资源，这样可以减少不必要的资源加载，提高页面加载速度。

如何实现懒加载

在实现懒加载时，通常使用js来监听页面的滚动事件，当用户滚动到需要加载的位置时，再动态加载资源。下面是一个简单的懒加载示例代码：

// 首先获取需要懒加载的元素列表
const lazyElements = document.querySelectorAll('.lazy');

// 监听页面滚动事件
window.addEventListener('scroll', () => {
    lazyElements.forEach(element => {
        // 判断元素是否在视窗内
        if (isElementInViewport(element)) {
            // 加载元素的资源
            element.src = element.dataset.src;
            // 加载完成后移除懒加载类
            element.classList.remove('lazy');
        }
    });
});

// 判断元素是否在视窗内的函数
function isElementInViewport(element) {
    const rect = element.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

在上面的示例代码中，首先我们通过document.querySelectorAll('.lazy')来获取需要懒加载的元素列表，这些元素都有一个lazy类。然后我们监听页面的滚动事件，当用户滚动时，遍历每个懒加载元素，判断元素是否在视窗内，如果在视窗内，则将元素的src设置为data-src的值，即加载该元素的资源。加载完成后，移除lazy类，以便下次不再遍历。