Skip to content

Small library that lets you lazy-load chunks of html in html comments.

License

Notifications You must be signed in to change notification settings

sgulseth/lazy-blocks

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Lazy Blocks

Small library that lets you lazy-load chunks of html in html comments.

Use

Define the markup you want to lazy-load inside you also have to manually define the height with css since the markup is not rendered by the browser before the its in the users viewport.

`

`

Insert the lazy-block.js script from the dist folder. var Lazy = new LazyBlocks({ elements: document.querySelectorAll('.lazy-element') }).execute();

Open the dev tools and see the browser renders the content when you scroll. See the examples/blocks.html for more information.

API

LazyBlocks accepts the following params:

  • elements: An array of elements to lazy-load *required
  • threshold: You can modify the threshold for when the lazy-loader kicks in, default: 100px
  • throttle: throttle the callback to check if elements are visible, default: 500ms
  • aboveTheFold: If the user refreshes, or a element is dynamically added, and the element(s) are above the users viewport should we render this? default: false
  • callback: define a custom callback to not load html comments. See dist/lazy-block.js for the default callback function

new LazyBlocks({...}) returns an object with the following prototype:

  • execute(): this is the function which checks if elements are within viewport, this is executed with throttle on scroll
  • detach(): Detaches the lazy-loaders and call the callbacks for all the elements
  • addElement(el[, params]): add a new element to the current lazy loader. The first argument must be a DOMNodeElement. You can also pass a custom params with the above options, if this is not passed the options from initialization is used.

Bonus:

Since its callback based you can easily add a different lazy loader, ie. image lazy-loading. See the examples/ folder for how to use LazyBlock to render images lazy.

Collaborators

About

Small library that lets you lazy-load chunks of html in html comments.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published