Published on March 10, 2017 by Chrome
Want create site? Find Free WordPress Themes and plugins.

Learn more about the sample video-on-demand media Progressive Web App on GitHub: goo.gl/WNf1Dx

Paul Lewis delves in to the code behind lazy loading images and reveals how he defers loading on his media player via an intersection observer rather than a scroll handler.

Subscribe to the Chrome Developers Channel: goo.gl/LLLNvf

Did you find apk for android? You can find new Free Android Games and apps.

Leave a Reply

24 Comments on "Building a Media Player #9"

Notify of
avatar

Ben Schramm
Guest
Ben Schramm
5 months 30 days ago

PLAYYYYERR NIIIINNEEE

SomeDud3
Guest
SomeDud3
6 months 11 days ago

What are the underscores from? Are you using underscore library?

Ante Šepić
Guest
Ante Šepić
6 months 9 days ago

I believe he used underscore to mark the class method as private. It's just a naming convention.

Mehran Djalali Behzad
Guest
Mehran Djalali Behzad
6 months 12 days ago

@Paul, Would you suggest using the IntersectionObserver polyfill from WICG? or rather stick to a custom scroll event handler for this use case?

Robert Lamacraft
Guest
Robert Lamacraft
6 months 12 days ago

will be so nice when stuff like this can be bundled into a reusable Web Component…

Paul Lewis
Guest
Paul Lewis
6 months 14 days ago

For anyone wondering, I've now updated this code thanks to the suggestions in the comments from Birkir Guðjónsson and Abinash Mohapatra. See, team work makes the dream work! o/github.com/GoogleChrome/sample-media-pwa/commit/8b52486ea53c5ad40e3cab9d3063e6add30ba6d0

Gil Goldshlager
Guest
Gil Goldshlager
6 months 14 days ago

Nice :)Can you please give a proper title to each video for it will be easier to find it later? for example the current title doesn't even have anything to do with this video.

Gil Goldshlager
Guest
Gil Goldshlager
6 months 13 hours ago

Thanks for updating the titles 🙂

Jonathan Hodgson
Guest
Jonathan Hodgson
6 months 14 days ago

Do you add the src to a data-src attribute or something or do you unset the src attribute before the images have loaded? I have always been put of lazy loading images because they require the user to have JavaScript on. Have you got a work around for this?

Dale Martyn
Guest
Dale Martyn
6 months 14 days ago

could you not use <noscript>, use regular <img src> and use a service worker to change the src into data-src? or is that a stupid idea?

Paul Lewis
Guest
Paul Lewis
6 months 14 days ago

Yeah the <noscript> element, which contains a div with the BG image set on it.

Birkir Guðjónsson
Guest
Birkir Guðjónsson
6 months 14 days ago

Hey, why don't you use the `unobserve` method to stop observing loaded images?

Hannan Ali
Guest
Hannan Ali
6 months 10 days ago

ayyyy

Birkir Guðjónsson
Guest
Birkir Guðjónsson
6 months 13 days ago

Paul Lewis sweet!

jarrod fairs
Guest
jarrod fairs
6 months 13 days ago

good "observation" 😛

Paul Lewis
Guest
Paul Lewis
6 months 14 days ago
Paul Lewis
Guest
Paul Lewis
6 months 14 days ago

Sure, good idea.

ABINASH MOHAPATRA
Guest
ABINASH MOHAPATRA
6 months 14 days ago

y not just unobserve the entries once the IO callback is called?? Then maybe we won't need the tagged class thingy?? just thinking out loud…

Paul Lewis
Guest
Paul Lewis
6 months 14 days ago
Paul Lewis
Guest
Paul Lewis
6 months 14 days ago

Yep, should have done that.

Raphael Höser
Guest
Raphael Höser
6 months 14 days ago

Just a short question on your style of coding: Was it on purpose, that you add the "js-lazy-image–handled" class in line 86 of lazy-load-images.js via text and not by using LazyLoadImages.HANDLED_CLASS ?In my opinion it would be more elegant and future-proof to use the attribute you already created for this use.

Paul Lewis
Guest
Paul Lewis
6 months 14 days ago

Just a bug. I should fix that.

wpDiscuz