PHPackages                             webcito/query-lazy - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. webcito/query-lazy

ActiveLibrary[Utility & Helpers](/categories/utility)

webcito/query-lazy
==================

A simple jQuery plugin to load elements only when they are needed during scrolling.

027

Since Jun 22Pushed 10mo ago1 watchersCompare

[ Source](https://github.com/ThomasDev-de/query-lazy)[ Packagist](https://packagist.org/packages/webcito/query-lazy)[ RSS](/packages/webcito-query-lazy/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

jQuery-lazy
===========

[](#jquery-lazy)

[![header](./demo/img/jquery-lazy.png)](./demo/img/jquery-lazy.png)

A simple jQuery plugin to load elements only when they are needed during scrolling.

Introduction
------------

[](#introduction)

Set the attribute `[data-lazy-src]` to an image so that the plugin knows which image should be loaded. It can also be set to other elements to load the background image for the parent element.
If the `[data-lazy-url]` attribute is set to an element, the content is fetched using ajax.

Make sure that the elements that are loaded via the plugin have a minimum height; otherwise it can happen that all elements are loaded at once.
For example like this:

```
 .lazy-waiting {
    display: block;
    visibility: hidden;
    min-height: 300px;
}
```

The plugin provides you with 4 classes to handle this.

1. `lazy-waiting` This class receives every element that is initialized via the plugin.
2. `lazy-loading` This class is assigned to each element via which the plugin is requested to load.
3. `lazy-done` This class is set on every element that has finished loading.

Another example:

```
body.lazy-done {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
```

Installation
------------

[](#installation)

1. Download the plugin [uncompressed](./dist/jquery-lazy.js), [minified](./dist/jquery-lazy.min.js)
2. Or load the plugin via composer

```
composer require webcito/query-lazy:dev-main
```

3. Include the plugin in your project at the end of the body tag. Make sure that jQuery is loaded first.

```

```

Usage
-----

[](#usage)

Set the attribute `[data-lazy-{src,url}]` to all elements that should be loaded lazy.

```

```

Initialize the plugin

```
$('[data-lazy-src], [data-lazy-url]').lazy(options);
```

Options
-------

[](#options)

nametypedefaultdescriptionrecursive`bool``true`If the value is `true`, additional lazy elements are searched for and initialized in elements that are loaded via ajax (data-lazy-url).classStatic`string``'lazy'`The class is set for each element and is not changed further.classWaiting`string``'lazy-waiting'`This class receives every element that is initialized via the plugin.classLoading`string``'lazy-loading'`This class is assigned to each element via which the plugin is requested to load.classDone`string``'lazy-done'`This class is set on every element that has finished loading.onBeforeLoad`function``(element) => {}`The function is triggered before an element receives its content.onLoad`function``(element, width, height, scrollY, scrollX) => {}`The function is triggered when an element has received its content.onError`function``(element) => {}`The function is triggered if an element could not receive its content.onCompleted`function``() => {}`The function is triggered once all elements have received their content.Events
------

[](#events)

nameparamsdescription`beforeLoad.lazy`eFires on every element before it is loaded`loaded.lazy`e, width, height, scrollY, scrollXFires on any element after it has been loadedFurther information
-------------------

[](#further-information)

After an element has been loaded, the attributes `data-lazy-src` and `data-lazy-url` are removed from the element.

###  Health Score

17

—

LowBetter than 6% of packages

Maintenance39

Infrequent updates — may be unmaintained

Popularity7

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity14

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/6d5f10c16b4b6bd1ac531ffc39c23c569490ec4630829511692c03ec89d36a11?d=identicon)[thomasK81](/maintainers/thomasK81)

---

Top Contributors

[![ThomasDev-de](https://avatars.githubusercontent.com/u/67106837?v=4)](https://github.com/ThomasDev-de "ThomasDev-de (19 commits)")

---

Tags

customizationjavascriptjquerylazylazy-loading

### Embed Badge

![Health badge](/badges/webcito-query-lazy/health.svg)

```
[![Health](https://phpackages.com/badges/webcito-query-lazy/health.svg)](https://phpackages.com/packages/webcito-query-lazy)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)