react + ts 实现图片预加载和图片懒加载

/* eslint-disable no-loop-func */
import "./index.less"
import { useEffect, useState } from "react"
import { getSearchCar } from "../../api"
// 获取数据
interface iCarLists {
    ID: number;
    tit_con: string; //标题
    car_price: string; //价钱
    img_src: string; //图片

}
export default function Pull() {
    let [flag,setFlag] = useState<boolean>(false)
    // 渲染数据2
    const [serachCar, setSearchCar] = useState<iCarLists[]>([])
    // 图片预加载3
    let count: number = 0;
    // 
    const loadImg = () => {
        count += 1;
        if (count === 6) {
            setFlag(true)
        } else {
            setFlag(false)
        }
    }
    // 加的优信二手车的图片
    const loadImage = (item: iCarLists) => {
        if (flag) {
            return `http://www.ibugthree.com/${item.img_src}`
        } else {
            return `http://www.ibugthree.com/default.gif`
        }
    }
    useEffect(() => {
        // 获取数据1
        ; (async () => {
            let carLists: iCarLists[] = await getSearchCar({ page: 1, mod: '宝马' })

            // 图片预加载
            for (let i = 0; i < carLists.length; i++) {
                let oImage = new Image();
                let item: iCarLists = carLists[i];
                oImage.onload = loadImg

                oImage.src = `http://www.ibugthree.com/${item.img_src}`
            }
            // 渲染数据
            setSearchCar(carLists)
        })()
    }, [])
    return (
        <div className="pull">
            <div className="pull-box">
                {/* 渲染数据 */}
                {
                    serachCar.map((item) => (
                        <div key={item.ID} className="pull-item">
                            <div className="pull-item-img">
                                <img className="pull-item-car" src={loadImage(item)} alt="default.gif" />
                            </div>
                            <div className="pull-item-text">
                                <div className="pull-item-title">
                                    {item.tit_con.substring(0, item.tit_con?.indexOf('20'))}
                                </div>
                                <div className="pull-item-year">
                                    {item.tit_con.slice(0, 26)}...
                                </div>
                                <div className="pull-item-kilometers">
                                    <div className="shang">2019年上牌</div>
                                    <div className="gong">2.7万公里</div>
                                </div>
                                <div className="pull-item-price">
                                    {item.car_price}万

                                </div>
                            </div>
                        </div>
                    ))
                }

            </div>
            <div className="loading">
                <img src={require('../../img/upload.gif')} alt="" /> 正在加载
            </div>
        </div>
    )
}