/* 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>
)
}
react + ts 实现图片预加载和图片懒加载
最新推荐文章于 2024-08-04 13:48:15 发布