Tweet
Tweet

Slide 1

Slide 1 text

INTERSECTION OBSERVER

Slide 2

Slide 2 text

Hello! I AM JO FRANCHETTI Web developer advocate @samsunginternet @thisisjofrank https://medium.com/@jofranchetti

Slide 3

Slide 3 text

SAMSUNG INTERNET ◦ Our team speaks at events and helps to support communities ◦ We produce code demos and blog posts ◦ Our team is super friendly and love to work on projects with users of our browser, come speak to me after the talk.

Slide 4

Slide 4 text

SAMSUNG INTERNET ◦ Web browser for android phones ◦ Specific UX for our users (privacy, VR) ◦ 3rd most popular mobile browser ◦ Available on android 5.0+ devices https://samsunginter.net/

Slide 5

Slide 5 text

INTERSECTION OBSERVER

Slide 6

Slide 6 text

WHAT’S THE PROBLEM? Large number of images on the page Infinite scrolling 3rd party page-impression scripts cause bloat Difficult/process intensive to calculate ?

Slide 7

Slide 7 text

Sluggish, janky interactions

Slide 8

Slide 8 text

Large downloads

Slide 9

Slide 9 text

Large downloads Bruce Lawson @brucel

Slide 10

Slide 10 text

No more watching/polling for intersections

Slide 11

Slide 11 text

No need for 3rd party libraries

Slide 12

Slide 12 text

Intersection Observer API

Slide 13

Slide 13 text

“ 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.

Slide 14

Slide 14 text

EXAMPLE https://codepen.io/thisisjofrank/pen/pdQzMr

Slide 15

Slide 15 text

LAZY LOADING IMAGES https://www.livenation.co.uk/ https://medium.com/@aganglada/intersection-observer-in-act ion-efc118062366

Slide 16

Slide 16 text

INFINITE SCROLL https://codepen.io/tutsplus/pen/oppZpq

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Creating an intersection observer var options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options);

Slide 20

Slide 20 text

Creating an intersection observer Root Target

Slide 21

Slide 21 text

Creating an intersection observer var options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options);

Slide 22

Slide 22 text

Creating an intersection observer Root Margin Target

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Creating an intersection observer var options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options);

Slide 26

Slide 26 text

Creating an intersection observer Callback executed! Callback executed!

Slide 27

Slide 27 text

Creating an intersection observer var options = { root: document.querySelector('#scrollArea'), rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options); var target = document.querySelector('#element'); observer.observe(target);

Slide 28

Slide 28 text

Creating an intersection observer var callback = function(entries, observer) { entries.forEach(entry => { // entry.boundingClientRect // entry.intersectionRatio // entry.intersectionRect // entry.isIntersecting // entry.rootBounds // entry.target // entry.time }); }

Slide 29

Slide 29 text

THIS IS A SLIDE TITLE Here you have: ◦ A list of items ◦ And some text ◦ But remember not to overload your slides with content Your audience will listen to you or read the content, but won’t do both.

Slide 30

Slide 30 text

DOWNSIDES? Not Pixel perfect Not low latency Values will be ‘out of date’ by the time you get to use them Spending too much time in the callback will cause lag Differing levels of support across browsers ?

Slide 31

Slide 31 text

Examples https://slow-cats.glitch.me/ (lots of images, no intersection observer) https://fast-cats.glitch.me/ (same number of images, with intersection observer) https://www.webpagetest.org Test the performance of your sites

Slide 32

Slide 32 text

Creating an intersection observer

Slide 33

Slide 33 text

Creating an intersection observer

Slide 34

Slide 34 text

Creating an intersection observer

Slide 35

Slide 35 text

Creating an intersection observer

Slide 36

Slide 36 text

GO FORTH AND OBSERVE INTERSECTIONS

Slide 37

Slide 37 text

Thank you for listening! @thisisjofrank @samsunginternet