{"id":24501039,"url":"https://github.com/thomasdev-de/query-lazy","last_synced_at":"2026-04-29T19:05:00.825Z","repository":{"id":205785043,"uuid":"713850684","full_name":"ThomasDev-de/query-lazy","owner":"ThomasDev-de","description":"A simple jQuery plugin to load elements only when they are needed during scrolling.","archived":false,"fork":false,"pushed_at":"2025-06-22T06:25:51.000Z","size":791,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-01T23:18:42.030Z","etag":null,"topics":["customization","javascript","jquery","lazy","lazy-loading"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ThomasDev-de.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-11-03T11:16:41.000Z","updated_at":"2025-08-04T20:50:07.000Z","dependencies_parsed_at":"2023-11-10T21:33:19.854Z","dependency_job_id":null,"html_url":"https://github.com/ThomasDev-de/query-lazy","commit_stats":null,"previous_names":["thomasdev-de/query-lazy"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ThomasDev-de/query-lazy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fquery-lazy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fquery-lazy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fquery-lazy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fquery-lazy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ThomasDev-de","download_url":"https://codeload.github.com/ThomasDev-de/query-lazy/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fquery-lazy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32439355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T18:12:22.909Z","status":"ssl_error","status_checked_at":"2026-04-29T18:11:33.322Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["customization","javascript","jquery","lazy","lazy-loading"],"created_at":"2025-01-21T22:22:58.197Z","updated_at":"2026-04-29T19:05:00.800Z","avatar_url":"https://github.com/ThomasDev-de.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# jQuery-lazy\n\n![header](./demo/img/jquery-lazy.png)\n\nA simple jQuery plugin to load elements only when they are needed during scrolling.\n\n## Introduction\n\nSet the attribute `[data-lazy-src]` to an image so that the plugin knows which image should be loaded. It can also be\nset to other elements to load the background image for the parent element.  \nIf the `[data-lazy-url]` attribute is set to an element, the content is fetched using ajax.\n\nMake sure that the elements that are loaded via the plugin have a minimum height;\notherwise it can happen that all elements are loaded at once.  \nFor example like this:\n\n```css\n .lazy-waiting {\n    display: block;\n    visibility: hidden;\n    min-height: 300px;\n}\n```\n\nThe plugin provides you with 4 classes to handle this.\n\n1. `lazy-waiting` This class receives every element that is initialized via the plugin.\n2. `lazy-loading` This class is assigned to each element via which the plugin is requested to load.\n3. `lazy-done` This class is set on every element that has finished loading.\n\nAnother example:\n\n```css\nbody.lazy-done {\n    background-size: cover;\n    background-repeat: no-repeat;\n    background-attachment: fixed;\n}\n```\n\n## Installation\n\n1. Download the plugin [uncompressed](./dist/jquery-lazy.js), [minified](./dist/jquery-lazy.min.js)\n2. Or load the plugin via composer\n\n```shell\ncomposer require webcito/query-lazy:dev-main\n```\n\n3. Include the plugin in your project at the end of the body tag. Make sure that jQuery is loaded first.\n\n```html\n\n\u003cscript src=\"./vendor/components/jquery/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"./dist/jquery-lazy.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nSet the attribute `[data-lazy-{src,url}]` to all elements that should be loaded lazy.\n\n```html\n\n\u003cdiv data-lazy-src=\"path/to/img.file\"\u003e\n    \u003cimg data-lazy-src=\"path/to/img.file\" src=\"\" alt=\"\"/\u003e\n    \u003cdiv data-lazy-url=\"./demo/content.html\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\nInitialize the plugin\n\n```js\n$('[data-lazy-src], [data-lazy-url]').lazy(options);\n```\n\n## Options\n\n| name         | type       | default                                            | description                                                                                                                             |\n|--------------|------------|----------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|\n| recursive    | `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). |\n| classStatic  | `string`   | `'lazy'`                                           | The class is set for each element and is not changed further.                                                                           |\n| classWaiting | `string`   | `'lazy-waiting'`                                   | This class receives every element that is initialized via the plugin.                                                                   |\n| classLoading | `string`   | `'lazy-loading'`                                   | This class is assigned to each element via which the plugin is requested to load.                                                       |\n| classDone    | `string`   | `'lazy-done'`                                      | This class is set on every element that has finished loading.                                                                           |\n| onBeforeLoad | `function` | `(element) =\u003e {}`                                  | The function is triggered before an element receives its content.                                                                       |\n| onLoad       | `function` | `(element, width, height, scrollY, scrollX) =\u003e {}` | The function is triggered when an element has received its content.                                                                     |\n| onError      | `function` | `(element) =\u003e {}`                                  | The function is triggered if an element could not receive its content.                                                                  |\n| onCompleted  | `function` | `() =\u003e {}`                                         | The function is triggered once all elements have received their content.                                                                |\n\n## Events\n\n| name              | params                             | description                                   |\n|-------------------|------------------------------------|-----------------------------------------------|\n| `beforeLoad.lazy` | e                                  | Fires on every element before it is loaded    |\n| `loaded.lazy`     | e, width, height, scrollY, scrollX | Fires on any element after it has been loaded |\n\n## Further information\n\nAfter an element has been loaded, the attributes `data-lazy-src` and `data-lazy-url` are removed from the element.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasdev-de%2Fquery-lazy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomasdev-de%2Fquery-lazy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasdev-de%2Fquery-lazy/lists"}