{"id":13426886,"url":"https://github.com/tuupola/lazyload","last_synced_at":"2025-12-12T05:53:45.292Z","repository":{"id":448987,"uuid":"71972","full_name":"tuupola/lazyload","owner":"tuupola","description":"Vanilla JavaScript plugin for lazyloading images ","archived":false,"fork":false,"pushed_at":"2023-12-05T01:36:15.000Z","size":5053,"stargazers_count":8767,"open_issues_count":109,"forks_count":2221,"subscribers_count":304,"default_branch":"2.x","last_synced_at":"2025-05-06T08:50:57.580Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://appelsiini.net/projects/lazyload/","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/tuupola.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2008-11-05T16:55:49.000Z","updated_at":"2025-05-03T09:34:03.000Z","dependencies_parsed_at":"2024-06-18T11:21:04.460Z","dependency_job_id":"027da4d1-3205-4d0a-8962-86afbbed3dc2","html_url":"https://github.com/tuupola/lazyload","commit_stats":{"total_commits":35,"total_committers":7,"mean_commits":5.0,"dds":"0.19999999999999996","last_synced_commit":"d3ad81c12332a0f950c6c703ff975b60350405a4"},"previous_names":["tuupola/jquery_lazyload"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuupola%2Flazyload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuupola%2Flazyload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuupola%2Flazyload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tuupola%2Flazyload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tuupola","download_url":"https://codeload.github.com/tuupola/lazyload/tar.gz/refs/heads/2.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253596289,"owners_count":21933538,"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-07-31T00:01:47.544Z","updated_at":"2025-12-12T05:53:44.756Z","avatar_url":"https://github.com/tuupola.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Table of Contents"],"sub_categories":["Image Libraries"],"readme":"# Lazy Load Remastered\n\nLazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading.\n\nThis is a modern vanilla JavaScript version of the original [Lazy Load](https://github.com/tuupola/jquery_lazyload) plugin. It uses [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to observe when the image enters the browsers viewport. Original code was inspired by [YUI ImageLoader](https://yuilibrary.com/yui/docs/imageloader/) utility by Matt Mlinac. New version loans heavily from a [blog post](https://deanhume.com/Home/BlogPost/lazy-loading-images-using-intersection-observer/10163) by Dean Hume.\n\n## Basic Usage\n\nBy default Lazy Load assumes the URL of the original high resolution image can be found in `data-src` attribute. You can also include an optional low resolution placeholder in the `src` attribute.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js\"\u003e\u003c/script\u003e\n\n\u003cimg class=\"lazyload\" data-src=\"img/example.jpg\" width=\"765\" height=\"574\" /\u003e\n\u003cimg class=\"lazyload\" src=\"img/example-thumb.jpg\" data-src=\"img/example.jpg\" width=\"765\" height=\"574\" /\u003e\n```\n\nWith the HTML in place you can then initialize the plugin using the factory method. If you do not pass any settings or image elements it will lazyload all images with class `lazyload`.\n\n```js\nlazyload();\n```\n\nIf you prefer you can explicitly pass the image elements to the factory. Use this for example if you use different class name.\n\n```js\nlet images = document.querySelectorAll(\".branwdo\");\nlazyload(images);\n```\n\nIf you prefer you can also use the plain old constructor.\n\n```js\nlet images = document.querySelectorAll(\".branwdo\");\nnew LazyLoad(images);\n```\n\nThe core IntersectionObserver can be configured by passing an additional argument\n\n```js\nnew LazyLoad(images, {\n     root: null,\n     rootMargin: \"0px\",\n     threshold: 0\n});\n```\n\n## Additional API\n\nTo use the additional API you need to assign the plugin instance to a variable.\n\n```js\nlet lazy = lazyload();\n```\n\nTo force loading of all images use `loadimages()`.\n\n```js\nlazy-\u003eloadImages();\n```\n\nTo destroy the plugin and stop lazyloading use `destroy()`.\n\n```js\nlazy-\u003edestroy();\n```\n\nNote that `destroy()` does not load the out of viewport images. If you also\nwant to load the images use `loadAndDestroy()`.\n\n```js\nlazy-\u003eloadAndDestroy();\n```\n\nAdditional API is not avalaible with the jQuery wrapper.\n\n## jQuery Wrapper\n\nIf you use jQuery there is a wrapper which you can use with the familiar old syntax. Note that to provide BC it uses `data-original` by default. This should be a drop in replacement for the previous version of the plugin.\n\n```html\n\u003cimg class=\"lazyload\" data-original=\"img/example.jpg\" width=\"765\" height=\"574\"\u003e\n\u003cimg class=\"lazyload\" src=\"img/example-thumb.jpg\" data-original=\"img/example.jpg\" width=\"765\" height=\"574\"\u003e\n```\n\n```js\n$(\"img.lazyload\").lazyload();\n```\n\n## Cookbook\n\n### Blur Up Images\n\nLow resolution placeholder ie. the \"blur up\" technique. You can see this in action [in this blog entry](https://appelsiini.net/2017/trilateration-with-n-points/). Scroll down to see blur up images.\n\n```html\n\u003cimg class=\"lazyload\"\n     src=\"thumbnail.jpg\"\n     data-src=\"original.jpg\"\n     width=\"1024\" height=\"768\" /\u003e\n```\n\n```html\n\u003cdiv class=\"lazyload\"\n     style=\"background-image: url('thumbnail.jpg')\"\n     data-src=\"original.jpg\" /\u003e\n```\n\n### Responsive Images\n\nLazyloaded [Responsive images](https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/) are supported via `data-srcset`. If browser does not support `srcset` and there is no polyfill the image from `data-src` will be shown.\n\n```html\n\u003cimg class=\"lazyload\"\n     src=\"thumbnail.jpg\"\n     data-src=\"large.jpg\"\n     data-srcset=\"small.jpg 480w, medium.jpg 640w, large.jpg 1024w\"\n     width=\"1024\" height=\"768\" /\u003e\n```\n\n```html\n\u003cimg class=\"lazyload\"\n     src=\"thumbnail.jpg\"\n     data-src=\"normal.jpg\"\n     data-srcset=\"normal.jpg 1x, retina.jpg 2x\"\n     width=\"1024\" height=\"768\" /\u003e\n```\n\n\n### Inlined Placeholder Image\n\nTo reduce the amount of request you can use data uri images as the placeholder.\n\n```html\n\u003cimg src=\"data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=\"\n     data-src=\"original.jpg\"\n     width=\"1024\" height=\"768\" /\u003e\n```\n\n## Install\n\nThis is still work in progress. You can install beta version with yarn or npm.\n\n```\n$ yarn add lazyload\n$ npm install lazyload\n```\n\n# License\n\nAll code licensed under the [MIT License](http://www.opensource.org/licenses/mit-license.php). All images licensed under [Creative Commons Attribution 3.0 Unported License](http://creativecommons.org/licenses/by/3.0/deed.en_US). In other words you are basically free to do whatever you want. Just don't remove my name from the source.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuupola%2Flazyload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftuupola%2Flazyload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftuupola%2Flazyload/lists"}