jQuery Tutorial - 8 - Load Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' org
with a video tutorial for the new Boston
in this video we're going to be taking a
look at the load event handler and how
we use it in document loading now if I
was to go ahead and use document load we
know that that allows us to know when
the Dom has been loaded and we can start
you know manipulating different elements
on a page or anything on a page however
if we were to go ahead and look at the
example of a large image with a slightly
larger file size let's say we wanted to
take an image and know when an image had
been loaded into the dom so the first
thing I'm going to do is go ahead and
outline this image in fact let's take a
look at this in comparison to document
load so I'm going to go ahead and just
create some content on a page so we'll
just say content so now on our page we
have this when we go into ext GS which
I've included on my page just here so
that's that scripts included as an
external file we can often use document
dot ready and then here we can define a
function for when our document is ready
so for example show a dialog box like
alert or an alert box saying ready so we
have this alert box up now when our DOM
is available now let's just go ahead and
take a look at a larger image if we were
to have say an image here that would say
Berlin jpg and we're just going to go
ahead and assign a oh no we won't assign
an ID to it quite yet but we'll go ahead
and use document dot ready with a
function inside that will run when our
document is loaded so this is going to
be alert ready
now when i refresh my page this in this
image is about one or two megabytes in
file size so you'll notice that the
alert box will appear instantly even
before the image has loaded let's go
ahead and refresh you can see that we
have this alert box appear our image in
the background hasn't loaded it hasn't
even begun to load so now when I press
ok you can see that the image the rest
of the image begins to load and we now
have this image inside of our browser
now let's go ahead and take a look at
what's going to happen if we want this
to happen after the image has loaded so
we can either go ahead and use window
dot ready which is in another tutorial
and I'll talk about that in another
tutorial or we can assign an ID to a
particular element that we want to check
for loading and this can be applied to
iframes images etc etc so I'm just going
to call this image image so I'm going to
give an ID of image now inside ext is
what I'm going to do is I'm going to
select this particular image so image
dot but I'm this time I'm going to use
load so we're looking at the load event
handler and then going to go ahead and
define the function inside of this and
just bring it down so what we've done is
we've we're essentially checking when
this image this this object or this
element in our page has loaded we then
run some code so we can run again alert
image load it
so now what we're doing is instead of
using document.ready we're checking when
a particular item has been loaded so in
this case we're going to say image
loaded when this image is loaded so if
we go back to here and refresh the page
you can see that the page is actually
refreshed and the image was loaded in
the background very quickly because it
will already be present in my browser
cache so now we have this image loaded
alert box come up but the image had
already loaded before this had happened
so let's just take an example if you
wanted to go ahead and perform some kind
of you know jQuery operation on an image
for alignment purposes or whatever you
want to do you're looking at making sure
the image loads before you start this
code so for example you could say image
load and then you could go ahead and
apply some code directly that to do with
the image so you'd want the image to
load before you'd be able to perform
anything on the image you know anything
to do with the image so using the load
on a particular element is helpful
because you can then go ahead and
actually wait for an element to be
loaded and like I said this can be
applied to other things such as iframes
so for example if you had an iframe here
go ahead and outline this and then you
had the source of this being for example
Google
what you then do is you would come in
here and you could obviously assign an
ID to this iframe and we'll just call
this iframe and we could then go ahead
and just reference this as iframe load
and then we could say alert iframe load
it so now when we go ahead and refresh
we make sure that's loaded which it had
before we got this dialog box up you'll
probably notice that it did a bit of
loading in here before that happened let
me just refresh again you can see they
all loaded before this happened we'll go
ahead and select another website just so
you can see that once more so let's go
ahead and choose PHP academy' dorg now
when i refresh that waits once it's
loaded we see iframe loaded so now that
we've looked at this we can go ahead and
we could also apply that to for example
all images on a page so you could say
IMG road all images loaded so we're
using a selector but we're selecting
globally across the Dom all images so
now what we could do is go ahead and
apply an image
in fact let's take a look back at the
iframe example because this shows
loading a lot better I'll go ahead and
choose Google Code at UK and that's
going for eBay dot code at UK just an
example we can go ahead and get rid of
these IDs because they're not they're
not relevant in this case we're going to
be selecting all iframes so iframe dot
load all iframes loaded so now we're
using selectors in this case to select
all iframes and once they've all loaded
we say all iframes loaded so this is
going to take slightly longer than we've
looked at before so when i refresh you
can see that we it waits for all of all
three of the contents to load before
this happens I will it will happen for
each one sorry so yeah as I've just said
it happens for each iframe as each frame
each iframe loads however we need to
look at the possibility of checking if
all of our elements have loaded rather
than straight after the Dom has been
initialized so in the next tutorial
we're going to be taking a look at the
alternative to this where we look at
when all objects in the page have been
loaded and then we can say go ahead and
alert something out