https://github.com/verlok/iobserve

IObserve is a lightweight script that allows you to easily use browsers' IntersectionObserver API
https://github.com/verlok/iobserve

Last synced: 7 months ago
JSON representation

IObserve is a lightweight script that allows you to easily use browsers' IntersectionObserver API

• Host: GitHub
• URL: https://github.com/verlok/iobserve
• Owner: verlok
• License: mit
• Created: 2022-04-17T05:24:57.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-17T21:31:30.000Z (over 3 years ago)
• Last Synced: 2025-03-11T06:46:46.005Z (7 months ago)
• Language: JavaScript
• Size: 172 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: funding.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
IObserve is a lightweight script that allows you to easily use browsers' `IntersectionObserver` API

[![iobserve (latest)](https://img.shields.io/npm/v/iobserve/latest.svg)](https://www.npmjs.com/package/iobserve)

[![iobserve (downloads)](https://img.shields.io/npm/dy/iobserve.svg)](https://www.npmjs.com/package/iobserve)

[![](https://data.jsdelivr.com/v1/package/npm/iobserve/badge)](https://www.jsdelivr.com/package/npm/iobserve)

---

**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**

---

## Getting started

In order to use IObserve, you shall markup your observed elements like this

```html

...

```


Then, in your javascript code:

```js

const onEnter: (el) => {

  // do something with it

  console.log(el, "entered the viewport");

}

const iobserveInstance = new IObserve({

  // Your custom settings go here

  onEnter: onEnter

});

```

## Install from npm

To install IObserve locally with `npm`:

```

npm install iobserve

```

## Inclusion from a CDN

To include IObserve from a CDN:

```html

```

To be sure that the DOM for your lazy content is ready when you instantiate IObserve, **place the script tag right before the closing `