live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a React.js Project to Implement Lazy Loading of Images From Remote API and Display it in Brows
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/d5cad28ed9578a2841d175c91f97305a
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video I will show you a
0:05
component library of react CHS where you
0:08
can actually lazy load your
0:11
content so if you are displaying any
0:13
sort of images text that you want to
0:16
Lazy load specifically I will talk about
0:18
images so you can see I'm fetching the
0:20
images from a Json placeholder API and
0:23
you can see the images are just lazy
0:27
loading it we are not loading all the
0:28
images at one go but as we are scrolling
0:31
down the user Scrolls down we are
0:33
actually lazy loading the images so
0:37
essentially I will show you this package
0:39
which is specifically there for react
0:40
CHS application so this will actually
0:43
optimize your website and also reduce
0:45
the network load on the website as well
0:48
your website will not download all the
0:50
data at once but rather as the user
0:53
scroll down then only the images will
0:56
pop in so you can see the images are
0:59
lazy loading it so there is a specific
1:01
package out there in react CHS which is
1:03
called as react lazy load image
1:06
component so it's specifically there for
1:08
images only so if you want to Lazy load
1:11
your images this is actually the
1:12
component npmi react lazy load image
1:16
component so just install this and it's
1:19
a very popular module almost
1:23
187,000 weekly downloads so I have
1:26
already installed it so I will show you
1:29
if a very simple example so just make a
1:32
simple functional
1:36
component so let me just write this code
1:40
step by step so first of all what we
1:43
need to do you need to first of all make
1:45
a simple functional
1:48
component and uh then we need to import
1:51
this
1:52
module which is La load image and which
1:56
will be coming from this package which
1:57
is react lazy load image component and
2:00
it's 27 kiloby package and it also con
2:04
contains the CSS file as well we do need
2:07
to import the CSS file as well react
2:10
lazy load component and it contains the
2:12
source
2:14
effects and it contains the blur effect
2:18
so we will blur the images
2:21
that are not seen in the viewport so we
2:25
are having this blur CSS so after this
2:28
we will have these two St variables
2:30
which are required for this application
2:32
for data fetching we will have the post
2:35
variable so here it'll be storing all
2:38
the post which will be coming from the
2:40
API and we'll be using the use State
2:42
hook of react CHS initial value will be
2:45
empty array and then there will be this
2:47
variable Boolean parameter set loading
2:52
and initial value will be
2:56
true so here you basically make a very
2:59
simple fun function which will fetch the
3:01
data from the
3:04
API inside the use effect hook so
3:07
essentially what we are doing uh we are
3:09
actually fetching this data from Json
3:12
placeholder API which is the fake rest
3:14
API for developers and right here we are
3:16
converting this data into Json and we
3:19
using the simple fetch call inside the
3:21
browser and then we are setting the post
3:24
and basically hiding the loading screen
3:27
and here we are using the use effect to
3:29
hook which basically it's a hook in
3:31
react CH which executes whenever your
3:34
application executes for the very first
3:36
time and here we are actually calling
3:38
this function fetch post so it will
3:41
actually fetch the data so now we just
3:43
need to import the user
3:46
effect so it will be imported you will
3:48
see from react so if you go to your
3:50
application just you will see in the
3:53
console we will get the
3:55
data essentially in this we will get an
3:58
array of objects object s each object
4:01
will contain these three properties
4:03
which is body ID title and we also need
4:07
to Now display this data so for
4:10
displaying this data we will come to the
4:11
jsx part and right
4:14
here we first of all say if the loading
4:18
is true then we will show this message
4:20
to the user that loading post dot dot
4:23
dot if the value is true so now if the
4:26
loading is parameter is not true then
4:29
then in that case our data will be there
4:32
so we'll be mapping through each post
4:35
using the map operator and for each post
4:38
we will show the
4:44
data uh we will basically bind this key
4:48
parameter which will be post. ID and
4:52
inside this we will actually have this
4:54
component lazy load
4:57
image so basic
5:00
in this way you can actually display
5:03
wrap
5:04
everything whatever image that you want
5:06
to Lazy load you basically wrap
5:08
everything using this and and lazy load
5:11
image tag and right here if you have a
5:13
local
5:15
image so it takes an argument right here
5:17
which is Source parameter so here you
5:20
need to give the address of this image
5:22
so this image is located it will be
5:25
coming from the API so pick some
5:29
do photos do
5:34
ID and here pasting the ID which is
5:38
post.
5:40
ID and it takes some options right here
5:44
it also have the premade effects one
5:46
such effect is blur effect so your image
5:49
will be blurred as soon as it is fetched
5:52
from the API you can even control the
5:55
height as well so you can give it a
5:57
integer value let's suppose 200 and a
6:00
width of 300 so now what happens if you
6:06
see if you refresh now uh you will see
6:10
your
6:14
images we do need to actually give it
6:18
a it doesn't contain antag so we just
6:22
need to close this
6:37
I think I made some kind of mistake here
6:40
so what I will
6:42
do will paste it all the source code
6:46
will be given in the description so
6:49
don't worry about
6:50
it so this is
6:57
my so we pasted this you can see we are
7:00
displaying this from the pixum API and
7:03
we have this effect of blur if you
7:05
refresh
7:08
now
7:09
so now all the images will not be loaded
7:13
uh the images will be lazy loaded you
7:16
can see as I am scrolling down the
7:19
images are being blurred so in this easy
7:24
way you can implement the lazy load
7:26
functionality of images inside your
7:28
react CHS application using this module
7:32
which significantly reduces the load on
7:35
the network all the website data will
7:38
not be loaded in one go it will be
7:40
splitted across
7:42
multiple scenarios so as soon as the
7:45
user comes to the image then only it
7:47
will be loaded so it's a very good
7:49
approach lazy load approach so all the
7:52
source code will be given in the
7:54
description so this is the module here
7:58
so thank you very much for watching this
8:00
video and do check out my website as
8:03
well free mediat tools.com which
8:06
contains thousands of tools regarding
8:09
audio video and image and I will be
8:11
seeing you in the next video