{"id":13761785,"url":"https://github.com/Novicell/novicell-lazyload","last_synced_at":"2025-05-10T14:30:47.173Z","repository":{"id":51872517,"uuid":"108535291","full_name":"Novicell/novicell-lazyload","owner":"Novicell","description":"Small image lazyloading library in pure vanilla javascript, highly customizable","archived":false,"fork":false,"pushed_at":"2023-06-06T02:54:44.000Z","size":237,"stargazers_count":2,"open_issues_count":5,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-13T05:12:36.664Z","etag":null,"topics":["images","lazyload","lazysizes","optimization","responsive"],"latest_commit_sha":null,"homepage":"","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/Novicell.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-10-27T10:58:36.000Z","updated_at":"2022-10-26T11:51:29.000Z","dependencies_parsed_at":"2024-01-17T16:58:04.761Z","dependency_job_id":"cecdf174-bcce-4a00-b9b8-ad0d5a99240d","html_url":"https://github.com/Novicell/novicell-lazyload","commit_stats":{"total_commits":77,"total_committers":9,"mean_commits":8.555555555555555,"dds":0.5324675324675325,"last_synced_commit":"37f46aac49fc6640bbeaea8e1ec023d07ebecda2"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fnovicell-lazyload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fnovicell-lazyload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fnovicell-lazyload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Novicell%2Fnovicell-lazyload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Novicell","download_url":"https://codeload.github.com/Novicell/novicell-lazyload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224970216,"owners_count":17400292,"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":["images","lazyload","lazysizes","optimization","responsive"],"created_at":"2024-08-03T14:00:28.353Z","updated_at":"2024-11-16T20:30:45.139Z","avatar_url":"https://github.com/Novicell.png","language":"JavaScript","funding_links":[],"categories":["Libraries \u0026 Plugins"],"sub_categories":["Image lazyloading"],"readme":"# 💤 Novicell Lazyload\n**Image lazyloading script in vanilla javascript**\n\n![npm package](https://img.shields.io/npm/v/novicell-lazyload.svg?colorB=c12127)\n![npm downloads](https://img.shields.io/npm/dt/novicell-lazyload.svg?label=npm%20downloads\u0026colorB=blue)\n![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/novicell-lazyload.svg)\n\n## Usage\nWritten in pure Vanilla JS, depends on [lazysizes](https://github.com/aFarkas/lazysizes/) and some kind of serverside image processor as the [imageprocessor.net](http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/). It ships with examples for easy implementation with the [novicell-frontend setup](https://github.com/Novicell/novicell-frontend).\n\n### Install with npm\n\n```sh\nnpm install novicell-lazyload --save\n```\nOr simply:\n```sh\nnpm i novicell-lazyload\n```\n\n## Setup\nImport novicell-lazyload as a module in your javascript file that observes the images. Also add debounce from lodash.\n\n```javascript\nimport NovicellLazyLoad from '../js/lazy-images';\nimport debounce from 'lodash/debounce';\n\nconst lazy = new NovicellLazyLoad({\n    includeWebp: true,\n    includeRetina: true\n});\n\ndocument.addEventListener('lazybeforeunveil', function(event) {\n    lazy.lazyLoad(event);\n}, true);\n\nwindow.addEventListener('resize', debounce(() =\u003e {\n    lazy.checkImages();\n}, 100), false);\n```\n## Options\n`includeWebp: true/false` Default true. Optional, when set to true, Novicell-lazyload will still check if the client's browser supports WebP. \n\n`includeRetina: true/false` Default true. Optional, when set to true, Novicell-lazyload will check the `devicePixelRatio` and add required `srcset` by multiplying the `height` and `width` with the `devicePixelRatio`. When using `lazyload-bg` it will add the `srcset` with `image-set` in CSS.\n\n## Options\n\n```js\nwindow.lazySizesConfig = {\n    useWebp: true, // Boolean (defaults to true). If true is used it will still check if browser supports WebP format and then add it\n    includeRetina: true // Boolean (defaults to true). If true is used it will check the devicePixelRatio and add required srcset by multiplying the height and width with the devicePixelRatio\n}\n```\n\n## Implementation\nThis script *lazyloads* by swapping the `data-src` or `data-srcset` to an actual `src` or `srcset`.\nFor all implementations you should have a `lazyload`-class and `data-query-obj` on the image. Everything inside the data-query-obj is general settings that is applied on every src in the srcset as a querystring\".\n\n**NOTE:** Add the `format` before the `quality`, for utilizing the quality feature.\n\nFor extra plugins and complete feature list, please reference the [lazysizes documentation](https://github.com/aFarkas/lazysizes/).\n\n### Images with fixed sizes (lazyload)\nFor images with fixed sizes we recommend using a specific srcset, as this is the fastest.\n\n```html\n\u003cimg class=\"lazyload\" data-src=\"/dist/images/test.jpg\" alt=\"Cool image\" data-query-obj='{\"mode\":\"crop\", \"quality\":\"70\", \"center\": \"0.8,0.3\"}'\ndata-srcset=\"/dist/images/test.jpg?width=1500\u0026heightratio=0.6 1000w,\n             /dist/images/test.jpg?width=900\u0026heightratio=0.6 800w,\n             /dist/images/test.jpg?width=400\u0026heightratio=1 500w\"/\u003e\n```\n\n### Images with variable sizes (lazyload-measure)\nFor images with variable sizes, eg. a full width banner with a fixed height, or just an image added in the CMS inside a random grid column, we recommend the \"measure\"-feature.\n\nThis feature will get the size of the parent element, and add it as query strings for this image.\n\n```html\n\u003cimg class=\"lazyload lazyload-measure\" data-src=\"/dist/images/test.jpg\" alt=\"Cool image\" data-query-obj='{\"mode\":\"crop\", \"quality\":\"70\", \"center\": \"0.8,0.3\"}'/\u003e\n```\n\n### Using height ratio (or auto height)\nIf you just want auto height you can add the attribute ´data-height-ratio=\"0\"´\nYou can also pass a height-ratio, this will set the size accordingly.\n\n#### Useful height ratios: \n\n`0`: Inherit height from parent 👨‍👦\n\n`0.5`: Landscape image 🖼\n\n`0.5625`: 16:9 format (great for video) 📺\n\n`0.625`: 16:10 format 🖥\n\n`1`: Square image 🔲\n\n`2`: Portait image 📸\n\n\n**NOTE:** If you want to keep the image original height, you can pass `data-query-obj='{\"height\": \"auto\"}'`.\n\n```html\n\u003cimg class=\"lazyload lazyload-measure\" data-src=\"/dist/images/test.jpg\" alt=\"Cool image\" data-height-ratio=\"0\" data-query-obj='{\"mode\":\"crop\", \"quality\":\"70\", \"center\": \"0.8,0.3\"}' /\u003e\n```\n\n\n### Background images (lazyload-bg)\nThis uses the \"measure\"-feature only adding the image as a background image on the parent element, instead of an actual `\u003cimg\u003e`-tag.\n\n```html\n\u003cimg class=\"lazyload lazyload-measure lazyload-bg\" data-src=\"/dist/images/test.jpg\" alt=\"Cool image\" data-query-obj='{\"mode\":\"crop\", \"quality\":\"70\", \"center\": \"0.8,0.3\"}'/\u003e\n```\n\n## Building and developing\n\nRun the demo project\n```\nnpm run dev\n```\n\nBuild the package into `dist` folder\n\n```\nnpm run build\n```\n\nPreview the production build\n\n```\nnpm run preview\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNovicell%2Fnovicell-lazyload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNovicell%2Fnovicell-lazyload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNovicell%2Fnovicell-lazyload/lists"}