图片懒加载

最新推荐文章于 2024-10-09 11:19:11 发布

jundorir

最新推荐文章于 2024-10-09 11:19:11 发布

阅读量626

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_49684995/article/details/123578408

版权

本文介绍了如何使用React实现一个动态加载图片的组件，当图片位于视窗可见范围内时自动加载，并配合滚动事件实时调整图片加载策略。通过querySelector和useEffect hook实现图片的懒加载和滚动监听。

摘要由CSDN通过智能技术生成

import img1 from "../imgs/1.png";
import img2 from "../imgs/2.png";
import img3 from "../imgs/3.png";
import img4 from "../imgs/4.png";
import img5 from "../imgs/5.png";
import img6 from "../imgs/6.png";
import img7 from "../imgs/7.png";
import img8 from "../imgs/8.png";
import img9 from "../imgs/9.png";
import img10 from "../imgs/10.png";
import "./index.css";
import { useEffect } from "react";
function Home() {
  function isShow(el) {
    const bound = el.getBoundingClientRect();
    const clientHeight = window.innerHeight;
    return bound.top <= clientHeight + 100;
  }

  function loadImg(el) {
    if (!el.src) {
      const source = el.dataset.src;
      el.src = source;
    }
  }
  useEffect(() => {
    const imgs = document.querySelectorAll(".img");
    Array.from(imgs).forEach((el) => {
      if (isShow(el)) {
        loadImg(el);
      }
    });
    // 监听滚动条
    document.getElementById("content").onscroll = function (e) {
      const imgs = document.querySelectorAll(".img");
      Array.from(imgs).forEach((el) => {
        if (isShow(el)) {
          loadImg(el);
        }
      });
    };
  }, []);
  const imgArray = [
    img1,
    img2,
    img3,
    img4,
    img5,
    img6,
    img7,
    img8,
    img9,
    img10,
  ];
  function renderIMG() {
    return imgArray.map((item, index) => {
      return (
        <div className="div" key={index}>
          <img className="img" data-src={item} alt={index} />
        </div>
      );
    });
  }
  return <div>{renderIMG()}</div>;
}
export default Home;