[Cookbook] Lazy load images in Vue.js with IntersectionObserver

[mazipan]

Google has been released guidance for creating lazy load images with IntersectionObserver that I think very nice if we also have Vue.js implementation based on that article. The Idea is creating vue directive that wrapping all those logic.

Base Example Base example will be based on https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

Details about the Value Lazy load was very critical and has been basic implementation when we talk about first load speed tuning, but with many library in vue.js that have been implemented this things people will have confuse what the basic work if they need to create their own lazy load implementation.

In this cookbook, we will guide user to learn creating lazy load image based on Google's article with very basic function.

Real-World Example We will also creating sample and demo about this cookbook, so user can be learn how to implementing in real world project.

When To Avoid This Pattern Using IntersectionObserver was great, but as we know IntersectionObserver is very new and have no good support for old browser. So when your web apps need to support all this old browser, we need to use a classic lazy load except you prefer to add polyfill.

Alternative Patterns We can use fallback when IntersectionObserver not supported, usually we can attached scroll event and replace image placeholder with original one. But we can also doing switch off the lazy load if we want simpler implementation.

P.S: I haven't working to create PR, but will do soon when the core teams approve about this proposal.

[sdras]

This sounds wonderful! We'd love a PR for it. Thanks.

[mateuszRybczonek]

@mazipan, I recently committed an article on the same topic (https://medium.com/@m.rybczonek/lazy-loading-images-with-vue-js-directives-and-intersectionobserver-d0eb390cad9).

If you want you could base on that one. Also if you feel that you don't have resources to push it forward I can also take it from here and create a PR.

Let me know how do you feel about it?

[benjvmin]

On top of what @mateuszRybczonek said, I have also done a small deep dive on how to achieve this functionality, which you can find here: https://benjamintaylorportfolio.netlify.com/#/post/lazy-loading-images-with-vue-js-directives

Both of our implementations differ only very slightly- the only thing missing would be including an intersection observer polyfill / fallback. It would be an honor to further refine what we already have and help get this thing published! Cheers!

[sdras]

@mazipan, are you still interested in making this? If not, would you like to pass it off to @benjvmin or @mateuszRybczonek? It might be nice to all work together on something but we need to decide who commits the initial PR. Thanks!

[mazipan]

I think I don't have much time to write this by myself, it will nice to have other people to help write this thing. @benjvmin or @mateuszRybczonek maybe can help us to write this.

But my concern is, this cookbook should very simple because we want to teach a community about concept intersectionObserver in Vue not introduce the library that we built it self.

I will help discussed if it's needed.

Thanks.

[sdras]

It's ok for cookbook entries to include how to use a library, or even how it's built. People can also learn from these cases. One can learn about intersectionObserver from using it in practice. @benjvmin or @mateuszRybczonek, we welcome your contribution.

Since @mateuszRybczonek's article is already on top of the work that @benjvmin did, perhaps we should work off of Benjamin's initial post. I really enjoyed what @mateuszRybczonek did in showing what was accomplished via perf benefits in the timeline, maybe we can include that too near the end. What do you think?

[sdras]

I would also like to highlight @Akryum's library https://github.com/Akryum/vue-observe-visibility which makes use of intersectionObserver for animations. Technically with rAF this isn't needed but many don't know this or make use of it, so good for people to find it.

[Akryum]

vue-observe-visibility can absolutely work for lazy loading images, and it also supports old browsers!

[benjvmin]

@Akryum really neat library! I also think highlighting perf is a great idea @sdras! This seems destined for the “Alternative Patterns” section, highlighting the benefits and drawbacks to both Intersection Observer vs. scroll based event handling.

I do want to echo what @mazipan said about focusing on simplicity as well, providing a barebones solution will hope to motivate others to layer additional functionality / refinement such as @mateuszRybczonek has done, or highlight why vue-observe-visibility could provide a comprehensive solution.

I’m going to try my best to stick as much to the cookbook formula as I can, since there are many different concepts at play here I want to provide both the original google article @mazipan referenced and MDN’s intersection observer entry as additional references.

I have a small draft going on a feature branch of my vue.js.org fork, once I get home I will comment again with a link to the working draft- maybe we can start with that, or if you believe there is a better way to go about this, please lmk! Cheers!

[sdras]

Thanks for sticking to my formula, that will make the PR go more smoothly. You'll find you need to make a base example that's simple as part of that. I look forward to it!

[benjvmin]

Sorry for the late reply, I took a couple personal days off- I'm still on working on getting the draft completed / refined as possible so we can have the least amount of friction when I submit the PR- hopefully looking at the next couple days to submit. Cheers and happy weekend all!

[benjvmin]

Hey all,

Just wanted to succinctly apologize for my lack of communication (just accepted my first design/dev role!) however I am still very much hard at work on this. Since this is a cookbook entry I wanted to stick to @sdras 's formula while embodying the principles that separate it from the guide, which I've put much focus on "greater depth", as to create a comprehensive guide to try and help devs from all levels of ability.

I've attached a .png of what I have so you can see what I have written so far. Obviously it's not done and it's rough around the edges especially towards the end. If you can look over what I have so far and let me know what you think! I still have yet to write the Real World Example, Alternative Patterns + Plugins, and Performance section, but I'm working hard at it. I actually hit a roadblock with a bug in chrome (more on that below).

I wanted to include two codepens, one for base example and one for the real world example. You can see the base example codepen here. It will include a link to the cookbook entry.

I actually ran into an Intersection Observer bug in chrome that's currently stopping me from finishing the real world example without a workaround! You can see the bug I've filed in Chrome here: https://bugs.chromium.org/p/chromium/issues/detail?id=910741

Sorry for the wall of text, just trying to communicate as best I can! I'm glad to make good progress in order for a successful PR. Please let me know if y'all have anything to add :), Cheers

[phanan]

@benjvmin This looks great! I see that the fix will be merged into Chrome 72. Hope to see the end result by then :)

[sarahdayan]

Hey @benjvmin, are you still down for opening a PR with your draft? I'm willing to volunteer otherwise, but it would be a shame not to use what you've already spent time putting together 🙂