DEV Community

Cover image for Image Lazy Loading

Image Lazy Loading

sundarbadagala on July 04, 2024

INTRO 🔊 Hello World! 🌎 From now onwards, I want to start a new series named React optimization. We will discuss different react optimiza...
Collapse
 
acidop profile image
Zeeshan

Do you have any live demo that we can see?

Collapse
 
sundarbadagala081 profile image
sundarbadagala

Hi, Zeeshan I'm trying to upload a video. But dev.to has no option to upload video files except images. 😟

Collapse
 
metz2000 profile image
James

A recording is not live, live is something real time like watching a football game when it happens. A live demo is something that happens when one executes it (in real time) and can be inspected, modified (where is applicable i.e. source code is available).

For lazy loading the live demo should demonstrate on network tab that images below the fold are not loaded until scrolled into view.

Like this:
enviragallery.com/demo/lazy-loadin...

May I suggest to get more experience before publishing articles that are supposed to teach others. Also, add some value on top of documentation and other articles otherwise your article is just a copy (and you didn't even mentioned your sources which is not nice).

Collapse
 
alphacentaurrii profile image
༺Rakesh Singh༻

How about gif

Collapse
 
oscarrodar profile image
Oscar Rodriguez

Add a GIF instead! Licecap is a simple lightweight GIF creator.

Collapse
 
lazylad profile image
Tathagat

You can upload gif

Collapse
 
gihanrangana profile image
GihanRangana

use stackblitz.com/ and embed it in here

Collapse
 
evart_valls_303ec85853989 profile image
Evart Valls

Hi Sun... Thanks for the explanation. I am a trainee and I don't know if this question is intelligent.
Could you post the video on youtube and send us the link?

Collapse
 
tainv1101 profile image
tainv1101

I see the demo link in this npm

Collapse
 
lixingjuan profile image
lixingjuan

Image description

强迫症极度舒适🙂‍↔️

Collapse
 
sundarbadagala081 profile image
sundarbadagala • Edited

@lixingjuan I usually add emojis🙂 in my posts📝. These will make posts so colourful🌈 and fresh ❄️

Collapse
 
shaogat_alam_1e055e90254d profile image
Shaogat Alam

Interesting topic! Everything is explained articulately and clearly. For your project, consider checking out this free npm package: select-paginated.

Collapse
 
hesxenon profile image
hesxenon

how exactly does it differ from the native image lazy loading?

Collapse
 
tanveermughal profile image
Tanveer Mughal

Great, it would help more if you could also explain how this package works under the hood.

Collapse
 
cjcheshire profile image
Chris Cheshire

Those looking for a demo the library links to one in their readme:

albertjuhe.com/react-lazy-load-ima...

Collapse
 
tanmay_dobariya_31d67bd86 profile image
Tanmay Dobariya

Helpful👍