{"_id":"@byte-size/bsu-lazy-image","_rev":"1-3dfcda305dfdefa8b4582026a3906316","name":"@byte-size/bsu-lazy-image","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.2":{"name":"@byte-size/bsu-lazy-image","version":"0.1.2","scripts":{"serve":"vue-cli-service serve","build":"vue-cli-service build","lint":"vue-cli-service lint","test:unit":"vue-cli-service test:unit","dev":"nodemon -e vue --watch src --exec npm run push","push":"npm run rollup && yalc push","rollup":"rollup --config src/rollup/rollup.config.js"},"dependencies":{"vue":"^2.5.17"},"devDependencies":{"@fullhuman/postcss-purgecss":"^1.1.0","@vue/cli-plugin-babel":"^3.0.5","@vue/cli-plugin-eslint":"^3.0.5","@vue/cli-plugin-unit-jest":"^3.0.5","@vue/cli-service":"^3.0.5","@vue/eslint-config-prettier":"^3.0.5","@vue/test-utils":"^1.0.0-beta.25","babel-core":"7.0.0-bridge.0","babel-jest":"^23.6.0","nodemon":"^1.18.5","rollup":"^0.66.6","rollup-plugin-buble":"^0.19.4","rollup-plugin-filesize":"^5.0.1","rollup-plugin-uglify-es":"0.0.1","rollup-plugin-vue":"^4.3.2","tailwindcss":"^0.6.6","vue-cli-plugin-tailwind-rollup-esm-component":"0.0.5","vue-template-compiler":"^2.5.17"},"main":"dist/bsu-lazy-image.esm.js","gitHead":"300ae3ef20bff63cbbda79b90ae23e1e62445c42","_resolved":"","_integrity":"","_from":"file:byte-size-bsu-lazy-image-0.1.2.tgz","description":"1. IntersectionObserver","_id":"@byte-size/bsu-lazy-image@0.1.2","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"kemalcany","email":"kemalcany@gmail.com"},"dist":{"integrity":"sha512-DFD9VeqIxASWENz4izXZFUqOqV1cWz5t8/H7sJKC1hAwr9w3AKf0v2hGAXWiGymiNalSKlr2vm88q1o4orsYEg==","shasum":"10b09fc7e86570d7083cc7477d7bf3578fe80655","tarball":"https://registry.npmjs.org/@byte-size/bsu-lazy-image/-/bsu-lazy-image-0.1.2.tgz","fileCount":4,"unpackedSize":6510,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8qsvCRA9TVsSAnZWagAAGjwQAKFe0/p2v4rwD9bFFBlc\n4pU5BOw8upLumqviXJuGUiCc42yg7VVo/0gL76qKJn+J5aPnUCPXzstsX8mE\nrFhzzgbdLr+xVOxIyoWSk/DdFbckuhQWlR4k5V4fN9JKZxbaLXXkK19pNDos\ngbOxW9J3J4xcGRuMh2qyudOCIaSyPPv8Sf/Cu8HvhbcJkZLBuXbbKMS4OrkP\nuppVVRjp4zIqm2NvFiupI65no11BUg1hxrUEliJWsV0dP5wc/G4Lj02BCZC7\nc3usnegZQrtjOf/bFUTu8fiwGIL2E2LiUZ+Jzy6jl49fMjWQF0f4rG5v2qjW\nzy+CFbXhMPAQQUQrhETc5m5Z34oYTiwgpiKlMOq4KySXjipiG2bB9fMKL413\nVEZKbPogBqy12YxHJj8Tqg2k8VnSRhYYlPLJzVb65VrpqhZSGx9dZhU5xxLf\nddhxPaZe79lTmPGhwlUs4d2LvKi/wumDWO1NuBJ0Fg8sBz49u8EiRnPwhbVP\nY/l45zkUpCPhWxYuO4SF7kPfpDIM2xm5v/cIdFoVyMBRb0WEM91wbi96Aayl\nrsQWdCJKxrWRKCX79PqwAYeHjcTpIisXM4T/pJqoS4UwNVzCu8iYAguJLszt\nkWG2c9jr/xv+t20bJc60FaRtFDq5pkES6WZLmu3td0lJaoyC3xmYzUffVdIl\n862t\r\n=Xbuo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHRJJ1wISPvJlhPnHFWMTVvQHBsgBoaawNsNhLQgGUFBAiBmzbn+rGDsJye+trqu4GtZMUGW0XJ9P1EGBYHRlUs1Gw=="}]},"maintainers":[{"name":"kemalcany","email":"kemalcany@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/bsu-lazy-image_0.1.2_1542630190969_0.4783969816070184"},"_hasShrinkwrap":false}},"time":{"created":"2018-11-19T12:23:10.706Z","0.1.2":"2018-11-19T12:23:11.132Z","modified":"2022-04-04T21:20:33.139Z"},"maintainers":[{"name":"kemalcany","email":"kemalcany@gmail.com"}],"description":"1. IntersectionObserver","readme":"# Dependencies\n\n1. IntersectionObserver\n\n2. A vue.js transition (to fade out placeholder\n\n# Notes\n\n1. ATM, the image srcset is designed to accomodate only a single image and it's varios dimensions.\n   If you want to add different images for different breakpoints, then you need to upgrade the placeholder to a <picture> element with same breakpoints as the real image. Something like that:\n\n````\n<picture v-if=\"!imageLoaded\">\n  <source media=\"(min-width: 1900px)\" srcset=\"images/intro/lofi-coworking.jpg\">\n  <img class=\"h-full w-full absolute\"\n    :src=\"placeholder\"\n    :style=\"'object-fit: cover; filter: blur(10px);'\"\n  >\n</picture>\n```\n````\n\n2. Image breakpoints are hardcoded Tailwind parameters.\n","readmeFilename":"README.md"}