{"_id":"@edwinbos/laziness","_rev":"6-e3ee6f2ba341c57443445b827d51449a","name":"@edwinbos/laziness","dist-tags":{"latest":"0.4.4"},"versions":{"0.4.0":{"name":"@edwinbos/laziness","version":"0.4.0","description":"Lazy loading of images using the Interaction Observer API that is providing observing changes asynchronously","main":"lazyload.js","repository":{"type":"git","url":"git+https://github.com/edwinbos/laziness.git"},"keywords":["lazyload"],"author":{"name":"Edwin Bos"},"license":"ISC","bugs":{"url":"https://github.com/edwinbos/laziness/issues"},"homepage":"https://www.edwinbos.nl/laziness/","gitHead":"2589ec4782313871419d468840e43d28c3944350","_id":"@edwinbos/laziness@0.4.0","_npmVersion":"5.6.0","_nodeVersion":"9.3.0","_npmUser":{"name":"edwinbos","email":"edwinbos1@gmail.com"},"dist":{"integrity":"sha512-D78iC37rKTrOuJFeGddRzAS+iX8GYU3gjxcx5dHA++PoyQWnxrcrWQeScx+cI02S2gkXkYjvsvhMWAfa/fohEA==","shasum":"20876912b83884c53504d1d8185171e2cb608a41","tarball":"https://registry.npmjs.org/@edwinbos/laziness/-/laziness-0.4.0.tgz","fileCount":3,"unpackedSize":6350,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIChq4ng82qAY5PdzZtBdkrKulK6c+xAvkcg3/+aKBb4iAiArJMjL77Oh+RXmQYW0wMZqAOkaMFkaoGcuMO8AO4f1dQ=="}]},"maintainers":[{"name":"edwinbos","email":"edwinbos1@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/laziness_0.4.0_1519929566475_0.876186712693436"},"_hasShrinkwrap":false},"0.4.2":{"name":"@edwinbos/laziness","version":"0.4.2","description":"Lazy loading of images using the Interaction Observer API that is providing observing changes asynchronously","main":"lazyload.js","repository":{"type":"git","url":"git+https://github.com/edwinbos/laziness.git"},"keywords":["lazyload"],"author":{"name":"Edwin Bos"},"license":"ISC","bugs":{"url":"https://github.com/edwinbos/laziness/issues"},"homepage":"https://www.edwinbos.nl/laziness/","gitHead":"53c71a5f48de608d03aabd154ee62b09cb71b30f","_id":"@edwinbos/laziness@0.4.2","_npmVersion":"5.6.0","_nodeVersion":"9.3.0","_npmUser":{"name":"edwinbos","email":"edwinbos1@gmail.com"},"dist":{"integrity":"sha512-BTebC2l9K3lKor2mnzLXYQxZtj6aEFHJYCqHppBVHNrOymtmuscBi2H5rU0sxRfjsgfXEj5dVhToJTUW1eE6Gg==","shasum":"1fd40c2a5358d396b7253872e2475bf6fb209022","tarball":"https://registry.npmjs.org/@edwinbos/laziness/-/laziness-0.4.2.tgz","fileCount":3,"unpackedSize":6354,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZIamHpB/PcIJGNR+tQ4dQPRXINp3jM9LtkhNq/r/WXwIhALc2rAs5h6qqbFc93cHD26RPey++cB2ry+a66w4WxT0L"}]},"maintainers":[{"name":"edwinbos","email":"edwinbos1@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/laziness_0.4.2_1519929813808_0.5191881664767701"},"_hasShrinkwrap":false},"0.4.3":{"name":"@edwinbos/laziness","version":"0.4.3","description":"Lazy loading of images using the Interaction Observer API that is providing observing changes asynchronously","main":"lazyload.js","repository":{"type":"git","url":"git+https://github.com/edwinbos/laziness.git"},"keywords":["lazyload"],"author":{"name":"Edwin Bos"},"license":"ISC","bugs":{"url":"https://github.com/edwinbos/laziness/issues"},"homepage":"https://www.edwinbos.nl/laziness/","gitHead":"f6e409fa4180c7fd5b3164ca99fa649aeba686db","_id":"@edwinbos/laziness@0.4.3","_npmVersion":"5.6.0","_nodeVersion":"9.3.0","_npmUser":{"name":"edwinbos","email":"edwinbos1@gmail.com"},"dist":{"integrity":"sha512-niIAnc2hzZZXHo1N+IwFnOR7jXZZlU+Jzt27qjkHkZNL5O3yj6DJTsHAQ9nOrb6F21jyXXYtMyZT3WoNd0UDxA==","shasum":"3574a4ff6ce4a9e6c9ed0aad3df0eb991047574f","tarball":"https://registry.npmjs.org/@edwinbos/laziness/-/laziness-0.4.3.tgz","fileCount":3,"unpackedSize":6803,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFE8ZYlKbv/3VjUvw+/ttplKK5kP9a7uMX5oufPvJbuJAiBnQ22tBfuO02Ih482Z17Xs4B0yQAML7Z+0JChSOr/7iA=="}]},"maintainers":[{"name":"edwinbos","email":"edwinbos1@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/laziness_0.4.3_1520164177498_0.3605970207503446"},"_hasShrinkwrap":false},"0.4.4":{"name":"@edwinbos/laziness","version":"0.4.4","description":"Lazy loading of images using the Interaction Observer API that is providing observing changes asynchronously","main":"lazyload.js","repository":{"type":"git","url":"git+https://github.com/edwinbos/laziness.git"},"keywords":["lazyload"],"author":{"name":"Edwin Bos"},"license":"ISC","bugs":{"url":"https://github.com/edwinbos/laziness/issues"},"homepage":"https://www.edwinbos.nl/laziness/","gitHead":"b4e7e834da38f105e45259f00091b11c4868f019","_id":"@edwinbos/laziness@0.4.4","_npmVersion":"5.6.0","_nodeVersion":"9.3.0","_npmUser":{"name":"edwinbos","email":"edwinbos1@gmail.com"},"dist":{"integrity":"sha512-z/aQiitxAiijW2X7RIdwSjQyYVbC8gLVrDeAo1dml6cN8OaSjhaTb98jPtLDX3MZWjRqu1/WvyQiFtS33rnqsw==","shasum":"ba3ba867fe87f7404e6a038d1e25e7a069c9f845","tarball":"https://registry.npmjs.org/@edwinbos/laziness/-/laziness-0.4.4.tgz","fileCount":3,"unpackedSize":6779,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEgsD/omL9hmDszxLSzOmBlwUkY4nrRNmtMvhzEx8eD2AiEA15ZV0Sy8zpOiZIQ/DUgBDIlathkB1pLu930bONmk/dg="}]},"maintainers":[{"name":"edwinbos","email":"edwinbos1@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/laziness_0.4.4_1520164355707_0.9122917113762428"},"_hasShrinkwrap":false}},"time":{"created":"2018-03-01T18:39:26.415Z","0.4.0":"2018-03-01T18:39:26.670Z","modified":"2022-04-05T06:45:13.219Z","0.4.2":"2018-03-01T18:43:33.853Z","0.4.3":"2018-03-04T11:49:37.543Z","0.4.4":"2018-03-04T11:52:35.768Z"},"maintainers":[{"name":"edwinbos","email":"edwinbos1@gmail.com"}],"description":"Lazy loading of images using the Interaction Observer API that is providing observing changes asynchronously","homepage":"https://www.edwinbos.nl/laziness/","keywords":["lazyload"],"repository":{"type":"git","url":"git+https://github.com/edwinbos/laziness.git"},"author":{"name":"Edwin Bos"},"bugs":{"url":"https://github.com/edwinbos/laziness/issues"},"license":"ISC","readme":"# Laziness - A lazyload javascript plugin\n![Lazines - Lazyload of images](https://www.edwinbos.nl/laziness/assets/img/laziness.png)\n\n## Lazyload images with Laziness\nLazy loading of images using the Interaction Observer API that is providing observing changes asynchronously.\n\n### Example\nSee the [Laziness demo](https://www.edwinbos.nl/laziness/).\n\n### How to use Laziness\nAdd laziness to your head:\n\n```html\n<script type=\"text/javascript\" src=\"assets/js/laziness.js\"></script>\n```\n\nAnd call the plugin:\n```javascript\ndocument.addEventListener('DOMContentLoaded', function() {\n    lazyLoad.init({\n        rootMargin: '300px 0px 0px 0px', // margin around the root\n        threshold: 0 // a value of 1.0 means that the threshold isn't considered passed until every pixel is visible\n    });\n});\n```\n\n#### Default images\nUse *data-src* instead of *src*:\n```html\n<img alt=\"Loch Ness\"\n     class=\"lazyload\"\n     data-src=\"https://www.example.com/image.jpg\"\n/>\n```\n\nFor valid HTML use a transparent pixel:\n```html\n<img alt=\"Loch Ness\"\n     class=\"lazyload\"\n     data-src=\"https://www.example.com/image.jpg\"\n     src=\"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==\"\n/>\n```\n\n> Images that are in the viewport but not visible are not loaded. When the image becomes visible the image is loaded.\n\nUse lazyload on <picture>-element:\n```html\n<picture class=\"lazyload\">\n    <source media=\"(max-width: 799px)\" data-srcset=\"https://www.example.com/image-1.jpg\">\n    <source media=\"(min-width: 800px)\" data-srcset=\"https://www.example.com/image-2.jpg\">\n    <img data-src=\"https://www.example.com/image-1.jpg\" alt=\"Loch Ness\">\n</picture>\n```\n\nUse lazyload on src-set. Use *data-srcset* instead of *srcset*:\n```html\n<img data-srcset=\"https://www.example.com/550.jpg 550w,\n                  https://www.example.com/980.jpg 980w,\n                  https://www.example.com/1141.jpg 1141w,\n                  https://www.example.com/1509.jpg 1509w\"\n     data-sizes=\"(max-width: 550px) 550px,\n                 (max-width: 980px) 980px,\n                 (max-width: 1141px) 1141px,\n                 1509px\"\n     data-src=\"https://www.example.com/550.jpg\" alt=\"Loch Ness\" class=\"lazyload\"\n/>\n```\n\n#### Background images\nBackground images works the same as default images, if set on a non img-element.\n```html\n<div data-src=\"https://www.example.com/image.jpg\"></div>\n```\n\n### Browser support for Laziness\nIf the browser supports the InteractionObserver the API is used, but if the browser not supports the InteractionObserver all the images are placed on load.\n\n|Browser|Using InteractionObserver|Just place the images|\n|---|---|---|\n|Chrome|51+|-|\n|Firefox|55+|-|\n|Edge|16+|15+|\n|Safari|Not supported|9,10,11?|\n|Opera|38+|-|\n\nMore about the browser support of IntersectionObserver: https://caniuse.com/#search=IntersectionObserver","readmeFilename":"README.md","users":{"edwinbos":true}}