- Uses IntersectionObserver API to reveal elements, lazy load content, and autoplay/pause videos as they scroll into view - Supports dynamically added elements - 5KB minified (inc. VideoPlayer)
$3
- Add data-uncloak-new to any elements you would like to be picked up by Uncloak - Create new instance of Uncloak - this will automatically query all elements with this attribute - Each element will be created as an UncloakItem (or UncloakVideoItem), and: - Its data-uncloak-new attribute will be removed (so it won't be picked up again) - Be added to a a global IntersectionObserver instance (attached to Uncloak), to be revealed when its node is visible in the viewport - Will query for any child elements to be lazy loaded (with data-uncloak-src, data-uncloak-srcset, data-uncloak-picture attributes) - in which case, will setup its own IntersectionObserver instance with a margin of 50% around the viewport - If it is an UncloakVideoItem, the video will autoplay once within 25% of the viewport (and paused if outside) - If you dynamically add anymore elements and want them to be picked up by Uncloak: - Make sure they have the data-uncloak-new attribute - Run uncloak.findNewItems() after they've been added to the DOM
_TODO: UncloakVideoItem docs_
$3
All settings are optional, defaults are listed below:
`` new Uncloak({ items = []; // an array of UncloakItem / UncloakVideoItem that are to be revealed
// Sent to UncloakItem itemOptions = { delayTypes: {}, callbacks: {} }; }); `
data-uncloak-picture - Don't add an inside the picture to prevent loading - Add a fallback source (via data-uncloak-ie-src) to be loaded on the in IE (which doesn't support ) - Optionally, add some alt text (data-uncloak-alt) or classes (data-uncloak-class) to be added to the when it's created