[Bug 20246] New: Provide a system to observe nodes entering and leaving the viewport

https://www.w3.org/Bugs/Public/show_bug.cgi?id=20246

            Bug ID: 20246
           Summary: Provide a system to observe nodes entering and leaving
                    the viewport
    Classification: Unclassified
           Product: WebAppsWG
           Version: unspecified
          Hardware: All
                OS: All
            Status: NEW
          Severity: normal
          Priority: P2
         Component: DOM
          Assignee: annevk@annevk.nl
          Reporter: lrbabe@gmail.com
        QA Contact: public-webapps-bugzilla@w3.org
                CC: mike@w3.org, www-dom@w3.org

Loading content as the user scrolls the page is one of the best ways to improve
performances on modern website. Unfortunately, there aren't any simple and
efficient APIs to do that. I propose a new API to cover those needs.

Currently, the most common way to implement "lazy loading" in a page is to bind
a listener to the scroll event that checks the position of a limited set of
nodes, relative to the view-port. But there are many other conditions that can
cause nodes to enter or leave viewport with triggering events: changing the
dimensions of watched elements, switching their display style property or
adding/removing elements to the same container.

Similar to MutationObserver, we could have a ViewportObserver with very similar
API:

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new ViewportObserver(function( changes ) {
  // This callback receives a ViewportRecord with following properties
  console.log( changes.enteringNodes, changes.leavingNodes );
});

// configuration of the observer:
var config = { subtree: true };

// pass in the target node, as well as the observer options
(ViewportObserverInit)
observer.observe( target, config );

// later, you can stop observing
observer.disconnect();


This API would allow to write much more flexible, efficient and reliable
lazy-loading logic, with much less lines of code than what is currently
required.

Implementation-wise, only the position of observed elements should be checked.
The visibility (which can be affected by many style properties including
"visibility", "z-index", "opacity", "clip", "overflow") isn't taken into
account; it would be the user's job to handle that if necessary.

-- 
You are receiving this mail because:
You are on the CC list for the bug.

Received on Wednesday, 5 December 2012 15:12:04 UTC