高性能的懒加载与无限滚动实现

阿里云教程2个月前发布浅步调

14 0 0

高性能的懒加载与无限滚动实现

🤔 为什么需要懒加载和无限滚动？

在现代前端开发中，我们经常需要处理大量的图片或列表数据。如果一次性加载所有内容，会导致：

页面加载速度慢，用户等待时间长带宽浪费，加载了用户可能永远不会看到的内容内存占用过高，影响页面流畅度

懒加载（Lazy Loading）和无限滚动（Infinite Scroll）就是为了解决这些问题而生的。它们可以：

只加载用户当前可见区域的内容滚动时动态加载新内容显著提升页面加载性能和用户体验

💡 Intersection Observer API：现代浏览器的解决方案

传统的实现方式是监听 scroll 事件，然后通过 getBoundingClientRect() 计算元素位置。这种方式存在性能问题：

scroll 事件触发频率高，容易导致页面卡顿getBoundingClientRect() 会强制重排（reflow），影响性能

而 Intersection Observer API 是浏览器提供的原生 API，它可以：

异步监听元素与视口的交叉状态避免频繁的 DOM 操作和重排提供更好的性能和更简洁的代码

🚀 基础实现：图片懒加载

1. 基础 HTML 结构


<!-- 使用 data-src 存储真实图片地址 -->
<img 
  class="lazy-image" 
  data-src="https://example.com/real-image.jpg" 
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23f0f0f0'/%3E%3C/svg%3E" 
  alt="示例图片"
>

2. JavaScript 实现


// 创建 Intersection Observer 实例
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    // 当元素进入视口时
    if (entry.isIntersecting) {
      const img = entry.target;
      // 将 data-src 赋值给 src
      img.src = img.dataset.src;
      // 加载完成后停止观察
      observer.unobserve(img);
      // 添加加载完成的动画类
      img.classList.add('loaded');
    }
  });
});

// 获取所有需要懒加载的图片
const lazyImages = document.querySelectorAll('.lazy-image');

// 观察每个图片元素
lazyImages.forEach(img => {
  observer.observe(img);
});

3. 基本 CSS 样式


.lazy-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: opacity 0.3s ease;
  opacity: 0.7;
}

.lazy-image.loaded {
  opacity: 1;
}

🎯 进阶实现：无限滚动列表

1. HTML 结构


<div class="infinite-scroll-container">
  <ul class="list-container" id="listContainer">
    <!-- 初始加载的列表项 -->
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
    <!-- ... -->
  </ul>
  <!-- 加载指示器 -->
  <div class="loading-indicator" id="loadingIndicator">
    <div class="spinner"></div>
    <span>加载中...</span>
  </div>
</div>

2. JavaScript 实现


// 列表容器和加载指示器
const listContainer = document.getElementById('listContainer');
const loadingIndicator = document.getElementById('loadingIndicator');

// 模拟数据
let page = 1;
const pageSize = 10;
const totalItems = 100;

// 创建 Intersection Observer 实例，用于监听加载指示器
const observer = new IntersectionObserver((entries) => {
  const entry = entries[0];
  // 当加载指示器进入视口时，加载更多数据
  if (entry.isIntersecting && !isLoading) {
    loadMoreData();
  }
}, {
  // 配置选项：在加载指示器进入视口前 100px 就开始加载
  rootMargin: '0px 0px 100px 0px'
});

// 观察加载指示器
observer.observe(loadingIndicator);

// 加载状态
let isLoading = false;

// 加载更多数据的函数
async function loadMoreData() {
  if (isLoading) return;
  
  isLoading = true;
  loadingIndicator.style.display = 'flex';
  
  try {
    // 模拟 API 请求延迟
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // 计算当前需要加载的数据范围
    const startIndex = (page - 1) * pageSize + 1;
    const endIndex = Math.min(page * pageSize, totalItems);
    
    // 创建新的列表项
    const newItems = [];
    for (let i = startIndex; i <= endIndex; i++) {
      const li = document.createElement('li');
      li.textContent = `列表项 ${i}`;
      newItems.push(li);
    }
    
    // 将新列表项添加到容器中
    listContainer.append(...newItems);
    
    // 增加页码
    page++;
    
    // 如果已经加载完所有数据，停止观察
    if (endIndex >= totalItems) {
      observer.unobserve(loadingIndicator);
      loadingIndicator.textContent = '已加载全部内容';
      loadingIndicator.style.display = 'block';
    }
  } catch (error) {
    console.error('加载数据失败:', error);
    loadingIndicator.textContent = '加载失败，请重试';
  } finally {
    isLoading = false;
  }
}

3. CSS 样式


.infinite-scroll-container {
  max-height: 600px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.list-container {
  padding: 0;
  margin: 0;
  list-style: none;
}

.list-container li {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.list-container li:hover {
  background-color: #fafafa;
}

.loading-indicator {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  color: #666;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

🎨 React 中使用 Intersection Observer

1. 自定义 Hook：useIntersectionObserver


import { useEffect, useRef, useState } from 'react';

function useIntersectionObserver(options = {}) {
  const ref = useRef(null);
  const [isIntersecting, setIsIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setIsIntersecting(entry.isIntersecting);
    }, options);

    const currentRef = ref.current;
    if (currentRef) {
      observer.observe(currentRef);
    }

    return () => {
      if (currentRef) {
        observer.unobserve(currentRef);
      }
    };
  }, [options]);

  return [ref, isIntersecting];
}

export default useIntersectionObserver;

2. 懒加载图片组件


import React from 'react';
import useIntersectionObserver from './useIntersectionObserver';

const LazyImage = ({ src, alt, placeholder, ...props }) => {
  const [ref, isIntersecting] = useIntersectionObserver({
    rootMargin: '50px 0px'
  });

  return (
    <img
      ref={ref}
      src={isIntersecting ? src : placeholder}
      alt={alt}
      onLoad={() => {
        if (isIntersecting) {
          // 图片加载完成后的处理
        }
      }}
      {...props}
    />
  );
};

export default LazyImage;

3. 无限滚动列表组件


import React, { useEffect, useState } from 'react';
import useIntersectionObserver from './useIntersectionObserver';

const InfiniteScrollList = () => {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  
  // 使用自定义 Hook 监听加载更多按钮
  const [loadMoreRef, isVisible] = useIntersectionObserver({
    rootMargin: '0px 0px 100px 0px'
  });

  // 加载数据的函数
  const loadData = async (currentPage) => {
    if (loading || !hasMore) return;
    
    setLoading(true);
    
    try {
      // 模拟 API 请求
      const response = await fetch(`/api/items?page=${currentPage}&limit=10`);
      const newItems = await response.json();
      
      setItems(prevItems => [...prevItems, ...newItems]);
      setHasMore(newItems.length > 0);
      setPage(currentPage + 1);
    } catch (error) {
      console.error('加载数据失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 初始加载
  useEffect(() => {
    loadData(1);
  }, []);

  // 当加载更多按钮可见时，加载下一页
  useEffect(() => {
    if (isVisible) {
      loadData(page);
    }
  }, [isVisible, page]);

  return (
    <div className="infinite-scroll-list">
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
      
      {hasMore && (
        <div ref={loadMoreRef} className="loading-indicator">
          {loading ? '加载中...' : '滚动加载更多'}
        </div>
      )}
      
      {!hasMore && (
        <div className="no-more-data">
          没有更多数据了
        </div>
      )}
    </div>
  );
};

export default InfiniteScrollList;