In js, I can easily use js window onload to make the web page display only after everything is loaded. This is very useful to me. For example, the web page will not be displayed until pictures, fonts, etc. are loaded. Make my css animation run perfectly
The problem is that Nextjs displays the web page before my image, usually the hero banner, is fully loaded. Things like the hero title with css animation start when the background is blank.
How to wait for the web page to be completed? I tried adding loading.tsx at /app folder, but it was unsuccessful. The web page started before the image was fully loaded.
3
This solutions might help you!
You can use useState and useEffect Hook to load the content, images, and font when the webpage completely loads like this
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
const handleLoad = () => setIsLoading(false)
window.addEventListener('load', handleLoad)
return () => window.removeEventListener('load', handleLoad)
}, [])
You can use priority attribute to the Image component like this so its load before the page loads
<Image
src="/path-to-your-image.jpg"
alt="Hero Banner"
layout="fill"
objectFit="cover"
priority
/>