如何在加载时显示图像几秒钟?

Question

我试图显示一个打开屏幕的图像，将持续5秒一旦应用程序加载。我正在使用setTimeout，但它不起作用。有人知道吗?

import OpeningScreen from '../../../../../../assets/images/OPENING_SCREEN.png';
function ProgressComponent() {
const [isOpeningScreenVisible, setOpeningScreenVisible] = useState(true)
setTimeout(() => {
setOpeningScreenVisible(false);
}, 5000);
return (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
}}
>
{isOpeningScreenVisible && <img src={OpeningScreen} className="image" />}
</div>
);
}
export default ProgressComponent;```

Answer 1

尝试更改img src。

从

{isOpeningScreenVisible && <img src={OpeningScreen} className="image" />}

{isOpeningScreenVisible && <img src={OpeningScreen.src} className="image" />}

Answer 2

我已经测试了你的代码，它工作得很好。试试这些:

• 检查你的图像路径，确保它是正确的。
• 检查并查看控制台是否有任何错误，并修复所有错误。
• 可能加载时间超过5000ms。尝试10000ms显示图像。

Answer 3

你可以更新你的代码来使用本地事件，这样你就不必重新发明轮子了。

我会怎么做:

import OpeningScreen from '../../../../../../assets/images/OPENING_SCREEN.png';
function ProgressComponent() {
return (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
height: '100%',
}}
>
<img
src={OpeningScreen}
alt="opening screen"
onLoad={e => {
console.log("init event")
setTimeout(() => (e.target as HTMLImageElement).remove(), 5000)
}}
/>
</div>
);
}
export default ProgressComponent;

无论如何，这不是最好的方法。你能做的最好的事情是使用css过渡动画只是一个开始的屏幕

Answer 4

function App() {
const [loading, setLoading] = useState(false);
document.onreadystatechange = function () {
if (document.readyState !== "complete") {
setLoading(true);
} else if (document.readyState === "complete") {
setTimeout(() => {
setLoading(false);
}, 5000);
}
};
return (
<div style={{ background: "black" }}>
{loading && (
<div id="loadingScreen">
<img src={OpeningScreen} className="image" />
</div>
)}
{!loading && (
<div className="App" id="app"></div>
</div>

试试这个，它应该工作，因为它仍然在我的一个项目中工作

基本想法是<img src={openingScreen}/>将在屏幕上，直到react构建文件被加载到站点上。添加<div className="App" id="app"></div>内的所有内容，一旦加载，图像将褪色。