React移动端axios实现图片懒加载

在移动端网页开发中，图片懒加载是一种常见的优化方式，能够加快页面加载速度，提升用户体验。本文将介绍如何使用React和axios实现图片懒加载的功能。

什么是图片懒加载

图片懒加载是指在页面滚动时，只加载可见区域的图片，而不是一次性加载所有图片。这样可以减少页面的加载时间和带宽消耗，提高页面性能。

React中使用axios获取图片数据

首先，我们需要使用axios库来获取图片数据。在React组件中，可以使用useEffect钩子和useState来处理异步请求。

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const ImageLazyLoad = () => {
  const [images, setImages] = useState([]);

  useEffect(() => {
    axios.get('
      .then(response => {
        setImages(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <div>
      {/* 显示图片 */}
    </div>
  );
};

export default ImageLazyLoad;
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.

在上面的代码中，我们通过axios库发送GET请求获取图片数据，并将数据存储在images状态中。

实现图片懒加载

接下来，我们需要在页面滚动时判断图片是否在可见区域内，如果是则加载图片。我们可以使用IntersectionObserver API来实现图片懒加载。

useEffect(() => {
  const options = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  }, options);

  document.querySelectorAll('img.lazy').forEach(img => {
    observer.observe(img);
  });

  return () => {
    observer.disconnect();
  };
}, [images]);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.

在上面的代码中，我们创建了一个IntersectionObserver实例，监测所有具有lazy类的图片元素。当图片进入可见区域时，设置图片的src属性为data-src，加载图片。加载完后取消观察。

完整代码示例

下面是完整的图片懒加载组件代码示例：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const ImageLazyLoad = () => {
  const [images, setImages] = useState([]);

  useEffect(() => {
    axios.get('
      .then(response => {
        setImages(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  useEffect(() => {
    const options = {
      root: null,
      rootMargin: '0px',
      threshold: 0.1
    };

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          observer.unobserve(img);
        }
      });
    }, options);

    document.querySelectorAll('img.lazy').forEach(img => {
      observer.observe(img);
    });

    return () => {
      observer.disconnect();
    };
  }, [images]);

  return (
    <div>
      {images.map(image => (
        <img key={image.id} className="lazy" data-src={image.url} alt={image.alt} />
      ))}
    </div>
  );
};

export default ImageLazyLoad;
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.

通过以上代码示例，我们可以实现一个简单的图片懒加载功能，提升移动端网页性能和用户体验。

总结

图片懒加载是一种常见的优化方式，在React移动端开发中也可以很方便地实现。通过结合axios库和IntersectionObserver API，我们可以实现一个简单且高效的图片懒加载功能，为用户提供更好的移动端浏览体验。