> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/events/onvisible.md).

# onVisible()

## `$(selector).onVisible(callback)`

Runs `callback` when the element becomes **visible in the viewport**.

#### Example

```javascript
$('#card').onVisible(() => {
    console.log("Card is visible on screen!");
});
```

Great for:

* Animations
* Lazy loading
* Counters
* Analytics events

### Use cases

Use `onVisible()` to delay work until a section enters the viewport:

* Initialize content below the fold.
* Load an image only when it becomes relevant.
* Record when a promotional section is viewed.

### More examples

Initialize a newsletter section when it becomes visible:

```javascript
$('#newsletter').onVisible(() => {
  $('#newsletter-status').text('Newsletter section is ready.');
});
```

Load an image from its deferred source:

```javascript
$('#product-image').onVisible(() => {
  $('#product-image').attr('src', $('#product-image').attr('data-src'));
});
```