Challenge 4: Preloading Images

[00:00:00]
>> Jafar Husain: Broken image. [LAUGH] Well, so that's an actual failure case we have to deal with, right? So we have to worry about broken images. And one of the ways in which we can do that is we can attempt to preload the image before we display it. Does that make sense?

[00:00:14]
Anybody out there know how to preload images in the DOM? You guys are front-end guys. Anybody?
>> Student1: Make an image that is sourced to the thing, and-
>> Jafar Husain: Got you.
>> Student1: LoadEvent or an ErrorEvent.
>> Jafar Husain: Somebody out there who just doesn't go NPM install preloader image, I like it.

[00:00:29]
Old-school, very nice. Yes, absolutely, that's the way in which you can preload an image. So we can create, and whenever you wanna create a preloader image, you can go
>> Jafar Husain: And then go img.onload = function and then img.onerror = function. Make sense? So here we have a callback API.

[00:00:59]
How do we turn this into an observable? Like how do I, I'm gonna express this whole idea of preloading an image as an observable, that I have either fired that image or I guess doesn't. In our case, we kinda wanna filter out images that don't exist, does that make sense?

[00:01:15]
We wanna filter them out, so how am I gonna take, I have a source, right? How do I remove it from the stream unless it's successfully preloaded?
>> Jafar Husain: It's a good place to take a quick break. I want you guys to think about that a little bit, how would we take maybe a function like this that does preloading, and express that as an observable that either fires on next or just on completes, cuz the thing isn't an observable, right?

[00:01:43]
The thing isn't an image, so we wanna filter over it.