{"_id":"@dannymoerkerke/lazy-img","_rev":"3-9dbf20807c5c16177f9366ca49a4f2c3","name":"@dannymoerkerke/lazy-img","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@dannymoerkerke/lazy-img","version":"1.0.0","description":"Lazy loading image implemented as a Web Component","author":{"name":"Danny Moerkerke","email":"danny@dannymoerkerke.nl"},"homepage":"https://github.com/DannyMoerkerke/lazy-img","repository":{"type":"git","url":"git+ssh://git@github.com/DannyMoerkerke/lazy-img.git"},"publishConfig":{"access":"public"},"main":"lazy-img.js","directories":{"test":"test"},"scripts":{"start":"ws -p 8080 --spa demo/index.html","test":"ws -p 8080 --spa test/index.html","test:headless":"concurrently \"npm test\" \"sleep 1 && mocha-headless-chrome -f http://localhost:8080/\""},"license":"ISC","devDependencies":{"chai":"^4.2.0","concurrently":"^4.1.0","local-web-server":"^2.6.0","mocha":"^5.2.0","mocha-headless-chrome":"^2.0.1","sinon":"^7.1.1"},"dependencies":{"@webcomponents/webcomponentsjs":"^2.2.0"},"gitHead":"6434d16f3fd6ff84b612c8229153a5e1064d119b","bugs":{"url":"https://github.com/DannyMoerkerke/lazy-img/issues"},"_id":"@dannymoerkerke/lazy-img@1.0.0","_npmVersion":"5.6.0","_nodeVersion":"9.7.1","_npmUser":{"name":"dannymoerkerke","email":"danny@dannymoerkerke.nl"},"dist":{"integrity":"sha512-wJzD5BXKwX+3h8r+9yZ1GjeNmsvqgIjQM1DY7NbM3PIUDeQcpAMfls68tFSGpLpuUgWymenHn57n63SdJ8xMyg==","shasum":"e058ebd27dff4056a28821e1c27bad6a49c5e1b9","tarball":"https://registry.npmjs.org/@dannymoerkerke/lazy-img/-/lazy-img-1.0.0.tgz","fileCount":11,"unpackedSize":641082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcd73yCRA9TVsSAnZWagAAHkAP/1bQFdGxcbfxpF3doV3N\n4uwh8PTTosit+E/4l76Mbb3+pHN+LIdv/g5cmtiRgSVOrSGoaaPnTFd9VVxx\nDub8TPpo9ghrA44VY2iO/kLzVbmZJjHMlHnDg0e5p90Ts61KIBW/oBTfwzXq\nb3KYkLZ122qXxb20Hp3h0oFZv/MwMpgA87qgQPQ0i82jXGVOL8BtMkH9MWmM\nStgHif9s0Bjor8CIhp0cbkom2yBK1FXnujzGjJnQKdmuddRGvWFdv791u7uJ\nK45kf5S/wkmSzyWQWD01KBOSsvNI+GJf6uKKmwur8iXlwd6exuEHa73+V4+e\nNi8W418ODMhJUklOlJFQfeCGLCfux1E/MxcBN/iJ9UdOW8QN8qyujPa9RM6T\niF5uz9aD4GdLnZEg03D9dp3sevOCy+E6KXoxibuN4moeiIrVyl0cPGeKvWl+\nxKHehPJ/nfYio+4wHfj5y61w2LCxICnRLPhR+N5yPEZIIUinNv0pvMerz5Jd\ngwhPSbrJzC6NpqO9/I04Kl9VN5D6clzsoE5lP/zFSAdarhrbrmzBhDsSBiD8\ncM2we1q6nqKxlyAB9NT40Vcg7wYi7YiBk8TENudVxluUpbGu0MBg/MgF2v8e\nw19Mw4VQKbMyoU6eeL1fI8XY5QOMe3Qm9SFyUzNeIy3MAuB9SazCQBMl6S/0\nYib8\r\n=9CIt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDx0XIMxLqWonrmplFrKZ/MgZs1+Wo1zUHtRqG1L5bXsgIhAPsp+aQRDx4sn7kscbQ0EwifstSQeIpEoPaVzdGvIjYZ"}]},"maintainers":[{"name":"dannymoerkerke","email":"danny@dannymoerkerke.nl"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lazy-img_1.0.0_1551351282328_0.7078504245277462"},"_hasShrinkwrap":false},"1.0.1":{"name":"@dannymoerkerke/lazy-img","version":"1.0.1","description":"Lazy loading image implemented as a Web Component","author":{"name":"Danny Moerkerke","email":"danny@dannymoerkerke.nl"},"homepage":"https://github.com/DannyMoerkerke/lazy-img","repository":{"type":"git","url":"git+ssh://git@github.com/DannyMoerkerke/lazy-img.git"},"publishConfig":{"access":"public"},"main":"lazy-img.js","directories":{"test":"test"},"scripts":{"start":"ws -p 8080 --spa demo/index.html","test":"ws -p 8080 --spa test/index.html","test:headless":"concurrently \"npm test\" \"sleep 1 && mocha-headless-chrome -f http://localhost:8080/\""},"license":"ISC","devDependencies":{"chai":"^4.2.0","concurrently":"^4.1.0","local-web-server":"^2.6.0","mocha":"^5.2.0","mocha-headless-chrome":"^2.0.1","sinon":"^7.1.1"},"dependencies":{"@webcomponents/webcomponentsjs":"^2.2.0"},"gitHead":"712756f14736ece317346469110780a6796b12df","bugs":{"url":"https://github.com/DannyMoerkerke/lazy-img/issues"},"_id":"@dannymoerkerke/lazy-img@1.0.1","_npmVersion":"5.6.0","_nodeVersion":"9.7.1","_npmUser":{"name":"dannymoerkerke","email":"danny@dannymoerkerke.nl"},"dist":{"integrity":"sha512-wC17dmFixgTu/C3LS6yo8/hJnkrs6XPbpMTSLgWCvLi/0LBd6p4lkbGtWJHsN931pF+NBvkkz+HvoLw49mJrBQ==","shasum":"f074f7b60aae79e5d7b07b2b40ce984433262734","tarball":"https://registry.npmjs.org/@dannymoerkerke/lazy-img/-/lazy-img-1.0.1.tgz","fileCount":11,"unpackedSize":641135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcd79UCRA9TVsSAnZWagAAV0sQAJzWRpN1WDtcfKymHUQZ\ntFJRuJ8XkVx4ri7EwOqHQ1Hulzelzq4IQtlVPyYt2+zg6sYEAGLrjsBqmJnE\n2cZCYK+vWYLA7BE/YSu0UDQySx6GaI+VEWSuyzcWLDLBCWdzT9lghPOMsd7h\n5itdFR37MZJSZGePNtkbgABF7dP/VewmL/Eh1lMmK3jMZqmfWuBC3mpXQjlL\nUx08ZYHdpy7IgEsKqFVlU1BGB7AZLkxHhGJcG3YyJfueMjV5T1JXgIGXVJob\n+u1CN67hHI76M0r2sTWQUutUngdlYhNfb3dqIXKhPn4XqSGsy5tRfzd1a5Ug\nt/6lPo+Zie/6MuWRxq7SUsLP1bvWG9r6ozUNYzkmfc8XKJpEWTcnbW0utH+x\nv6UWxjK9TotVq2GnI/y9+7PAF4KvxfryADw+uX6xxgqBTmwuyFSGEkmEb4rT\nuRuqdVmPjBP2cFAdoKunz6R50JOAeMa7DIvGY4W5gGH+8Z8kAk/1ph0Fy1ve\nZ4pcQkGBgGqkwzXjIUD8pAR7yGnmDxlhZGY7jd7v7d2SKuB0GAP7SwQc1xW+\nzVURsoWHcGcnbW7Y42R9otr1xaxLZp+ytvzMx6UGh8tWjSCwWfniLDpPCUSm\npQGRuqW6wJy2U1I9Y7JEO42CKiptYkv7VsIQi4uIXa52c4Cqou1FQQeAzp7g\nuDLu\r\n=0iqN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH60uF6jDSiMSMfl2emc6HGTI63EIw9hMAQKdT8zX4//AiEAqwtcw220Okkb9wEFMGL3V9m8u3FG9IrBWDYS/DE7dSA="}]},"maintainers":[{"name":"dannymoerkerke","email":"danny@dannymoerkerke.nl"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lazy-img_1.0.1_1551351636232_0.06380459579461917"},"_hasShrinkwrap":false},"1.0.2":{"name":"@dannymoerkerke/lazy-img","version":"1.0.2","description":"Lazy loading image implemented as a Web Component","author":{"name":"Danny Moerkerke","email":"danny@dannymoerkerke.nl"},"homepage":"https://github.com/DannyMoerkerke/lazy-img","repository":{"type":"git","url":"git+ssh://git@github.com/DannyMoerkerke/lazy-img.git"},"publishConfig":{"access":"public"},"main":"src/lazy-img.js","directories":{"test":"test"},"scripts":{"start":"ws -p 8080 --spa demo/index.html","test":"ws -p 8080 --spa test/index.html","test:headless":"concurrently \"npm test\" \"sleep 1 && mocha-headless-chrome -f http://localhost:8080/\""},"license":"ISC","devDependencies":{"chai":"^4.2.0","concurrently":"^4.1.0","local-web-server":"^2.6.0","mocha":"^5.2.0","mocha-headless-chrome":"^2.0.1","sinon":"^7.1.1"},"dependencies":{"@webcomponents/webcomponentsjs":"^2.2.0"},"gitHead":"b47b82e17475c1b7c48331b3179a193dd18f9c24","bugs":{"url":"https://github.com/DannyMoerkerke/lazy-img/issues"},"_id":"@dannymoerkerke/lazy-img@1.0.2","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-sp9gCQR3LeLDft3NqYru2qDn6wQDrxdQyinCdHZ9TZV3/nTn3SJD7m6OoLUuxTaaoGVhhZN8alPR8zVAemiQow==","shasum":"f2613b75228969295aec3f4ad73937acbf9e96dc","tarball":"https://registry.npmjs.org/@dannymoerkerke/lazy-img/-/lazy-img-1.0.2.tgz","fileCount":4,"unpackedSize":10090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcm5J5CRA9TVsSAnZWagAAyqoP/0gyWUuuTCOg6r8fiOkC\nTqgvjkk1kSWdu/YcuqQJLCkN/zCOIIvJfBrs52LPC1+LhgdVw58y6c5xHHLf\nbsCxWWWjfXhjj6n75Z24A0i7Sk7rvMcEGQ+D9ZfSialktqqG20sO/tt3yXya\nXmuF0Fty7aL1Z6IaN4dXPI2UlO2lALM5RboanysFI24fBbh5IGUObEow5+J0\nHRBQnIATnQ+qUrhQWF8wlAlQl+bmP3m1WCvEfWisPH9QnD+ufgsKEoCX2gdm\nQlnPSUVPQfXAgWjfutSLAKmJb7YIfVYbyB7Yl3h5mK1ByGG90HuMSCCwLm93\nUik28TyZQRykcWOdDPtm2sL1Fqh/B3S14vtzXPP4ixggrwd43Pk/XNMXIsTY\nXTaaQTAGLrs4BNirm/5fObriL2kPsveG13Rh/dBrGM3RB/uC283kEZkNOBBf\nLhrnXKvyzMQd5dA0p01TGnxOy2Pv1+NGiycZdTGUjYR831Sy/ZhF3Iq3DviR\nRbNyKC2dXnY+E03GgBM0HSz+c6FHyHXO7qXgq4EZ31I3edWSnBmbOgr+Fbi1\naaZe47xCqOon//ZphLkQSJhn81f7KzJqStw/iUVpZ+YV5iOepojR7A5QdFWg\nnb2vNQOGqDMNnctrWDhvA2M84EpJLX4uyYF3bJi36IEtFTq8RmbBuTNnCQbz\nJh5B\r\n=Ty2J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBVDB/OufUELyDaIpmwP7BoNO4lmLeuyswvH1ZTwh23UAiEAjen7EW+uGAV8rDncQq5b5Lrtpfli2cOcKZ/fZa/9Ur4="}]},"maintainers":[{"name":"dannymoerkerke","email":"danny@dannymoerkerke.nl"}],"_npmUser":{"name":"dannymoerkerke","email":"danny@dannymoerkerke.nl"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lazy-img_1.0.2_1553699448760_0.8698068725366637"},"_hasShrinkwrap":false}},"time":{"created":"2019-02-28T10:54:42.132Z","1.0.0":"2019-02-28T10:54:42.506Z","modified":"2022-04-05T02:42:24.965Z","1.0.1":"2019-02-28T11:00:36.432Z","1.0.2":"2019-03-27T15:10:48.871Z"},"maintainers":[{"name":"dannymoerkerke","email":"danny@dannymoerkerke.nl"}],"description":"Lazy loading image implemented as a Web Component","homepage":"https://github.com/DannyMoerkerke/lazy-img","repository":{"type":"git","url":"git+ssh://git@github.com/DannyMoerkerke/lazy-img.git"},"author":{"name":"Danny Moerkerke","email":"danny@dannymoerkerke.nl"},"bugs":{"url":"https://github.com/DannyMoerkerke/lazy-img/issues"},"license":"ISC","readme":"## lazy-img Custom Element\nlazy-img is a Custom Element which lazily loads an image once it it fully\nvisible in the browser's viewport.\n\nInternally it uses [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to determine the visibility of\nthe image.\n\nBy default it will only load the image when the placeholder is fully\nvisible after a delay of 500ms to account for when the image becomes\nvisible but is then quickly scrolled out of view. This means the image\nwill only be loaded after the placeholder has been fully visible for at\nleast 500ms.\n\nNote that for the IntersectionObserver to indicate the image is fully\nvisible it needs to be fully visible on **all** sides in the viewport.\nIf the image is very wide for example and its width does not fit in\nthe viewport, it will **not** be considered fully visible and the image will\nnot be loaded.\n\n### Demo page\nFirst run `npm install`, then `npm start` to view the demo page at\n[http://localhost:8080](http://localhost:8080)\n\n### Tests\nRun `npm test` and view the test page at\n[http://localhost:8080](http://localhost:8080)\n\nThis repo also contains the configuration file `wallaby.js` to run the\ntests from your IDE using [Wallaby.js](https://wallabyjs.com/)\n\nTo run the tests from the command line: `npm run test:headless`\n### Usage\nInstall with `npm install @dannymoerkerke/lazy-img`\n\n\n```\n<lazy-img\n          src=\"path/to/img.jpg\"\n          width=\"480\"\n          height=\"320\"\n          delay=\"500\"\n          margin=\"0px\"></lazy-img>\n```\n\nThe `extend-native` branch contains lazy-img as a Custom Element which\nextends the native `<img>` element. It does not need a separate tag but\nonly an `is` attribute:\n\n```\n<img is=\"lazy-img\n     src=\"path/to/img.jpg\"\n     width=\"480\"\n     height=\"320\"\n     delay=\"500\"\n     margin=\"0px\"></lazy-img>\n```\nCurrently this is only supported in recent versions of Chrome and\nFirefox.\n\n### Attributes\n- `src`: path to the image\n- `width`: width in pixels\n- `height`: height in pixels\n- `delay`: delay in ms before the element loads the image (default: 500ms)\n- `margin`: the `rootMargin` of the IntersectionObserver (default: 0px)\n\n`delay` is needed for when the image is scrolled into view and then quickly\nscrolled out of view. Without a delay, the image would immediately be\nloaded even though it would no longer be visible.\n\nThis situation can occur when a user quickly scrolls down the page with\nthe images quickly scrolling into and out of the viewport. The delay assures\nthat only images that are fully visible for at least 500ms are loaded.\n\n`margin` corresponds to the `rootMargin` property of the IntersectionObserver\nand is used to enlarge or shrink the box around the observed element in\nwhich the intersection is calculated.\n\nBy setting a large box for example, the observer will report the element\nas fully visible even though only a small part will be visible. The default\nvalue is 0px and it can be set like CSS margin (top, right, bottom, left)\nand **must** include either `px` or `%`.\n\n### Styling\nThe component exposes the following CSS variables:\n- `--placeholder-background`: the color of the placeholder that is\nvisible before the image is loaded (default: #cccccc)\n- `--spinner-color`: the color of the spinner that is visible before\nthe image is loaded (default: #808080)\n","readmeFilename":"README.md"}