need help with lazy loading images for a slider
Answered
Argentine hake posted this in #help-forum
Argentine hakeOP
I want to create a horizontal slider for images. Images are pulled using API, but I want to load images only when slider is slide to right. From what I have found over searching on web, previously there was a prop 'LazyRoot' , lazyBoundary and now it is not available for Image tag
Answered by riský
can't you just use html image [
loading="lazy"](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#images_and_iframes) to delay it until in viewport?14 Replies
@Argentine hake I want to create a horizontal slider for images. Images are pulled using API, but I want to load images only when slider is slide to right. From what I have found over searching on web, previously there was a prop 'LazyRoot' , lazyBoundary and now it is not available for Image tag
can't you just use html image [
loading="lazy"](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#images_and_iframes) to delay it until in viewport?Answer
@riský can't you just use html image [`loading="lazy"`](<https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#images_and_iframes>) to delay it until in viewport?
Argentine hakeOP
Next Image tag is more optimized for performance nah?
you may be able to use the same tag on next/image
i haven't used next/image tho
@riský you may be able to use the same tag on next/image
Argentine hakeOP
oh it does have loading props, let me try it
[ah yes they do indeed](https://nextjs.org/docs/app/api-reference/components/image#loading) (i didn't check it as i knew about the html one and assumed it would exist too)
@riský [ah yes they do indeed](<https://nextjs.org/docs/app/api-reference/components/image#loading>) (i didn't check it as i knew about the html one and assumed it would exist too)
Argentine hakeOP
oh i see, I was told Next image is much better
it is mostly, i just haven't realy used images much for when it is actually useful (i mainly use cvg or 3rd party optimised images)
i will use it one day 🙂
so does it work 🙂?
@riský so does it work 🙂?
Argentine hakeOP
I am trying to setup a slider, wont take more than 5 mins, i will ping u when its done. Is it okay i ping you?
Argentine hakeOP
export default function App() {
const fetcher = (...args) => fetch(...args).then(res => res.json())
const { data, error, isLoading } = useSWR(
"https://rickandmortyapi.com/api/character",
fetcher
);
if (error) return "An error has occurred.";
if (isLoading) return "Loading...";
return (
<div className="flex overflow-x-auto w-full" >
{data.results.map((item) => (
<div key={item.id} className="flex-shrink-0 flex-basis-auto">
<Image src={item.image} width={200} height={200} alt={item.name} loading="lazy"/>
</div>
))}
</div>
);
}@riský it worked like expected, thanks bro
yay!!!