Load Event Solution

[00:00:00]
>> Brian Holt: But it has that weird flash, right? So if I load another carn right here,
>> Brian Holt: It shows the old image first, and then it quickly switches over to the new image. It should be preferable if they didn't do that, right? It would be preferable if just the new image showed up.

[00:00:19]
>> Brian Holt: So how can we do that? First of all, before we get to that, does anyone have any questions about this so far?
>> Speaker 2: What is the benefit to making a show class versus changing the style to display none or display block for each of those things?
>> Brian Holt: Sure, you could totally do spinner.style.display =,

[00:00:44]
>> Brian Holt: block right here, and then change it to none down here. I think, one, it's just personal preference. There are lots of people that would definitely do it that way. For me, the code here feels a little bit cleaner to do it with classes. Cuz let's say later, I wanna do animations, where it fades out and fades back in.

[00:01:08]
That's really easy to do with classes and it would be horrendous to do it with this. If you're changing one property, I don't really care. But if you're changing a lot of properties, then it becomes terrible and unruly. So I only wanna hide the spinner after the image has actually been loaded.

[00:01:25]
So what I'm gonna do here instead is rather than immediately show and hide these divs, what I'm gonna do is I'm gonna actually add an event list here on the image. Let's just do it down here. And we're gonna say img.addEventListener. And whenever a load event happens, and a load event is fired whenever a image successfully loads its,

[00:01:54]
>> Brian Holt: Its source, so whenever that happens, that's what we're gonna do.
>> Brian Holt: We're gonna remove show and add show, remove show from the spinner and add show from the classList. I'm gonna comment that out of there. So now, hopefully, if you say beagle, there we go. Now that looks a lot cleaner, doesn't it?

[00:02:29]
>> Brian Holt: So just to kind of recap what happened here. Before, once we got the data back from the API, right, all the API gives you back is a URL to the image. It doesn't actually give you the image, right? There's a difference, right? It's like it doesn't give you the house, it just gives you the address of the house, right?

[00:02:49]
And we actually only wanna show it when we actually have the actual image itself. So if you immediately show the image after you just get the address, you still have to get the time that it takes you to get to the house, right, overextended analogy. [LAUGH] So that's what we're doing here.

[00:03:07]
We're basically saying, cool, change the source of this image, but wait until the image arrives back to me from the server.
>> Brian Holt: So that's what the event listener here is doing is wait until this load event happens. Once that load event happens, then remove the show from the spinner and then add it to the image.

[00:03:36]
>> Speaker 3: So mine still shows the placeholder corgi, but my underneath it.
>> Brian Holt: Mm-hm, so,
>> Brian Holt: That's what you have to do there. Basically in some fashion, you have to hide the image.
>> Brian Holt: So other people here have been doing img.style.display = none, right? And that would totally work as well.

[00:04:14]
You can either do it with classes or you can do it with directly manipulating the styles.
>> Speaker 2: Okay, thank you.
>> Brian Holt: Mm-hm, then you just have to make sure to show it again afterwards.