{"id":15687001,"url":"https://github.com/webistomin/posthtml-lazyload","last_synced_at":"2025-05-07T18:52:57.070Z","repository":{"id":35008888,"uuid":"195668604","full_name":"webistomin/posthtml-lazyload","owner":"webistomin","description":":sparkles: PostHTML plugin to add native lazyload attribute","archived":false,"fork":false,"pushed_at":"2023-01-07T07:33:54.000Z","size":1041,"stargazers_count":9,"open_issues_count":13,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-20T08:18:08.002Z","etag":null,"topics":["lazy-loading","lazyload","lazyload-images","post-processing","posthtml-lazyload"],"latest_commit_sha":null,"homepage":"https://mathiasbynens.be/demo/img-loading-lazy","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/webistomin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["webistomin"]}},"created_at":"2019-07-07T15:39:27.000Z","updated_at":"2023-03-09T00:39:46.000Z","dependencies_parsed_at":"2023-01-15T11:55:34.230Z","dependency_job_id":null,"html_url":"https://github.com/webistomin/posthtml-lazyload","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webistomin%2Fposthtml-lazyload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webistomin%2Fposthtml-lazyload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webistomin%2Fposthtml-lazyload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webistomin%2Fposthtml-lazyload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webistomin","download_url":"https://codeload.github.com/webistomin/posthtml-lazyload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252939670,"owners_count":21828753,"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":["lazy-loading","lazyload","lazyload-images","post-processing","posthtml-lazyload"],"created_at":"2024-10-03T17:42:27.445Z","updated_at":"2025-05-07T18:52:57.032Z","avatar_url":"https://github.com/webistomin.png","language":"JavaScript","funding_links":["https://github.com/sponsors/webistomin"],"categories":[],"sub_categories":[],"readme":"# posthtml-lazyload \u003cimg align=\"right\" width=\"220\" height=\"200\" title=\"PostHTML logo\" src=\"http://posthtml.github.io/posthtml/logo.svg\"\u003e\n\n[![NPM][npm]][npm-url]\n![npm](https://img.shields.io/npm/dt/posthtml-lazyload.svg)\n[![Deps][deps]][deps-url]\n[![DevDeps][dev-deps]][dev-deps-url]\n[![Build][build]][build-badge]\n\n It is possible to natively lazy load content through the `loading=\"lazy\"` attribute on images and iframes, and [it’s already possible](https://caniuse.com/#feat=loading-lazy-attr) on last 2 versions modern browsers except Safari. This plugin will do it for you!\n \n Read more in [Addy Osmani Blog](https://addyosmani.com/blog/lazy-loading/).\n \n **⭐️ Star me on GitHub — it helps!**\n \nBefore:\n``` html\n \u003cimg \n   src=\"http://posthtml.github.io/posthtml/logo.svg\" \n   alt=\"PostHTML\" \n   width=\"220\"\n   heigth=\"200\" \n   class=\"lazyload\"\n \u003e \n\n\u003ciframe \n   src=\"video-player.html\" \n   class=\"lazyload\"\n\u003e\n\u003c/iframe\u003e\n```\n\nAfter:\n``` html\n \u003cimg \n   src=\"http://posthtml.github.io/posthtml/logo.svg\" \n   alt=\"PostHTML\" \n   width=\"220\"\n   heigth=\"200\" \n   class=\"lazyload\"\n   loading=\"lazy\" \u003c---\n \u003e \n\n\u003ciframe \n   src=\"video-player.html\" \n   class=\"lazyload\"\n   loading=\"lazy\" \u003c---\n\u003e\n\u003c/iframe\u003e\n```\n\n## Demo\n[**DEMO**](https://mathiasbynens.be/demo/img-loading-lazy)\n\nIf you are using Chrome lower than 76 make sure you turn on both the `Enable lazy frame loading` and `Enable lazy image loading` flags.\n\n[**CAN I USE**](https://caniuse.com/#feat=loading-lazy-attr)\n\n## Install\n\n```npm\nnpm i posthtml-lazyload --save-dev\n```\n\n## Usage\n\n### Gulp\n\n```npm\nnpm i gulp-posthtml posthtml-lazyload --save-dev\n```\n\n```js\nconst gulp = require('gulp');\nconst postHTML = require('gulp-posthtml');\nconst postHTMLLazyLoad = require('posthtml-lazyload');\n\nconst config = () =\u003e ({\n  plugins: [\n    postHTMLLazyLoad({\n      loading: 'eager',\n      class: 'lazy',\n    }),\n  ],\n});\n\ngulp.task('posthtml', () =\u003e gulp.src('./build/*.html')\n  .pipe(postHTML(config))\n  .pipe(gulp.dest('./build')));\n```\n\n### Webpack\n```npm\nnpm i html-loader posthtml-loader posthtml-lazyload --save-dev\n```\n\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.html$/,\n      use: [\n        'html-loader',\n        {\n          loader: 'posthtml-loader',\n          options: {\n            plugins: [\n              require('posthtml-lazyload')({\n                 loading: 'eager',\n                 class: 'lazy',\n               })\n            ]\n          }\n        }\n      ]\n    }\n  ]\n}\n```\n\n## Options\n\n| Option | Type | description | Possible subsets | Default value |\n| ------ | ------ | ------ | ------ | ------ |\n loading | `string` | Describes loading attribute. | `auto`, `eager`, `lazy` | `lazy` |\n class | `string` | Class of the elements to load lazily | Any valid CSS class name | `lazyload` |\n\n### Contributing\n\nSee [PostHTML Guidelines](https://github.com/posthtml/posthtml/tree/master/docs) and [contribution guide](CONTRIBUTING.md).\n\n### License [MIT](LICENSE)\n\n[npm]: https://img.shields.io/npm/v/posthtml-lazyload.svg\n[npm-url]: https://npmjs.com/package/posthtml-lazyload\n\n[deps]: https://david-dm.org/posthtml/posthtml.svg\n[deps-url]: https://david-dm.org/webistomin/posthtml-lazyload\n\n[dev-deps]: https://david-dm.org/webistomin/posthtml-lazyload/dev-status.svg\n[dev-deps-url]: https://david-dm.org/webistomin/posthtml-lazyload?type=dev\n\n[style]: https://img.shields.io/badge/code%20style-standard-yellow.svg\n[style-url]: http://standardjs.com/\n\n[build]: https://github.com/webistomin/posthtml-lazyload/actions/workflows/ci.yml/badge.svg\n[build-badge]: https://github.com/webistomin/posthtml-lazyload/actions/workflows/ci.yml\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebistomin%2Fposthtml-lazyload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebistomin%2Fposthtml-lazyload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebistomin%2Fposthtml-lazyload/lists"}