Competa Meetup

23 may 2018

TECH MENTOR CODEPAMOJA

RAYMON

 ❤️ JAVASCRIPT LOVER ❤️

JavaScript
Intersection Observer

⚡️ Lightning talk ⚡️




window.addEventListener('scroll', function() {
    // execute function with every scroll event
})

For years we have had the scroll eventlistener

scroll event

MDN Develops Says:

Since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications.

Demo

Is a element visible?

Everytime a person scrolls in the browser it will fire a event.


To check if it is visible, there needs to be a manual calculation with the "Element.getBoundingClientRect()"

scroll event

Intersection Observer

Intersection Observer

MDN Develops Says:

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Demo

Taking it next level with ease 🚀

Intersection Observer Next Level

Scroll event VS 
Intersection Observer

```
Event is called a lot
```

Pretty heavy in combination with DOM manipulation

```
Heavy for slower mobile devices
```
```
Needs a lot manual calculation
```

```
Only called by your definition
```
```
More lightweight with DOM manipulation
```
```
Better for mobile devices
```
```
Easier to implement
```

Scroll event VS Intersection Observer

Thanks 
for your time!

Read more on:

http://www.competa.com/blog/lazy-loading-with-the-intersection-observer/

JavaScript Intersection Observer

By CodePamoja

JavaScript Intersection Observer

CodePamoja

CodePamoja means "Code Together" in Swahili. We are a group of passionate developers in The Netherlands and Kenya working together in virtual teams, transferring the latest software development skills to each other.

codepamoja.com

JavaScript Intersection Observer

More from CodePamoja