# be-lazy

> Instantiate template when viewable.

Latest version **0.0.33** (published 2025-10-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install be-lazy
pnpm add be-lazy
yarn add be-lazy
bun add be-lazy
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.33 |
| Published | 2025-10-05 |
| First published | 2022-03-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | anderson.bruce.b@gmail.com |
| Maintainers | bahrus |
| Keywords | web-components, web-component, custom-element, custom-elements |

## Links

- npm: https://www.npmjs.com/package/be-lazy
- Repository: https://github.com/bahrus/be-lazy
- Homepage: https://github.com/bahrus/be-lazy#readme
- Issues: https://github.com/bahrus/be-lazy/issues
- npm.io page: https://npm.io/package/be-lazy

## Dependencies (4)

- [be-hive](https://npm.io/package/be-hive.md) 0.0.267
- [be-enhanced](https://npm.io/package/be-enhanced.md) 0.0.189
- [trans-render](https://npm.io/package/trans-render.md) 0.0.960
- [be-intersectional](https://npm.io/package/be-intersectional.md) 0.0.78

## Recent versions

- 0.0.33 (latest) — 2025-10-05
- 0.0.32 — 2024-08-01
- 0.0.31 — 2024-07-24
- 0.0.30 — 2023-07-17
- 0.0.29 — 2023-06-08
- 0.0.28 — 2023-06-07
- 0.0.27 — 2022-10-30
- 0.0.26 — 2022-10-29
- 0.0.25 — 2022-10-17
- 0.0.24 — 2022-10-15
- 0.0.23 — 2022-09-22
- 0.0.22 — 2022-09-17
- 0.0.21 — 2022-09-06
- 0.0.20 — 2022-09-04
- 0.0.19 — 2022-08-31
- … 19 more at https://npm.io/package/be-lazy/versions

## README

# be-lazy (🦥)

[![Playwright Tests](https://github.com/bahrus/be-lazy/actions/workflows/CI.yml/badge.svg?branch=baseline)](https://github.com/bahrus/be-lazy/actions/workflows/CI.yml)

be-lazy loads a template into the live DOM tree only when it becomes visible (or is about to be visible based on threshold settings.)

<a href="https://nodei.co/npm/be-lazy/"><img src="https://nodei.co/npm/be-lazy.png"></a>

Size of package, including custom element behavior framework (be-decorated):

[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/be-lazy?style=for-the-badge)](https://bundlephobia.com/result?p=be-lazy)

Size of new code in this package:

<img src="http://img.badgesize.io/https://cdn.jsdelivr.net/npm/be-lazy?compression=gzip">

The consumer of be-lazy needs to use css to set the size to something approximating what it will be when instantiated:

```html
    <style>
        template[be-lazy], template[is-lazy]{
            display:block;
            height: 18px;
        }
    </style>
    <template be-lazy>
        <div>I am here</div>
    </template>
```

The role of be-lazy ends once it becomes viewable, and the content is instantiated.   In fact, the template is deleted at that point.

Options include setting [IntersectionObserverInit](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#creating_an_intersection_observer) settings:

```html
<template be-lazy='{
    "options": {
        "rootMargin": "0px",
        "threshold": "1.0"
    }
}'>
```

Other configuration settings include "enterDelay" and "exitDelay".  The idea behind those settings is if the user is scrolling very quickly, it can slow the scrolling down if it is instantiating templates that have already zoomed past.

be-lazy can hold its own against [content-visibility](https://web.dev/content-visibility/) in terms of performance.

It is most effective if content is "paged" -- be-lazy really shouldn't hold a single div tag as shown above, but the amount of content inside should approximately fill the screen.

be-lazy is currently being used by one virtual list - [xtal-vlist](https://github.com/bahrus/xtal-vlist).   

 


## Viewing this element locally

Any web server than can serve static files will do, but...

1.  Install git.
2.  Fork/clone this repo.
3.  Install node.
4.  Open command window to folder where you cloned this repo.
5.  > npm install
6.  > npm run serve
7.  Open http://localhost:8000/ in a modern browser.

## Running Tests

```
> npm run test
```

## Using from CDN:

```html
<script type=module crossorigin=anonymous>
    import 'https://esm.run/be-lazy';
</script>
```

## Referencing via ESM Modules:

```JavaScript
import 'be-lazy/be-lazy.js';
```

---
_Source: https://npm.io/package/be-lazy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._