{"id":19936281,"url":"https://github.com/sourcey/recliner","last_synced_at":"2026-03-12T17:39:58.219Z","repository":{"id":20513354,"uuid":"23792050","full_name":"sourcey/recliner","owner":"sourcey","description":"A lightweight production ready jQuery plugin for lazy loading images and other dynamic content","archived":false,"fork":false,"pushed_at":"2024-12-14T09:23:55.000Z","size":35,"stargazers_count":51,"open_issues_count":4,"forks_count":21,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-29T17:08:40.566Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://sourcey.com/recliner","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sourcey.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}},"created_at":"2014-09-08T13:39:07.000Z","updated_at":"2023-12-11T07:57:27.000Z","dependencies_parsed_at":"2024-12-26T12:06:30.654Z","dependency_job_id":"0c78bce5-23d0-44c2-87cd-6a16879d6029","html_url":"https://github.com/sourcey/recliner","commit_stats":{"total_commits":20,"total_committers":4,"mean_commits":5.0,"dds":0.25,"last_synced_commit":"9b70e7f4a773688e2f6d09e1aee8a6afc8cbcf1a"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourcey%2Frecliner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourcey%2Frecliner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourcey%2Frecliner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sourcey%2Frecliner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sourcey","download_url":"https://codeload.github.com/sourcey/recliner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406091,"owners_count":20933803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-12T23:24:50.031Z","updated_at":"2026-03-12T17:39:53.183Z","avatar_url":"https://github.com/sourcey.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Recliner.js\n   \nRecliner is a super lightweight (1KB) jQuery plugin for lazy loading images, iframes and other dynamic (AJAX) content. Being lazy never felt so good, just hook it up, and start sippin' those margaritas!\n\nThe script was born out of necessity when one of our clients came to us with massive scroll lag on one of their media heavy mobile news sites. It turned out that `lazy-load-xt` was the culprit, so naturally we tested the other lazy load scripts out there but **none** of them met our simple criteria:\n\n* Lightweight\n* Sets stateful CSS classes on elements\n* Ability to override event callbacks for custom behaviour\n* Can load *any* dynamic content (images, iframes, AJAX) \n* Mobile friendly\n* Printer friendly\n\nRecliner is currently used on some very high traffic sites, so it's well tested and production ready. \n\n## Demo\n\nFor more information and a live demo see the project page: [http://sourcey.com/recliner](http://sourcey.com/recliner)\n\n## Installation\n\nIf you use `bower` then type:\n\n```bash\nbower install recliner\n```\n\nOr if you like using `npm` then go ahead and type:\n\n```bash\nnpm install jquery-recliner\n```\n\nOtherwise, just download `recliner.min.js` and stick it in your assets folder :)\n\n## Usage\n\nAdd jQuery (2.x or 1.x) and Recliner to your HTML source:\n\n```html\n\u003cscript src=\"//code.jquery.com/jquery-2.1.4.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"recliner.min.js\"\u003e\u003c/script\u003e\n```\n\nBind Recliner on elements with the `.lazy` class:\n\n```javascript\n$(\".lazy\").recliner({\n    attrib: \"data-src\", // selector for attribute containing the media src\n    throttle: 300,      // millisecond interval at which to process events\n    threshold: 100,     // scroll distance from element before its loaded\n    printable: true,    // be printer friendly and show all elements on document print\n    live: true          // auto bind lazy loading to ajax loaded elements\n});\n```\n\nYou can also progrmatically trigger an update to check for new elements to be loaded:\n\n```javascript\n$(window).trigger(\"lazyupdate\");\n```\n\nRecliner can be used to load a range of different dynamic content. \n\n##### Images\n\n**Note:** It's a good idea to specify image dimensions explicitly so your page height doesn't go berserk as lazy content is loaded into the DOM.\n\n```html\n\u003cimg src=\"some-placeholder-image.png\" data-src=\"image-to-lazy-load.png\" class=\"lazy\" width=\"333\" height=\"333\" /\u003e \n```\n\n##### Iframes\n\n```html\n\u003ciframe data-src=\"http://sourcey.com\" width=\"333\" height=\"333\" class=\"lazy\" frameborder=\"0\" vspace=\"0\" hspace=\"0\"\u003e\u003c/iframe\u003e\n```\n\n##### AJAX\n\n```html\n\u003cdiv data-src=\"http://sourcey.com\" class=\"lazy\" style=\"width:333px;height:333px\"\u003e\n    Loading, be patient damnit!\n\u003c/div\u003e\n```\n\n## Callback API\n\nRecliner exposes a simple event based API so you can implement your own custom behaviour using callbacks:\n\n##### lazyload\n\nThe `lazyload` event will be triggered on elements that are about to be loaded.\n\n```javascript\n$(document).on('lazyload', '.lazy', function() {\n    var $e = $(this);\n    // do something with the element to be loaded...\n    console.log('lazyload', $e);\n});\n```\n    \n##### lazyshow\n\nThe `lazyshow` event will be triggered on elements after they have been loaded.\n    \n```javascript\n$(document).on('lazyshow', '.lazy', function() {\n    var $e = $(this);\n    // do something with the loaded element...\n    console.log('lazyshow', $e);\n});\n```\n\n## Styling and Animations\n\nRecliner will set the following stateful CSS classes on your elements:\n\n* `lazy-loading`: Set while the element is being loaded\n* `lazy-loaded`: Set when the element has loaded\n\nUsing the stateful classes you can add some fancy transitions to your images:\n\n```css\nimg {\n  opacity: 0;\n  transition: opacity .333s ease-in;\n}\n\nimg.lazy-loaded {\n  opacity: 1;\n} \n```\n\n## Contributing\n\n1. Fork it\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create new Pull Request\n\n## Issues\n\nIf you find any bugs please use the [Github issue tracker](https://github.com/sourcey/recliner/issues).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsourcey%2Frecliner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsourcey%2Frecliner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsourcey%2Frecliner/lists"}