Delays content loading
All samples are using
Ink.requireModules, please read how to use it at Ink.requireModules section
Stops the browser from loading a barrage of content at once.
This delays the loading of images and other content until the corresponding elements are visible in the browser viewport. This was created to load images later, but can be also used for widgets which are slow to load and are only useful when on screen.
This works through copying the
src attribute into
data-src, and placing a
placeholder string in the
src attribute. Then, when the element is on screen, the
data-src attribute is copied back to
src and the content starts loading. You can use the options below to change what attributes are involved in the exchange.
You can also provide your
|new LazyLoad_1(selector, [options])||Constructor|
|.destroy()||Destroy this component|
|.reload()||Load or reload the component.|
selectorThe element which contains the lazily-loaded items.
optionsOptions object, containing:
options.itemItem selector. Defaults to '.lazyload-item'.
options.placeholderPlaceholder value for items which are not 'visible', in case they don't already have a value set.
options.loadedClassAdd this class to the images when they're loaded.
options.sourceSource attribute. When an item is 'visible', use this attribute's value to set its destination attribute. Defaults to 'data-src'.
options.destinationDestination attribute. Attribute to change when the element is 'visible'. Defaults to 'src'.
options.delayMilliseconds to wait before trying to load items. Defaults to 100.
options.deltaOffset distance in pixels. Determines how far the top of an item must be from the viewport be considered 'visible'. Negative values shrink the considered 'visible' viewport while positive values enlarge it. Defaults to 0.
options.imageSet to false to make this component do nothing to any elements and just give you the onInsideViewport callback.
options.scrollElement(advanced) What element is to be listened for the scroll event. Defaults to document.window.
options.touchEventsSubscribe to touch events in addition to scroll events. Useful in mobile safari because 'scroll' events aren't frequent enough. Defaults to true.
options.onInsideViewportCallback function for when an `item` is 'visible'. Receives an object containing the item's element as an argument.
options.onAfterAttributeChange(advanced) Callback function when an item's attribute changes. Receives an object containing the item's element as an argument.
options.autoInit(advanced) Set to false if you want to start LazyLoad yourself with `reload()`. Defaults to true.
In the example below the defaults are set to load the images only when they are 300px into the screen.
If you want to see these items loading again, scroll back up and reload the page.
Destroy this component
Load or reload the component.
Adding the 'scroll' event listener if necessary and checks if anything needs to be loaded now.
You can use this to manually invoke the loading logic without user action.