Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #i
  • #in
  • #inte
  • #inter
  • #intersec
  • #intersection
RSS: #intersectionobserver

#intersectionobserver

  • #intersectionobserver_lazyload_clevermarks_javascript
  • @nhoizey
    Nicolas Hoizey @nhoizey CC BY-NC-SA 22/01/2018

    Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver
    ▻https://www.smashingmagazine.com/2018/01/deferring-lazy-loading-intersection-observer-api

    “In this article, we are going to go out of the scroll darkness and talk about the modern way of lazy-loading resources. Not just lazy-loading images, but loading any asset for that matter. More so, the technique we are going to talk about today is capable of much more than just lazy-loading assets: We will be able to provide any type of deferred functionality based on the elements’ visibility to users.”

    #IntersectionObserver_lazyload_clevermarks_JavaScript

    Nicolas Hoizey @nhoizey CC BY-NC-SA
    Écrire un commentaire

  • @nicod_
    nicod_ @nicod_ 31/10/2017
    1
    @baroug
    1

    Lozad.js | lozad.js
    ▻https://apoorv.pro/lozad.js

    Yet another Lazy Loading JavaScript library, why?

    Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call getBoundingClientRect() on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect() forces the browser to re-layout the entire page and will introduce considerable jank to your website.

    Making this more efficient and performant is what #intersectionobserver is designed for, and it’s landed in Chrome 51. IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.

    #webdev #images #lazy_load #performance

    nicod_ @nicod_
    • @b_b
      b_b @b_b PUBLIC DOMAIN 31/10/2017

      Ici aussi ▻https://seenthis.net/messages/628636 :)

      b_b @b_b PUBLIC DOMAIN
    • @nicod_
      nicod_ @nicod_ 31/10/2017

      Ah peut être, mais ça vient en automatique du flux RSS de mon marque page (scuttle), je contrôle pas systématiquement :)

      nicod_ @nicod_
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 10/09/2017
    4
    @kent1
    @rastapopoulos
    @tofulm
    @mukt
    4

    Lozad.js
    ▻https://github.com/ApoorvSaxena/lozad.js

    Highly performant, light ~0.5kb and configurable #lazy_loader in pure JS with no dependencies for #images, #iframes and more, using #IntersectionObserver API

    Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call getBoundingClientRect() on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect() forces the browser to re-layout the entire page and will introduce considerable jank to your website.

    Making this more efficient and performant is what IntersectionObserver is designed for, and it’s landed in Chrome 51. IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.

    En lien avec ▻https://seenthis.net/messages/619904

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 10/09/2017

      Ça a l’air super !

      #intégration #web #webperf #lazyload

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 3/08/2017
    7
    @02myseenthis01
    @tofulm
    @monolecte
    @fil
    @cocoadaemon
    @7h36
    @cy_altern
    7

    Intersection Observer comes to Firefox
    ▻https://hacks.mozilla.org/2017/08/intersection-observer-comes-to-firefox

    https://hacks.mozilla.org/files/2017/08/Blank-Diagram-Page-1-500x355.png

    Knowing whether or not an element is #visible has traditionally been difficult on the Web. Most solutions listen for scroll and resize events, then use #DOM #APIs like getBoundingClientRect() to manually calculate where elements are relative to the #viewport. This usually works, but it’s inefficient and doesn’t take into account other ways in which an element’s visibility can change, such as a large image finally loading higher up on the page, which pushes everything else downward.
    These techniques kill performance, drain batteries, and would be completely unnecessary if the browser could just notify us whenever an element’s visibility changed.
    At its most basic, the #IntersectionObserver API looks something like:

    let observer = new IntersectionObserver(handler);
    observer.observe(target); // <-- Element to watch

    IntersectionObserver is available by default in Edge 15, Chrome 51, and Firefox 55, which is due for release next week.

    A polyfill is available which works effectively everywhere, albeit without the performance benefits of native implementations.
    ▻https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

Thèmes liés

  • technology: api
  • #images
  • #intersectionobserver