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

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.

[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

[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!