{"_id":"yall-js","_rev":"18-5d4514d61d73203f0a4641cff66f2130","name":"yall-js","dist-tags":{"latest":"4.0.2"},"versions":{"2.2.2":{"name":"yall-js","version":"2.2.2","description":"Yet Another Lazy Loader","main":"./dist/yall.js","module":"./src/yall.mjs","scripts":{"clean":"npx rimraf ./dist","lint":"npx eslint ./src/yall.mjs","test":"npm run lint && node http.js","build":"npm run clean && npx rollup -c"},"repository":{"type":"git","urnl":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","intersection observer","mutation observer","requestIdleCallback","images","web performance"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.2.2","@babel/plugin-proposal-object-rest-spread":"^7.3.2","@babel/preset-env":"^7.3.1","eslint":"^5.13.0","express":"^4.16.4","rimraf":"^2.6.3","rollup":"^1.1.2","rollup-plugin-babel":"^4.3.2","rollup-plugin-copy":"^0.2.3","rollup-plugin-terser":"^4.0.4"},"dependencies":{},"gitHead":"07019903ca934e2f39a5553e208c3de584042a79","_id":"yall-js@2.2.2","_npmVersion":"6.4.1","_nodeVersion":"11.5.0","_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"dist":{"integrity":"sha512-elxoeJJS76Vlqd4tHr7PEREmXRCMuIzQFw2r2G+EV84Gp1l2zA6qJIl0WoPTj9X/C1e2H5gy3+Am7SQwxpDm0w==","shasum":"e5e35f67b2cd1b3a4fba7f90492af2b48287ba15","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-2.2.2.tgz","fileCount":10,"unpackedSize":39916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcXdRgCRA9TVsSAnZWagAAs6AP/3VFr/jrOqJEr+y6CILZ\n9Xt3qQT/0bTnA0R+PCp3QTycgm2XUAJ9MATpQoIqEMRP7afSK+aDCw0KVDDS\nUvOqALDxzL0EV0HlW7XBxC+tz4BKIA52syuDVZFrjzL47CbtIKZcQFQ5UkFm\nVK6iFL2dGHOIYFMXZh0sNT1t+mne3iNV9R5Zo8U33zV/o4gB/2a8kv/n55Ra\nOCBGZ6fFvVLGpKK7KbTbzH+EQhmsjkYoAVZcintxuBg4w7jsKRpyGlCF1VwD\nK0tt2Q+DD9FyKlka6BAM3Dot1ANxj5IhOEC96Q95UJYIBqn+6JhlmaEzObOe\nolv1QyhimJp2YTbphzIn/QYF62V+xjmSjX8axgwilRRixnPF9fb3nVEyr0O9\n+/OMqdFn8sjFTdeyqunasaIEdZVMSxMUcJb199u+XmGzxGVzyVY/JR4uUIYy\nqk9FhHG+KGPLA/4hOWfYEOyyQem0b79ZjX50XZxlvTby/BJkiSMA9At3mY8Z\nPiXjBxwEfap0wk6+R2QKTUDcSkFAQsxA+xLPir/FuuW2iE15ecl39Jgsa+cU\nGi0ihVvfgwj9ZUWaNaok/KRJArRlesSll938n0f6ejuN7WXH7lnPfeXpgT4U\nIJog0hpV7CaHOxhUD13oF37bitOw14HL3NcC4wWE61jle1CulvwOSJ6spPpc\n46sw\r\n=jf4N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6jWd4IMkYhXXS0WaV0z29nSuS+PyVQNzZ7GO388qvygIhAKyCIQlqZ/Qa3TGJ1wKjwNBLoSN3mxmfMRl0hzHj1m+R"}]},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_2.2.2_1549653087883_0.031021292954993562"},"_hasShrinkwrap":false},"2.3.0":{"name":"yall-js","version":"2.3.0","description":"Yet Another Lazy Loader","main":"./dist/yall.js","module":"./src/yall.mjs","jsnext:main":"./src/yall.mjs","scripts":{"clean":"npx rimraf ./dist","lint":"npx eslint ./src/yall.mjs","test":"npm run lint && node http.js","build":"npm run clean && npx rollup -c"},"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","intersection observer","mutation observer","requestIdleCallback","images","web performance"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.3.4","@babel/plugin-proposal-object-rest-spread":"^7.3.4","@babel/preset-env":"^7.3.4","eslint":"^5.15.2","express":"^4.16.4","rimraf":"^2.6.3","rollup":"^1.6.0","rollup-plugin-babel":"^4.3.2","rollup-plugin-copy":"^0.2.3","rollup-plugin-terser":"^4.0.4"},"dependencies":{},"gitHead":"75deeb2f5a18c9fa73b14ce0e552b90975d7d319","_id":"yall-js@2.3.0","_npmVersion":"6.4.1","_nodeVersion":"11.5.0","_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"dist":{"integrity":"sha512-lxlNzGi7WDmn08oOUNavGrqrzoKAzK6AAoUOPPAQxpuzbr/3tiBgom5CWYCkDrhpu31MkWeVwRjXKHQwilvS2g==","shasum":"10d16d58233941bdcb3a4afae67dd686fca91766","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-2.3.0.tgz","fileCount":6,"unpackedSize":33362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjTSlCRA9TVsSAnZWagAAHl0P/jAIbT9iu27q+l60tl5T\nclLnUmbUukyhed5UDRNEsn1O+FkLOYkxXQQO80hjDEty3WfISZgaM6BYs+uG\n893N26pSce/RbtnOjQeYYMsxJ8YhFhb6HRymAGHQ+dtIKO192Az5eigpxQkV\nY4c+OW8Bl9HTaj/LcM8Oo2HZSLrwMP0tI+dp+UeJJpbq9Ro5cHH140CA/7SJ\nWiMnSKAUpBTuhMZePuwy7ZraZ0NrnqFbdZD0qAS0u9nd/2fkAGxQvuEQwNh7\nYct71HRKy4CLEsT6wfDF6UEL5QC01lqKvzaqrXu6tRh2lo0/U5dXmNqo8oC2\nb5oHWxKoP9l4rPw7No1SZR+NegsPmccbXzIHT0TTynahj5YYB1GBRwU19qT4\nvrGCKS1JIFPN3stAu2ATr9+oJduWUOHikmS4820i+7gbAhg8qZ9979TRqiMX\nvyU7P6z8kVREhmkRYEEyTM7SSeOmF3htp8LpG16BIeeHExted0HbEn98P4iB\nCfjKr3KjCzXro1xB2hbA8/Aj/10STh1sd5csNxMmUn61WbXRdqLhAIZOMBBD\nUxLOHy6VXQmf3fDlHXhhHVbaMn8Hr1Gc0qBB+FX7UApLj7KBypfbn5rcqESy\nD2xrJZYyPccExY+nksNbo7osfVwCcntCJk71yWH3XCuKUxhEF9T5K5zioplY\ncYEs\r\n=r6OX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID0UNzPee49xLAlUE3wJNgiFSp1WwWLaNvqC2FTxhUl+AiEA9AsUqT9G2tstun5dsBZDe6MVuEJIEUPSDFjG+B9l6tE="}]},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_2.3.0_1552757924523_0.8285787368407005"},"_hasShrinkwrap":false},"2.3.1":{"name":"yall-js","version":"2.3.1","description":"Yet Another Lazy Loader","main":"./dist/yall.js","module":"./src/yall.mjs","jsnext:main":"./src/yall.mjs","scripts":{"clean":"npx rimraf ./dist","lint":"npx eslint ./src/yall.mjs","test":"npm run lint && node http.js","build":"npm run clean && npx rollup -c"},"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","intersection observer","mutation observer","requestIdleCallback","images","web performance"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","eslint":"^5.15.3","express":"^4.16.4","rimraf":"^2.6.3","rollup":"^1.6.0","rollup-plugin-babel":"^4.3.2","rollup-plugin-copy":"^0.2.3","rollup-plugin-terser":"^4.0.4"},"dependencies":{},"gitHead":"e5494d9e88bc1c1924b76373eee36b3b6c70130a","_id":"yall-js@2.3.1","_npmVersion":"6.4.1","_nodeVersion":"11.5.0","_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"dist":{"integrity":"sha512-SmQpm0PFBSZZ6sXR5XYPJtpmBU5zYaO/olNh/e0/z58axvVffksRJdOK7PYTX4oOXwBn2NyK1Rkv8sTh3kcU8Q==","shasum":"71dc66eca232198d26d30a98437e5e138533e727","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-2.3.1.tgz","fileCount":6,"unpackedSize":33793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckFjACRA9TVsSAnZWagAAik8P/RholXJwPUPPd3eEOdc4\nQu/si38W32hli2tptZuRZnPm1oPR3muO/btzYn3xD8TY6n3NlT88XxfQ1Mam\n3XaC5W6xw/O/wMiBO1ENo+7MZR2bL/aNVPm+vxzA8VnY64oFvBRxKHfaQDu2\nLxfOOU/yHsHiImZuAl4SWFx+uWRr2ATzIhKx6kQy+qwzWtdRo1NOEGkK0+yx\nBL+0FDAW+Q+H3uYLsCHkEBMYCjVw6dEOo6Mblnl8sDz41paMLahrVjJbzfJx\nS9fj4ZXTGDfyIgU1v0EbrcY0pOhPLtdDdOfk4Wc6DXq+R7w/CAACzmzKAzIy\nX+1PhTiuY1SSbyabiJsfj50UpkBneq9YIcxf4odzq2kyaoLNzpZD3WRFrFVP\ncr0DXsFXnYSzUNqyp2yVUyg9J9bkdb8NAL9//R2PMKle+3jqTXdLPvio6B3Q\nD1fnz6gsn7RzYo8LDSlWKSzRMRKnc+f53GGoto55BrXqAx3uml1kkwIdmwTd\n10wEgzxHdkXP/2ulNogCE5YJGtGf7KdGih6QmjMxC6JiI16vnD0N5pUhHHgm\nfPHtZ92R8DRAavn/8JTZUpA3+X0f2Wu98xWTt67Yp5ZYUFeh6vo0Xrq1Omjs\nZU3cIiQdBACM0imI2wdDPFKNAgjenTAJXYya5fOyM5R3gYHZ3SBlRf5X8wVv\nqw2M\r\n=A/cH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDrX0AZqxA3gGXAxBzeuTXlEVyx8cfmLldYKDl7MpbxUAiEA5pYEPmoyk9ze07YKNZIOuSBDdcfPMh7Bza+C9gNHqjk="}]},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_2.3.1_1552963775267_0.09076638814094307"},"_hasShrinkwrap":false},"3.0.0":{"name":"yall-js","version":"3.0.0","description":"Yet Another Lazy Loader","main":"./dist/yall.js","module":"./src/yall.mjs","jsnext:main":"./src/yall.mjs","scripts":{"clean":"npx rimraf ./dist","lint":"npx eslint ./src/yall.mjs","test":"npm run lint && node http.js","build":"npm run clean && npx rollup -c","postinstall":"node -e \"console.log('Thank you for trying out version 3 of yall.js. If you find bugs, please file an issue with appropriate details at https://github.com/malchata/yall.js/issues')\""},"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","intersection observer","mutation observer","requestIdleCallback","images","web performance"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","eslint":"^5.15.3","express":"^4.16.4","rimraf":"^2.6.3","rollup":"^1.7.0","rollup-plugin-babel":"^4.3.2","rollup-plugin-copy":"^0.2.3","rollup-plugin-terser":"^4.0.4"},"dependencies":{},"gitHead":"9dd722f7d96c70720472151be1d324ad4e2d4dd0","readme":"# yall.js (Yet Another Lazy Loader)\n\n<p align=\"center\">\n  <strong>ES5 (.js) version</strong>\n</p>\n<p align=\"center\">\n  <img src=\"https://img.badgesize.io/malchata/yall.js/asfaloth/dist/yall.min.js?label=Uncompressed\" alt=\"Uncompressed size.\">&nbsp;<img src=\"https://img.badgesize.io/malchata/yall.js/asfaloth/dist/yall.min.js?compression=gzip&label=gzip\" alt=\"gzip size.\">&nbsp;<img src=\"https://img.badgesize.io/malchata/yall.js/asfaloth/dist/yall.min.js?compression=brotli&label=brotli\" alt=\"Brotli size.\">\n</p>\n<p align=\"center\">\n  <strong>ES6 (.mjs) version</strong>\n</p>\n<p align=\"center\">\n  <img src=\"https://img.badgesize.io/malchata/yall.js/asfaloth/dist/yall.min.mjs?label=Uncompressed\" alt=\"Uncompressed size.\">&nbsp;<img src=\"https://img.badgesize.io/malchata/yall.js/asfaloth/dist/yall.min.mjs?compression=gzip&label=gzip\" alt=\"gzip size.\">&nbsp;<img src=\"https://img.badgesize.io/malchata/yall.js/asfaloth/dist/yall.min.mjs?compression=brotli&label=brotli\" alt=\"Brotli size.\">\n</p>\n\nyall.js is a featured-packed SEO-friendly lazy loader for `<img>`, `<picture>`, `<video>` and `<iframe>` elements, and can also lazy load CSS background images. It works in all modern browsers as well as IE11. It uses [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) where available, but as of version 3, this API must be polyfilled for older browsers. It can also monitor the DOM for changes using [Mutation Observer](https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/) to lazy load media elements that have been appended to the DOM after initial page render, which may be desirable for single page applications. It can also optimize use of browser idle time using [`requestIdleCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback).\n\nTo use yall, you can grab `yall.min.js` (or `yall.min.mjs` if you're the modern sort) from the `dist` directory and slap it on your page. You can also install version 3 with npm by pointing to the `next` tag:\n\n```shell\nnpm install yall-js@next\n```\n\n## Usage\n\nThis is version 3 of yall.js, and introduces breaking changes over all prior versions. This is simplest way to initialize yall.js:\n\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", yall);\n```\n\nThe above syntax is sufficient if you don't want to pass in any options. [If you _do_ want to specify options](#api-options), you'll need to use a slightly more verbose syntax:\n\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  yall({\n    observeChanges: true\n  });\n});\n```\n\nUnlike version 2 which provided a fallback for browsers without `IntersectionObserver` support, version 3 requires a polyfill. You can conditionally polyfill this feature through [polyfill.io](https://polyfill.io/) like so:\n\n```html\n<script src=\"https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver\"></script>\n```\n\nFrom there, lazy loading elements depends on _what_ you want to lazy load. Let's take a look at what you can do with it.\n\n### `<img>`\n\nLet's look at a typical `<img>` element use case:\n\n```html\n<!-- An src-only <img> element example -->\n<img class=\"lazy\" src=\"placeholder.jpg\" data-src=\"image-to-lazy-load.jpg\" alt=\"Alternative text to describe image.\">\n```\n\nHere, we specify an optional placeholder image in the `src` attribute, and point to the image we want to lazy load in the `data-src` attribute. Attaching a `class` of `lazy` exposes elements to yall.js, and is necessary for the lazy loader to work (although this class value can be overridden). Let's look at an example using both `src` and `srcset`:\n\n```html\n<!-- A somewhat more complex src + srcset example -->\n<img class=\"lazy\" src=\"placeholder.jpg\" data-srcset=\"image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x\" data-src=\"image-to-lazy-load-1x.jpg\" alt=\"Alternative text to describe image.\">\n```\n\n**Note:** If you're using `media` and `sizes` attributes, you don't need to prefix them with `data-`. Leave those attributes as is.\n\n### `<picture>`\n\nSince `<picture>` is a thing, yall.js supports that too:\n\n```html\n<!-- A more complex <picture> + <img> + src/srcset example -->\n<picture>\n  <source data-srcset=\"image-to-lazy-load-2x.webp 2x, image-to-lazy-load-1x.webp 1x\" type=\"image/webp\">\n  <img class=\"lazy\" src=\"placeholder.jpg\" data-srcset=\"image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x\" data-src=\"image-to-lazy-load-1x.jpg\" alt=\"Alternative text to describe image.\">\n</picture>\n```\n\n### `<video>`\n\nyall.js covers two possible lazy loading patterns for video.\n\n#### Lazy-loading videos intended as replacements for animated GIFs\n\nYou can use yall.js to lazy load `<video>` elements intended to [replace animated GIF with autoplaying video](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/):\n\n```html\n<video class=\"lazy\" autoplay loop muted playsinline>\n  <source data-src=\"video.webm\" type=\"video/webm\">\n  <source data-src=\"video.mp4\" type=\"video/mp4\">\n</video>\n```\n\nThe pattern is largely the same as it is with `<picture>`, only the `lazy` class is applied to the `<video>` element. **Tip:** If you're embedding videos that _don't_ emulate animated GIFs (i.e., non autoplaying video), it's better to _not_ lazy load them. Instead, lean on the [`preload` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload) to defer loading of video content. _**Please note that video autoplay policies may change at any time, meaning your video may not autoplay on some platforms! Such behaviors are not bugs, but rather features designed to conserve the user's bandwidth and preferences. Filing issues related to video autoplay will likely be rejected.**_\n\n#### Lazy-loading `poster` placeholder images for non-autoplaying video\n\nSometimes you have video you'd rather not autoplay, such as those videos with an audio track. Or, perhaps you want to be more considerate of your user's bandwidth (how nice of you). In these cases, the [`poster` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-poster) can be used to load a placeholder image. However, these images can also be rather large, especially if you have a number of videos on the page that use this pattern. As of version 2.2.0, you can now lazy load `poster` images with the following markup pattern:\n\n```html\n<video class=\"lazy\" data-poster=\"placeholder.jpg\" controls preload=\"none\">\n  <source src=\"video.webm\" type=\"video/webm\">\n  <source src=\"video.mp4\" type=\"video/mp4\">\n</video>\n```\n\nThis pattern is slightly different than the one above. Because we're not trying to emulate animated GIFs, we've removed a number of attributes from the `video` tag that aren't necessary in this case:\n\n1., We've done away with the usual `data-src` attribute, and specified `preload=\"none\"` to ensure the browser doesn't preload any of the video (which, depending on the browser, is not guaranteed).\n2. To lazy load the `poster` image itself, we specify the image to load in a `data-poster` attribute.\n3. The `controls` attribute is added here to allow the user to control video playback.\n\n**Note:** For the sake of your users, don't mix the above markup patterns. If a video is going to use `autoplay` to replace an animated image, lazy loading a placeholder image via `data-poster` isn't necessary. In fact, it's potentially wasteful. Furthermore, if you're unsure of what to do, let the browser handle this stuff and don't use yall.js to manage loading of videos.\n\n### `<iframe>`\n\nAs of version 2, you can also lazy load `<iframe>`s:\n\n```html\n<iframe class=\"lazy\" data-src=\"some-other-document.html\"></iframe>\n```\n\n### CSS images\n\nLast, but not least, you can use yall.js to lazy load images referenced in CSS. This might be useful if you have a very large `background-image` you'd like to defer. Proper use of this feature requires _both_ HTML and CSS. To start, let's say you have a `<div>` that loads a very large masthead `background-image`:\n\n```html\n<!-- I bet this loads a giant stock photo! -->\n<div class=\"masthead lazy-bg\"></div>\n```\n\nThe key here is the `lazy-bg` class, which is a class yall.js looks for (and can be changed via the `lazyBackgroundClass` option). When yall.js sees elements with this class, it will remove that class and replace it with a class of `lazy-bg-loaded` (which can also be changed with the `lazyBackgroundLoaded` option). From here, it's up to you to author CSS that makes use of this class to swap the image in. Such CSS might look like this:\n\n```css\n/* Pre-lazy loading styles */\n.masthead {\n  background: #e6e6e6; /* A little placeholder color */\n  height: 16.66vw;\n  margin: 0 0 1rem;\n}\n\n/* BAM! Lazy loaded! */\n.masthead.lazy-bg-loaded {\n  background: url(\"masthead.jpg\");\n}\n```\n\nThis works because, unlike HTML which loads most resources immediately, CSS loads resources only if the current state of the document builds a CSSOM which includes them. That means if your document's style tree changes later on to request a background image, the browser will fetch it the moment the change is applied. Leaning on this behavior is more sensible than using a mess of `data-` attributes pointing to possible image candidates, which could potentially add a bunch of extra markup and introduce edge cases that are difficult to code for.\n\n## What about users without JavaScript?\n\nSlap on some `<noscript>`:\n\n```html\n<!-- A <noscript> example using <img> with src and srcset. -->\n<img class=\"lazy\" data-srcset=\"/img/image-to-lazy-load-2x.jpg 2x, /img/image-to-lazy-load-1x.jpg 1x\" data-src=\"/img/image-to-lazy-load-1x.jpg\" src=\"/img/placeholder.jpg\" alt=\"Alternative text to describe image.\">\n<noscript>\n  <img srcset=\"/img/image-to-lazy-load-2x.jpg 2x, /img/image-to-lazy-load-1x.jpg 1x\" src=\"/img/image-to-lazy-load-1x.jpg\" alt=\"Alternative text to describe image.\">\n</noscript>\n\n<!-- And a <picture> example. -->\n<picture>\n  <source data-srcset=\"/img/image-to-lazy-load-2x.webp 2x, /img/image-to-lazy-load-1x.webp 1x\" type=\"image/webp\">\n  <img class=\"lazy\" data-srcset=\"/img/image-to-lazy-load-2x.jpg 2x, /img/image-to-lazy-load-1x.jpg 1x\" data-src=\"/img/image-to-lazy-load-1x.jpg\" src=\"/img/placeholder.jpg\" alt=\"Alternative text to describe image.\">\n</picture>\n<noscript>\n  <picture>\n    <source srcset=\"/img/image-to-lazy-load-2x.webp 2x, /img/image-to-lazy-load-1x.webp 1x\" type=\"image/webp\">\n    <img srcset=\"/img/image-to-lazy-load-2x.jpg 2x, /img/image-to-lazy-load-1x.jpg 1x\" src=\"/img/image-to-lazy-load-1x.jpg\" alt=\"Alternative text to describe image.\">\n  </picture>\n</noscript>\n\n<!-- Here's a <video> example, too. -->\n<video class=\"lazy\" autoplay loop muted playsinline>\n  <source data-src=\"video.webm\" type=\"video/webm\">\n  <source data-src=\"video.mp4\" type=\"video/mp4\">\n</video>\n<noscript>\n  <video autoplay loop muted playsinline>\n    <source src=\"video.webm\" type=\"video/webm\">\n    <source src=\"video.mp4\" type=\"video/mp4\">\n  </video>\n</noscript>\n\n<!-- Here's an <iframe> example for good measure. -->\n<iframe class=\"lazy\" data-src=\"lazy.html\"></iframe>\n<noscript>\n  <iframe src=\"lazy.html\"></iframe>\n</noscript>\n```\n\nThen place a `no-js` class on the `<html>` element:\n\n```html\n<html class=\"no-js\">\n```\n\nFinally, add this one line `<script>` before any `<link>` or `<style>` elements in the document `<head>`:\n\n```html\n<!-- Remove the no-js class on the <html> element if JavaScript is on -->\n<script>document.documentElement.classList.remove(\"no-js\")</script>\n```\n\nNormally, this script will remove the `no-js` class from the `<html>` element as the page loads, but if JavaScript is turned off, this will never happen. From there, you can add some CSS that hides elements with a `class` of `lazy` when the `no-js` class is present on the `<html>` element:\n\n```css\n/* Hide .lazy elements if JavaScript is off */\n.no-js .lazy {\n  display: none;\n}\n```\n\nTo see all use cases in action, check out the demos in the `test` folder.\n\n## API options\n\nWhen you call the main `yall` initializing function, you can pass an in an options object. Here are the current options available:\n\n### `lazyClass`\n\n**default:** `\"lazy\"`\nThe element class used by yall.js to find elements to lazy load. Change this is if a `class` attribute value of `lazy` conflicts with your application.\n\n### `lazyBackgroundClass`\n\n**default:** `\"lazy-bg\"`\nThe element class used by yall.js to find elements to lazy load CSS background images for. Change this if you'd prefer not to use the default.\n\n### `lazyBackgroundLoaded`\n\n**default:** `\"lazy-bg-loaded\"`\nWhen yall.js finds elements using the class specified by `lazyBackgroundClass`, it will remove that class and put this one in its place. This will be the class you use in your CSS to bring in your background image when the affected element is in the viewport.\n\n### `idleLoadTimeout`\n\n**default:** `100`\nIn environments where `requestIdleCallback` is available, this option sets a deadline in milliseconds for `requestIdleCallback` to kick off lazy loading for an element. If this option is set to `0`, `requestIdleCallback` is never called, and lazy loading for the affected element(s) will begin immediately once they're in the viewport.\n\n### `threshold`\n\n**default:** `200`\nThe threshold (in pixels) for how far elements need to be within the viewport to begin lazy loading.\n\n### `observeChanges`\n\n**default:** `false`\nUse a Mutation Observer to examine the DOM for changes. This is useful if you're using yall.js in a single page application and want to lazy load resources for markup injected into the page after initial page render. _**Note:** This option is ignored if set to `true` in a browser that doesn't support Mutation Observer!_\n\n### `observeRootSelector`\n\n**default:** `\"body\"`\nIf `observeChanges` is set to `true`, the value of this string is fed into `document.querySelector` to limit the scope in which the Mutation Observer looks for DOM changes. The `<body>` element is used by default, but you can confine the observer to any valid CSS selector (e.g., `#main-wrapper`).\n\n### `mutationObserverOptions`\n\n**default:** `{ childList: true, subtree: true }`\nOptions to pass to the `MutationObserver` instance. Read [this MDN guide](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#MutationObserverInit) for a list of options.\n\n## Words of advice\n\nIt is not this script's job to minimize layout shifting for you. Use appropriate `width` and `height` attributes, as well as lightweight placeholders for your images.\n\nIn the case of `<video>`, avoid lazy loading a placeholder with the `data-poster` attribute for autoplaying videos and just use `poster`. On the other hand, _do_ consider lazy loading a placeholder image with `data-poster` for non-autoplaying videos.\n\nFor general guidance, please check out the `test` folder to see how you might use placeholders with yall.js. If you don't want to bother with placeholders, you _can_ omit them. yall.js will still work, though the experience may be weird and jumpy and weird for your users as resources load.\n\nAlso, do _not_ lazy load resources that are likely to near the top of the page (\"above the fold\", as it were). Doing so is a performance anti-pattern, because those resources will not begin loading until yall.js has been loaded, which may take much longer than if those resources were loaded normally.\n\n## Contributing\n\nIf you have an idea, file an issue and let's talk about it. Unsolicited pull requests for new features will generally be rejected unless those requests contain bug fixes. Please see [`CONTRIBUTING.md`](https://github.com/malchata/yall.js/blob/asfaloth/CONTRIBUTING.md) for more details. If your issue is related to version 3, please indicate as such in your issue.\n\n## Special thanks\n\nThank you to [BrowserStack](https://www.browserstack.com/) for graciously providing free cross-platform browser testing services!\n[![BrowserStack](https://res.cloudinary.com/drp9iwjqz/image/upload/f_auto,q_auto/v1527175969/browserstack_txnmf8.png)](https://www.browserstack.com/)\n","readmeFilename":"README.md","_id":"yall-js@3.0.0","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-xZ/6YNfSjYxtxyeshMYCJ086ReSdIuWYdaAxY9LPclIxhKXciFfTU74k91fcBZOVo6L34usp2cI4xpCBl7RW1A==","shasum":"65df841af121b40c5c939ac515eb17312a6a32de","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-3.0.0.tgz","fileCount":6,"unpackedSize":28324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclmWPCRA9TVsSAnZWagAAUfYQAJYxIeAGzAZbTl07kxCr\nB3OLKMX7JKQiEO7ZDXFkYSxjT3d5WapV1s3zqhcNRe0UVRC1BCYA2dT4/DlK\n+/Qcu59QzTbBew/H8cL1GhwtS08pIm3xrGFU84BHjoCBYHDEEq7QLR8OCxAx\nnz/jii+BhVKkFOOX9EzylAju1LC+mN6yVsSxDPEcn6f7U3igDMzf0vxgtr8D\ngFX9B8QsTzZIVhqjbLnyqTwPYjwx3+l7tsvJaDY+cLnuLYB4/8Bs3IQMCFx3\nV5LP4YbmB5fLTr1MvXDVe7dMSPp9qYh4r4gX9JG46snysULIZYhP5p7t1qLZ\nPMauI9m2Un5D7K6nfQy4Fic+wUr5NtP6N2P6Lq+C7dYh9/8zywMXHHamf/04\nc5eCj0Y2Owx6t7oCx26tGVWGnttRl7HlosUPhbXTRUniEfJvHVo47aR6lJ3t\nQ5atLojvRNvciqELRvzWw7oucRvqikwPyR4EroYIIxptnI15qi+nZ/bj7nNz\nq2WwULKQfXXVJAoWW/GEFqENPsRYJBPm072eeB2wvVUWjYJLAYfK1FlqlOJQ\noT720bYWwAOYt43gxSrxxRPBblGLi5dPrVBYEiKRRxchL5zRQs2KclQ8G2Er\n2uP+LRmbykh5mYTRp0ZQaozkSl8RRFbHpB1DxI8SEo9ihbMBmFhd509E4/q6\nldjT\r\n=dojo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG2qC5ve9lTxXS9J+/8B4TqFOhjC4uWKKeoVrkTECP+zAiEAiLHoXgjbMy64FSarZ2c7SJisRoczGyKkQj1r+/9wF9A="}]},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_3.0.0_1553360270581_0.49481955650466736"},"_hasShrinkwrap":false},"2.3.2":{"name":"yall-js","version":"2.3.2","description":"Yet Another Lazy Loader","main":"./dist/yall.js","module":"./src/yall.mjs","jsnext:main":"./src/yall.mjs","scripts":{"clean":"npx rimraf ./dist","lint":"npx eslint ./src/yall.mjs","test":"npm run lint && node http.js","build":"npm run clean && npx rollup -c"},"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","intersection observer","mutation observer","requestIdleCallback","images","web performance"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","eslint":"^5.15.3","express":"^4.16.4","rimraf":"^2.6.3","rollup":"^1.7.0","rollup-plugin-babel":"^4.3.2","rollup-plugin-copy":"^0.2.3","rollup-plugin-terser":"^4.0.4"},"dependencies":{},"gitHead":"bea6b4c527e605f3a85904917944a3c64967cdd2","_id":"yall-js@2.3.2","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-InmWzx38dwdJ0pHp86rVnBra/3ijnuscUxnm0rN+V3NTrPK7P082MfGfdNdRljuOabdMLvPQe1AVW3RWRuq9VA==","shasum":"c6e8592edaf90b41228c344a6e1afc28f0b5ec90","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-2.3.2.tgz","fileCount":6,"unpackedSize":32970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclq/PCRA9TVsSAnZWagAAaVgP/3JmDmaKBkRzCdwqYNrU\nwvlQBMDxN/zX8/I3hq0y71AFu9LgYGuGxJnHm2wotgA216Iz4c6+u3icGHfJ\nJ1FvBZ+FRV8SYh9/N4F87bAUDQc+K5yY6yI/0WWlSYvD7SVZfMHCA2ejifhU\nepl7qcJ8BgwWcTApl/FMellr+PSQfIakKwczpy9sqUjnnTJSVnU0vR4iwVkk\nxDRPXBNpZNYQ+5Bf1nn+ogZFXtLO0wr5/k5L4rZwVdcnBTjlvnf8CreDTLDP\neHjKqyNkKeDRGjdKA6d7+Jg5Jap0bI65r6v1J1VeWhJ64oJ/W9suVcU9PJZD\ncLdcvwLXpuMBjN522t3GCO2ls2RxivOD09s3jPMP+SbJxetM9zhDXW+BuP5E\nv4hbYmZgTxA9BqJoWmlZ9TszY6VRWiRxNg33muuMYEVks4URN/yq/tWepPIJ\nAOs8hUQD1hhmk5sj80xhMtvcHFrD69ZD+fp9ChpQ0PZxS0yMmOr64LBBwES/\nvY0LT/JMT7SX1rDSmt7HaE+vqeuXcQrl9bRHml5zVhNE/3LqudR65kDXaqcH\nexIf8ArW0iVxp5WpYbH3swYObiogLgeZMNYt3dhtLNdIFtjS/MQmh1uOzGgV\nBIT7rNm5kfI5t4/9h370WnDj8aZIafmNgrMCbpMhXAlFS37vaa3RUHdZuDtZ\nHeb9\r\n=DAcB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICmMwH4t1ubwAcqvD4R/ETZijWTTywcWQfkU3hcL6WlvAiBJBFwU69qTKANK0J8UiD8fdsrRcatKIZC9KhJoed9rNQ=="}]},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_2.3.2_1553379279079_0.6743155404372068"},"_hasShrinkwrap":false},"3.1.0":{"name":"yall-js","version":"3.1.0","description":"Yet Another Lazy Loader","main":"./dist/yall.js","module":"./src/yall.mjs","jsnext:main":"./src/yall.mjs","scripts":{"clean":"npx rimraf ./dist","lint":"npx eslint ./src/yall.mjs","test":"npm run lint && node http.js","build":"npm run clean && npx rollup -c","postinstall":"node -e \"console.log('Thank you for trying out version 3 of yall.js. If you find bugs, please file an issue with appropriate details at https://github.com/malchata/yall.js/issues')\""},"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","intersection observer","mutation observer","requestIdleCallback","images","web performance"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.4.0","@babel/preset-env":"^7.4.2","eslint":"^5.15.3","express":"^4.16.4","rimraf":"^2.6.3","rollup":"^1.7.0","rollup-plugin-babel":"^4.3.2","rollup-plugin-copy":"^0.2.3","rollup-plugin-terser":"^4.0.4"},"dependencies":{},"readme":"# yall.js (Yet Another Lazy Loader)\n\n<p align=\"center\">\n  <strong>ES5 (.js) version</strong>\n</p>\n<p align=\"center\">\n  <img src=\"https://img.badgesize.io/malchata/yall.js/asfaloth/dist/yall.min.js?label=Uncompressed\" alt=\"Uncompressed size.\">&nbsp;<img src=\"https://img.badgesize.io/malchata/yall.js/asfaloth/dist/yall.min.js?compression=gzip&label=gzip\" alt=\"gzip size.\">&nbsp;<img src=\"https://img.badgesize.io/malchata/yall.js/asfaloth/dist/yall.min.js?compression=brotli&label=brotli\" alt=\"Brotli size.\">\n</p>\n<p align=\"center\">\n  <strong>ES6 (.mjs) version</strong>\n</p>\n<p align=\"center\">\n  <img src=\"https://img.badgesize.io/malchata/yall.js/asfaloth/dist/yall.min.mjs?label=Uncompressed\" alt=\"Uncompressed size.\">&nbsp;<img src=\"https://img.badgesize.io/malchata/yall.js/asfaloth/dist/yall.min.mjs?compression=gzip&label=gzip\" alt=\"gzip size.\">&nbsp;<img src=\"https://img.badgesize.io/malchata/yall.js/asfaloth/dist/yall.min.mjs?compression=brotli&label=brotli\" alt=\"Brotli size.\">\n</p>\n\nyall.js is a featured-packed SEO-friendly lazy loader for `<img>`, `<picture>`, `<video>` and `<iframe>` elements, and can also lazy load CSS background images. It works in all modern browsers as well as IE11. It uses [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) where available, but as of version 3, this API must be polyfilled for older browsers. It can also monitor the DOM for changes using [Mutation Observer](https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/) to lazy load media elements that have been appended to the DOM after initial page render, which may be desirable for single page applications. It can also optimize use of browser idle time using [`requestIdleCallback`](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback).\n\nTo use yall, you can grab `yall.min.js` (or `yall.min.mjs` if you're the modern sort) from the `dist` directory and slap it on your page. You can also install version 3 with npm by pointing to the `next` tag:\n\n```shell\nnpm install yall-js@next\n```\n\n## Usage\n\nThis is version 3 of yall.js, and introduces breaking changes over all prior versions. This is simplest way to initialize yall.js:\n\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", yall);\n```\n\nThe above syntax is sufficient if you don't want to pass in any options. [If you _do_ want to specify options](#api-options), you'll need to use a slightly more verbose syntax:\n\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  yall({\n    observeChanges: true\n  });\n});\n```\n\nUnlike version 2 which provided a fallback for browsers without `IntersectionObserver` support, version 3 requires a polyfill. You can conditionally polyfill this feature through [polyfill.io](https://polyfill.io/) like so:\n\n```html\n<script src=\"https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver\"></script>\n```\n\nFrom there, lazy loading elements depends on _what_ you want to lazy load. Let's take a look at what you can do with it.\n\n### `<img>`\n\nLet's look at a typical `<img>` element use case:\n\n```html\n<!-- An src-only <img> element example -->\n<img class=\"lazy\" src=\"placeholder.jpg\" data-src=\"image-to-lazy-load.jpg\" alt=\"Alternative text to describe image.\">\n```\n\nHere, we specify an optional placeholder image in the `src` attribute, and point to the image we want to lazy load in the `data-src` attribute. Attaching a `class` of `lazy` exposes elements to yall.js, and is necessary for the lazy loader to work (although this class value can be overridden). Let's look at an example using both `src` and `srcset`:\n\n```html\n<!-- A somewhat more complex src + srcset example -->\n<img class=\"lazy\" src=\"placeholder.jpg\" data-srcset=\"image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x\" data-src=\"image-to-lazy-load-1x.jpg\" alt=\"Alternative text to describe image.\">\n```\n\n**Note:** If you're using `media` and `sizes` attributes, you don't need to prefix them with `data-`. Leave those attributes as is.\n\n### `<picture>`\n\nSince `<picture>` is a thing, yall.js supports that too:\n\n```html\n<!-- A more complex <picture> + <img> + src/srcset example -->\n<picture>\n  <source data-srcset=\"image-to-lazy-load-2x.webp 2x, image-to-lazy-load-1x.webp 1x\" type=\"image/webp\">\n  <img class=\"lazy\" src=\"placeholder.jpg\" data-srcset=\"image-to-lazy-load-2x.jpg 2x, image-to-lazy-load-1x.jpg 1x\" data-src=\"image-to-lazy-load-1x.jpg\" alt=\"Alternative text to describe image.\">\n</picture>\n```\n\n### `<video>`\n\nyall.js covers two possible lazy loading patterns for video.\n\n#### Lazy-loading videos intended as replacements for animated GIFs\n\nYou can use yall.js to lazy load `<video>` elements intended to [replace animated GIF with autoplaying video](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/):\n\n```html\n<video class=\"lazy\" autoplay loop muted playsinline>\n  <source data-src=\"video.webm\" type=\"video/webm\">\n  <source data-src=\"video.mp4\" type=\"video/mp4\">\n</video>\n```\n\nThe pattern is largely the same as it is with `<picture>`, only the `lazy` class is applied to the `<video>` element. **Tip:** If you're embedding videos that _don't_ emulate animated GIFs (i.e., non autoplaying video), it's better to _not_ lazy load them. Instead, lean on the [`preload` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload) to defer loading of video content. _**Please note that video autoplay policies may change at any time, meaning your video may not autoplay on some platforms! Such behaviors are not bugs, but rather features designed to conserve the user's bandwidth and preferences. Filing issues related to video autoplay will likely be rejected.**_\n\n#### Lazy-loading `poster` placeholder images for non-autoplaying video\n\nSometimes you have video you'd rather not autoplay, such as those videos with an audio track. Or, perhaps you want to be more considerate of your user's bandwidth (how nice of you). In these cases, the [`poster` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-poster) can be used to load a placeholder image. However, these images can also be rather large, especially if you have a number of videos on the page that use this pattern. As of version 2.2.0, you can now lazy load `poster` images with the following markup pattern:\n\n```html\n<video class=\"lazy\" data-poster=\"placeholder.jpg\" controls preload=\"none\">\n  <source src=\"video.webm\" type=\"video/webm\">\n  <source src=\"video.mp4\" type=\"video/mp4\">\n</video>\n```\n\nThis pattern is slightly different than the one above. Because we're not trying to emulate animated GIFs, we've removed a number of attributes from the `video` tag that aren't necessary in this case:\n\n1., We've done away with the usual `data-src` attribute, and specified `preload=\"none\"` to ensure the browser doesn't preload any of the video (which, depending on the browser, is not guaranteed).\n2. To lazy load the `poster` image itself, we specify the image to load in a `data-poster` attribute.\n3. The `controls` attribute is added here to allow the user to control video playback.\n\n**Note:** For the sake of your users, don't mix the above markup patterns. If a video is going to use `autoplay` to replace an animated image, lazy loading a placeholder image via `data-poster` isn't necessary. In fact, it's potentially wasteful. Furthermore, if you're unsure of what to do, let the browser handle this stuff and don't use yall.js to manage loading of videos.\n\n### `<iframe>`\n\nAs of version 2, you can also lazy load `<iframe>`s:\n\n```html\n<iframe class=\"lazy\" data-src=\"some-other-document.html\"></iframe>\n```\n\n### CSS images\n\nLast, but not least, you can use yall.js to lazy load images referenced in CSS. This might be useful if you have a very large `background-image` you'd like to defer. Proper use of this feature requires _both_ HTML and CSS. To start, let's say you have a `<div>` that loads a very large masthead `background-image`:\n\n```html\n<!-- I bet this loads a giant stock photo! -->\n<div class=\"masthead lazy-bg\"></div>\n```\n\nThe key here is the `lazy-bg` class, which is a class yall.js looks for (and can be changed via the `lazyBackgroundClass` option). When yall.js sees elements with this class, it will remove that class and replace it with a class of `lazy-bg-loaded` (which can also be changed with the `lazyBackgroundLoaded` option). From here, it's up to you to author CSS that makes use of this class to swap the image in. Such CSS might look like this:\n\n```css\n/* Pre-lazy loading styles */\n.masthead {\n  background: #e6e6e6; /* A little placeholder color */\n  height: 16.66vw;\n  margin: 0 0 1rem;\n}\n\n/* BAM! Lazy loaded! */\n.masthead.lazy-bg-loaded {\n  background: url(\"masthead.jpg\");\n}\n```\n\nThis works because, unlike HTML which loads most resources immediately, CSS loads resources only if the current state of the document builds a CSSOM which includes them. That means if your document's style tree changes later on to request a background image, the browser will fetch it the moment the change is applied. Leaning on this behavior is more sensible than using a mess of `data-` attributes pointing to possible image candidates, which could potentially add a bunch of extra markup and introduce edge cases that are difficult to code for.\n\n## What about users without JavaScript?\n\nSlap on some `<noscript>`:\n\n```html\n<!-- A <noscript> example using <img> with src and srcset. -->\n<img class=\"lazy\" data-srcset=\"/img/image-to-lazy-load-2x.jpg 2x, /img/image-to-lazy-load-1x.jpg 1x\" data-src=\"/img/image-to-lazy-load-1x.jpg\" src=\"/img/placeholder.jpg\" alt=\"Alternative text to describe image.\">\n<noscript>\n  <img srcset=\"/img/image-to-lazy-load-2x.jpg 2x, /img/image-to-lazy-load-1x.jpg 1x\" src=\"/img/image-to-lazy-load-1x.jpg\" alt=\"Alternative text to describe image.\">\n</noscript>\n\n<!-- And a <picture> example. -->\n<picture>\n  <source data-srcset=\"/img/image-to-lazy-load-2x.webp 2x, /img/image-to-lazy-load-1x.webp 1x\" type=\"image/webp\">\n  <img class=\"lazy\" data-srcset=\"/img/image-to-lazy-load-2x.jpg 2x, /img/image-to-lazy-load-1x.jpg 1x\" data-src=\"/img/image-to-lazy-load-1x.jpg\" src=\"/img/placeholder.jpg\" alt=\"Alternative text to describe image.\">\n</picture>\n<noscript>\n  <picture>\n    <source srcset=\"/img/image-to-lazy-load-2x.webp 2x, /img/image-to-lazy-load-1x.webp 1x\" type=\"image/webp\">\n    <img srcset=\"/img/image-to-lazy-load-2x.jpg 2x, /img/image-to-lazy-load-1x.jpg 1x\" src=\"/img/image-to-lazy-load-1x.jpg\" alt=\"Alternative text to describe image.\">\n  </picture>\n</noscript>\n\n<!-- Here's a <video> example, too. -->\n<video class=\"lazy\" autoplay loop muted playsinline>\n  <source data-src=\"video.webm\" type=\"video/webm\">\n  <source data-src=\"video.mp4\" type=\"video/mp4\">\n</video>\n<noscript>\n  <video autoplay loop muted playsinline>\n    <source src=\"video.webm\" type=\"video/webm\">\n    <source src=\"video.mp4\" type=\"video/mp4\">\n  </video>\n</noscript>\n\n<!-- Here's an <iframe> example for good measure. -->\n<iframe class=\"lazy\" data-src=\"lazy.html\"></iframe>\n<noscript>\n  <iframe src=\"lazy.html\"></iframe>\n</noscript>\n```\n\nThen place a `no-js` class on the `<html>` element:\n\n```html\n<html class=\"no-js\">\n```\n\nFinally, add this one line `<script>` before any `<link>` or `<style>` elements in the document `<head>`:\n\n```html\n<!-- Remove the no-js class on the <html> element if JavaScript is on -->\n<script>document.documentElement.classList.remove(\"no-js\")</script>\n```\n\nNormally, this script will remove the `no-js` class from the `<html>` element as the page loads, but if JavaScript is turned off, this will never happen. From there, you can add some CSS that hides elements with a `class` of `lazy` when the `no-js` class is present on the `<html>` element:\n\n```css\n/* Hide .lazy elements if JavaScript is off */\n.no-js .lazy {\n  display: none;\n}\n```\n\nTo see all use cases in action, check out the demos in the `test` folder.\n\n## API options\n\nWhen you call the main `yall` initializing function, you can pass an in an options object. Here are the current options available:\n\n### `lazyClass`\n\n**default:** `\"lazy\"`<br>\nThe element class used by yall.js to find elements to lazy load. Change this is if a `class` attribute value of `lazy` conflicts with your application.\n\n### `lazyBackgroundClass`\n\n**default:** `\"lazy-bg\"`<br>\nThe element class used by yall.js to find elements to lazy load CSS background images for. Change this if you'd prefer not to use the default.\n\n### `lazyBackgroundLoaded`\n\n**default:** `\"lazy-bg-loaded\"`<br>\nWhen yall.js finds elements using the class specified by `lazyBackgroundClass`, it will remove that class and put this one in its place. This will be the class you use in your CSS to bring in your background image when the affected element is in the viewport.\n\n### `idleLoadTimeout`\n\n**default:** `200`<br>\nIn environments where `requestIdleCallback` is available, this option sets a deadline in milliseconds for `requestIdleCallback` to kick off lazy loading for an element. If this option is set to `0`, `requestIdleCallback` is never called, and lazy loading for the affected element(s) will begin immediately once they're in the viewport.\n\n### `threshold`\n\n**default:** `200`<br>\nThe threshold (in pixels) for how far elements need to be within the viewport to begin lazy loading.\n\n### `events`\n**default:** `{}`<br>\nAn object of events that get sent directly to [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) for each element to be lazy loaded. Rather than building some opinionated, bespoke event management system, this system gets out of your way and allows you to specify whatever events you are possible to bind with `addEventListener`. Here's an example below:\n\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  yall({\n    events: {\n      // The object key is sent as the first argument to `addEventListener`,\n      // which is the event. The corresponding value can be the callback if you\n      // don't want to send any options to `addEventListener`.\n      load: function (event) {\n        if (!event.target.classList.contains(\"lazy\") && event.target.nodeName == \"IMG\") {\n          event.target.classList.add(\"yall-loaded\");\n        }\n      },\n      // If we want to pass options to the third argument in `addEventListener`,\n      // we can use a nested object syntax like so:\n      error: {\n        // Here, the `listener` member is the callback.\n        listener: function (event) {\n          if (!event.target.classList.contains(\"lazy\") && event.target.nodeName == \"IMG\") {\n            event.target.classList.add(\"yall-error\");\n          }\n        },\n        // The option below is sent as the third argument to `addEventListener`,\n        // offering more control over how events are bound. If you want to\n        // specify `useCapture` in lieu of options pass a boolean here instead.\n        options: {\n          once: true\n        }\n      }\n    }\n  });\n});\n```\n\nEvents for yall are bound at initialization time. This means that some events could fire multiple times. For instance, in the above `load` event example you can see that we check for the default class of `\"lazy\"` on the element. This is because the `load` event could fire when the initial image placeholder loaded (if one is specified) _and_ when the final image is lazy loaded.\n\nThe advantage of this approach is that you can do pretty much anything you want in any of the events on the elements yall observes. The disadvantage is that it places the responsibility squarely on you to manage events. This feature is also not finalized, so there are chances you may find some unexpected behavior or breaking API changes in the future.\n\n### `observeChanges`\n\n**default:** `false`<br>\nUse a Mutation Observer to examine the DOM for changes. This is useful if you're using yall.js in a single page application and want to lazy load resources for markup injected into the page after initial page render. _**Note:** This option is ignored if set to `true` in a browser that doesn't support Mutation Observer!_\n\n### `observeRootSelector`\n\n**default:** `\"body\"`<br>\nIf `observeChanges` is set to `true`, the value of this string is fed into `document.querySelector` to limit the scope in which the Mutation Observer looks for DOM changes. The `<body>` element is used by default, but you can confine the observer to any valid CSS selector (e.g., `#main-wrapper`).\n\n### `mutationObserverOptions`\n\n**default:** `{ childList: true, subtree: true }`<br>\nOptions to pass to the `MutationObserver` instance. Read [this MDN guide](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#MutationObserverInit) for a list of options.\n\n## Words of advice\n\nIt is not this script's job to minimize layout shifting for you. Use appropriate `width` and `height` attributes, as well as lightweight placeholders for your images.\n\nIn the case of `<video>`, avoid lazy loading a placeholder with the `data-poster` attribute for autoplaying videos and just use `poster`. On the other hand, _do_ consider lazy loading a placeholder image with `data-poster` for non-autoplaying videos.\n\nFor general guidance, please check out the `test` folder to see how you might use placeholders with yall.js. If you don't want to bother with placeholders, you _can_ omit them. yall.js will still work, though the experience may be weird and jumpy and weird for your users as resources load.\n\nAlso, do _not_ lazy load resources that are likely to near the top of the page (\"above the fold\", as it were). Doing so is a performance anti-pattern, because those resources will not begin loading until yall.js has been loaded, which may take much longer than if those resources were loaded normally.\n\n## Contributing\n\nIf you have an idea, file an issue and let's talk about it. Unsolicited pull requests for new features will generally be rejected unless those requests contain bug fixes. Please see [`CONTRIBUTING.md`](https://github.com/malchata/yall.js/blob/asfaloth/CONTRIBUTING.md) for more details. If your issue is related to version 3, please indicate as such in your issue.\n\n## Special thanks\n\nThank you to [BrowserStack](https://www.browserstack.com/) for graciously providing free cross-platform browser testing services!\n[![BrowserStack](https://res.cloudinary.com/drp9iwjqz/image/upload/f_auto,q_auto/v1527175969/browserstack_txnmf8.png)](https://www.browserstack.com/)\n","readmeFilename":"README.md","gitHead":"31b8cdc59b8705df4589e47f47159fe2a6ec4795","_id":"yall-js@3.1.0","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-06A0EtvB4vveSDvVruG0TDarQMnA2hgxvEmVI8G9ZMiNsyCrghT7eHDWPovb8ZY+yYUAYqBwluBtBZ72xwqWxA==","shasum":"8e9684fffffe2838e0d6dfe2023ce2c048e65223","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-3.1.0.tgz","fileCount":6,"unpackedSize":31573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcl7gfCRA9TVsSAnZWagAAqs8P+wZYFAqJh8/fvZbNqQQf\nYllC8KJDSCrTzyEw4duZVlaBLqTkcvb1OplFMnHQG3Lcm9283SVcee/i3joH\nrK+t4PVACChLVuj3zop6ucHGQlYY76sHYlls4SZ0baP9XoissIMY8d/u/GAA\ngh7vfDW1oAzvrYM8MP5ffT3oLzl9zGC6YwBtxMFYkvuFGuxqcoON24GNJfMf\nzUIMl9lUZI4RF3GgOSkq+pFFom0uHKQpkAZ3JDPb8nnDGvWHy84cCvNV7PuD\neQWiCmx7VdaewSVLFBOfr5m0WHjtX4ceWsQfRyMXyLlDDdL1IqKUlDA0rn2i\nQ6DL5pWfbNgrYIaQm/8MTtosq+jdUU3wLeKrdkUrozPVpTty0D0XuxJwJeB1\ndB0Ay1wKNhhRltUjXqCrmVIQv/yOBeYxzBXcwqYVmeE9OlTINK1td0DF2Dzk\nqZgxnPDUQbjaC5u1lyhziiGEjBdfZXVPOpILJf+wYt1NVIt9Z5BCeM16ljXp\nnKvPCPGLmv+b/KJ4vvGoqr33LK1FToxPBoc0UQ/A0gdCfddysNuDvDxmrQfY\nxjCCIR3Etmjwc7HqImp2NKZL47jLE60EBnRep/E21iRRb53ypK0/MQF/Mzht\ncgUu0nViy6d8CQxzVc3NHOGUxYM7CNRgzbcyjS/7JurO4YajlnmUT7zz7qU4\nmWpI\r\n=l2Dk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcHYQdq5d/UtLQv5iPImWWYANyV25sMYUWRhrpZ7oRxQIhAJT5MlXT4TNOZORLnK/t7b/BH1X5nKNCKQgXV9hBtj7e"}]},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_3.1.0_1553446942721_0.35494936531095833"},"_hasShrinkwrap":false},"3.1.1":{"name":"yall-js","version":"3.1.1","description":"Yet Another Lazy Loader","main":"./dist/yall.js","module":"./src/yall.mjs","jsnext:main":"./src/yall.mjs","scripts":{"clean":"npx rimraf ./dist","lint":"npx eslint ./src/yall.mjs","test":"npm run lint && node http.js","build":"npm run clean && npx rollup -c","postinstall":"node -e \"console.log('\\u001b[31m\\u001b[1mHey, y\\'all! Thanks for using yall.js! This is version 3 and contains breaking changes from version 2. Read the README at:\\u001b[21m\\u001b[39m\\n > \\u001b[34mhttps://github.com/malchata/yall.js\\u001b[0m')\""},"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","lazy loader","lazy loading","intersection observer","IntersectionObserver","mutation observer","MutationObserver","requestIdleCallback","images","video","iframe","web performance","requestAnimationFrame"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"@babel/cli":"^7.4.3","@babel/core":"^7.4.3","@babel/preset-env":"^7.4.3","eslint":"^5.16.0","express":"^4.16.4","rimraf":"^2.6.3","rollup":"^1.8.0","rollup-plugin-babel":"^4.3.2","rollup-plugin-copy":"^0.2.3","rollup-plugin-terser":"^4.0.4"},"dependencies":{},"gitHead":"5005db6982aebc4bd58c7ab051dc1a3e36eb529e","_id":"yall-js@3.1.1","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-tS1Xxj3l2RsCT7G7AQWaYz8lovQgjWvAYqfxtcCYKTqy7RE2Ub7SRiFszJIW/l2K1A2VJKTfDMlrbvCIUXouyw==","shasum":"d667126c429f47e6a08bb2ab456280be1040b7c5","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-3.1.1.tgz","fileCount":6,"unpackedSize":32234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJco9R8CRA9TVsSAnZWagAAkNsQAI9xuWJHEkCspXPVzqTO\nWZG4ctW6FhoLi4jN7lXiyLGvcT7lhIyJjjB22cS2sD3cQ8vfVvqvJv22zUbx\nJsuqJlfYTj9H6WHd27qDS4wZPDbA9Km2voaEzP43KZlxUblnxAt3sWjvJ2ly\nRzyyPPw0ZIidyFakPsQa3Zpp2dc28GLMMQRImUTa0SjhcfqanTnVoOeIBzzp\ni5IGD9t9G2BiPtF0Ny0JMqSODZE6aRWBCdi4DCKhAwbK0l+jRlRG8CsPEwIk\nXcosJg2oU9EtVUCx3poPGwlRQa244OZHRXNz02q2zyFRhS2n9Rti4+V46389\nFoXZc868Dgvkzi4iDPlrgX2BZyorO2S1sZUdBCdiFOG6sehbyM+KK8Jy/Mwh\nRPziCjO1RHVWQ+yL8ERl62qgs9WGirsM7U0aHDQLPd7DIuK7drvrKcGovIxa\n6zYy8CRDPPTqfL4Hk+ZeCH+iK81gvzDxggu2E0c1Wzptaz0dWnMAlSxq7d4t\nK3uTmiHBs10h0u80+Mti1Zue2YKR+s09gxCn88dfnoPrds9yFokJXnv8V36g\n8YplZoBrgOjcKR0BSROvl0fc1FpilHrO0XbawSngH8U2J0oT7/xurcwZOzjI\nDiHPF1GBnis+8epOeaEu+7qIC8R7eB6tBhGkAeq9n1GD42DkS35QYrDDrN0W\n3pka\r\n=91IG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCSxeH9ZswBsHAOVmyItlJeWjMoZ21aOb7sgl/VlcF1wIgRMhOAdw2FM50hbEfli01461sobAvRaFOcu2GXBfV6d8="}]},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_3.1.1_1554240635827_0.8459386713252481"},"_hasShrinkwrap":false},"3.1.2":{"name":"yall-js","version":"3.1.2","description":"Yet Another Lazy Loader","main":"./dist/yall.js","module":"./src/yall.mjs","jsnext:main":"./src/yall.mjs","scripts":{"clean":"npx rimraf ./dist","lint":"npx eslint ./src/yall.mjs","test":"npm run lint && node http.js","build":"npm run clean && npx rollup -c","postinstall":"node -e \"console.log('\\u001b[31m\\u001b[1mHey, y\\'all! Thanks for using yall.js! This is version 3 and contains breaking changes from version 2. Read the README at:\\u001b[21m\\u001b[39m\\n > \\u001b[34mhttps://github.com/malchata/yall.js\\u001b[0m')\""},"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","lazy loader","lazy loading","intersection observer","IntersectionObserver","mutation observer","MutationObserver","requestIdleCallback","images","video","iframe","web performance","requestAnimationFrame"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"@babel/cli":"^7.5.0","@babel/core":"^7.5.4","@babel/preset-env":"^7.5.4","eslint":"^6.0.1","express":"^4.17.1","rimraf":"^2.6.3","rollup":"^1.16.7","rollup-plugin-babel":"^4.3.3","rollup-plugin-copy":"^3.0.0","rollup-plugin-terser":"^5.1.1"},"dependencies":{},"gitHead":"13e7c5cc515986b19672e5af89c79feedee72e95","_id":"yall-js@3.1.2","_nodeVersion":"11.13.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-ErGI1cNCUAw5XhgZLL+wd35J2Fuvwnc9vKKE4I9d/OfQ0nhQ+j4cPpbS3feH4Gq8G9GXjjLlKhNPc5vvEgOVeg==","shasum":"f5d6df7170103b6bce94af88f91d3f277cc0b4b1","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-3.1.2.tgz","fileCount":6,"unpackedSize":32388,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJmQVCRA9TVsSAnZWagAAryoP/2uG+6R/1ujGC7Zgv/Xz\nmSbKQbRPQeY/ReSdWaJcSvAAiCcPavomCOTmqFqi/8LdvvPMZPAkT9GUP7g6\nW5tp5EiqZ7ld1W6P8wy2ZWaLMbZ85OhlcP6KqihyoDeUu7XxZpkJJSmGWIN1\nswXPpSPab38H1DPALZTS4/4DvyTC9aeK3NOhvXaLaNVRlKgY5WftFTXEpgVX\nY5cbNAN5X5zB0j5jA/EPJRvdr7zhSMRCQNQnC3/7UEqEB5QhYs0d6MVNa25e\n+XvKdt4PaboIOdQlk+uv16vchucU6yS+n7RZ5UhZrVZsl6oQMRVlZGRdyRmx\nq6H2+G82QsaLRIu5uJupkssUuAWfI/S4WTIP32c3HV4651GLYu9fp6vRw0bN\nuamCo0jebZFqoNSSkIBKEv+n4Ajp3R4J/8xkd6EalX2dEIE1dmyv/4w12dRp\ntyccnjorbjvhklJ7QJOO9KNS7oNWckynXsbTgswdBaz2lZmP/SxPZRvtIB6+\nlUCTFHkr1oNLlSEk2UY5ub8fX4Dn3oVNKIR1vQFfQe4Q3SKW1o8+8ldj9ved\ncOkkM3gBjHBUa3Co8Vg2ewAKbqn4lCiMj3KpfAXhpIvGU4jdvD5K3DIcEx2E\nm5q9wJa1mzacYHOk9KTKAHnSWaCUksS3cE2uYU4QrFF80n2K13u7bHNfxBZ/\nZF5k\r\n=dqEj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoyfE2ZisgvmU7c5Um7nAhuOmkW64kfO4oePWbB1KfFwIgSieqetZeePsQ26qauCi4ef4xgvEFgfQ1h+Dx221nKnk="}]},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_3.1.2_1562797076921_0.4450061278253825"},"_hasShrinkwrap":false},"3.1.3":{"name":"yall-js","version":"3.1.3","description":"Yet Another Lazy Loader","main":"./dist/yall.js","module":"./src/yall.mjs","jsnext:main":"./src/yall.mjs","scripts":{"clean":"npx rimraf ./dist","lint":"npx eslint ./src/yall.mjs","test":"npm run lint && npm run build && cp -fv ./dist/yall.min.js ./test/js && npm run server","server":"node http.js","build":"npm run clean && npx rollup -c"},"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","lazy loader","lazy loading","intersection observer","IntersectionObserver","mutation observer","MutationObserver","requestIdleCallback","images","video","iframe","web performance","requestAnimationFrame"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"@babel/cli":"^7.5.5","@babel/core":"^7.5.5","@babel/preset-env":"^7.5.5","eslint":"^6.1.0","express":"^4.17.1","rimraf":"^2.6.3","rollup":"^1.17.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-terser":"^5.1.1"},"dependencies":{},"gitHead":"1853e6859b442b2ce6fbaf684db64f6560eda8a9","_id":"yall-js@3.1.3","_nodeVersion":"11.13.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-PBT8oCYFj/ZsDCp7I3WnSSWSyx8bUyChT5nANot4BbmmQK844iSYyae2xBa95XSZPR7fhhmWKY/Zaj4tRPtX8g==","shasum":"d222dca63f5d18bfe4a0932e62b4b932de9cc7ce","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-3.1.3.tgz","fileCount":6,"unpackedSize":32070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdOdtiCRA9TVsSAnZWagAANGUP/0npyjGNED/5fihnlrbT\n4TNn+quf+Nqdjjd3DOvrzUjJD8dOwE7KvizHTcq9mn8A82GcDMDV/H/1duFU\nlwrMsLwAAboQ7qjmIb9j+2kuNHnRmQpAS7fq7SHs43fuSkbBesLU9riV/Nv6\n8EX9SJRe3eZ5HGSfje50ytFKtyAtzZcH0dEHOmPpvj5mLPN7kBQKJn+Fg2/Y\ng+6bt+EocgNrLRZnZu4LpXYCOX49mKE1rba5vr6Pejm/OrTAEIEsEopRFqQQ\n2S2qxu2QFoCMDZj/wtbxzwBai00fgtnf/BqXWVYhPWicE5F8a5gxPmNCtR4I\n4Khm8tYg1RGmBq1nj7XvyJRCHPl5lMa97tlfx7WR5Jb+Ccj7vPTNtQN2dAHW\n5lHfaqiPNB9xovVcBjA7PYALVAvDgjm7G6mpHyF2AqtXmzeCbQs8auG3z3nK\n+wWWPYaATNYq6ICw9XvDomClFgQIDILSHucURazqBLaLoZoIzdfhymH4OWWx\nC9kYGNLwmRdnXp/kCqrEvGbUht3VZpdHeuvv51VNRGQf16i2qZCBa/DH6md4\n2VKTrJLKy1zL12gWl4lP3WH229ZB0Lg3HTgJXH74QARQ7Ym6vQy6btROd3h6\nAY5JiKsjtOnIdYcNWZ3CirmKeZMIzIFHz/VJoLJC91l4NYrOMS/lJI3FQhfs\nfE54\r\n=REp8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOqz3buWxTeLhFm0aRhb8HtFZVDUP0csN1GI26NKhMrQIhAKytVD1q54C87F9BD8cSEVNu1bvNryZlN4fN5qdSHROW"}]},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_3.1.3_1564072799484_0.8247588069638812"},"_hasShrinkwrap":false},"3.1.4":{"name":"yall-js","version":"3.1.4","description":"Yet Another Lazy Loader","main":"./dist/yall.js","module":"./src/yall.mjs","jsnext:main":"./src/yall.mjs","scripts":{"clean":"rm -rf ./dist","lint":"npx eslint ./src/yall.mjs","test":"npm run lint && npm run build && cp -fv ./dist/yall.min.js ./test/js && npm run server","server":"node http.js","build":"npm run clean && npx rollup -c","postinstall":"npm run build"},"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","lazy loader","lazy loading","intersection observer","IntersectionObserver","mutation observer","MutationObserver","requestIdleCallback","images","video","iframe","web performance","requestAnimationFrame"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"@babel/cli":"^7.5.5","@babel/core":"^7.5.5","@babel/preset-env":"^7.5.5","eslint":"^6.1.0","express":"^4.17.1","rollup":"^1.17.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-terser":"^5.1.1"},"dependencies":{},"gitHead":"8298785a14e6fa2954220aa154c3cd66d34dcb40","_id":"yall-js@3.1.4","_nodeVersion":"11.12.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-ySOG1UyLoNkrM7TiAfkqSJcckrMLcMjEFTYul9w7QCe72BrEqjGJfal8DZZ3tA569nlLuQquE5f5gcatWPb2ag==","shasum":"86e74c377cb99db2143b8acb6e645418f559dec0","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-3.1.4.tgz","fileCount":6,"unpackedSize":32128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdPH3WCRA9TVsSAnZWagAAMPwP/20iL0+TMUs02f5Dpiov\nG6mzAMvzAelQbJeVh8IFzsQxWAk45OWNDVTOeWgQ7J/0a5Twj1T3KMNymHTS\nM2r0DjjESYDmf6/EPn66Z1mF4Cwav3z7g2G55D+U4pE5N8YiW6/+b+tZtoPc\ntjGi0AAdNDO4iF0W9Ng6eNaj1mrlftC6LARSt8sk+UogoBOJK6Yu6rOimhgv\nhUKlAZMx08qM5Je55pMUn9sTUwsRGhLk0c1nuRQyLzznRhLuPx6ScaCpWqdU\nJzYDGemZCjE5FfYKeG0hlydJnX3fvxQQ3wqRMlN0sJmC0JSwPtw0JygMIWQw\ncvZJ3j28Z6vOVgyr6GB7wct+t++y+KBiYd29Xfag2pD+RMapZbP2qaJXKV4N\nqHlF8TcPKFPZa6v/XZpTzG30yLhBRGAjol9YsUOy98Z7GC69Sq07APPsJ5SC\n8Mtsa1R4D8/0jsVsExZ6woYrm4jg3TjGUVaduMxLEIXBIEYuXG4ddY0OsOty\nAJ235vWIhrYj4ypjQhFPV+o4ndIUy7e3ZZRYLvs3II4kG84+veXwpLlPBsoB\nBjsTl5w8DC48KsHeAc+qqZw1Lsv09c60sogBcvsUbQO7dj7CzZp4SM74+16t\nZKbW0AH/JRDO3h58EHNQi3fF3wIagNsp70Iq+tGhHUsM54qc0ZSP8HfkeTAg\n6JlX\r\n=PwER\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB3QGsMt0TjN3lL2y0MwnbzlfHZl4CGFD7oa1U742kO2AiBR9lvlYMB9M11ZDZPKBNLnA0UalJZdBchajvR6/Oukbg=="}]},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_3.1.4_1564245461720_0.928989509197591"},"_hasShrinkwrap":false},"3.1.5":{"name":"yall-js","version":"3.1.5","description":"Yet Another Lazy Loader","main":"./dist/yall.js","module":"./src/yall.mjs","jsnext:main":"./src/yall.mjs","scripts":{"clean":"rm -rf ./dist","lint":"npx eslint ./src/yall.mjs","test":"npm run lint && npm run build && cp -fv ./dist/yall.min.js ./test/js && npm run server","server":"node http.js","build":"npm run clean && npx rollup -c"},"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","lazy loader","lazy loading","intersection observer","IntersectionObserver","mutation observer","MutationObserver","requestIdleCallback","images","video","iframe","web performance","requestAnimationFrame"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"@babel/cli":"^7.5.5","@babel/core":"^7.5.5","@babel/preset-env":"^7.5.5","eslint":"^6.1.0","express":"^4.17.1","rollup":"^1.17.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-terser":"^5.1.1"},"dependencies":{},"gitHead":"464ceae129a56e0df9940b5c420c25b4aa14c830","_id":"yall-js@3.1.5","_nodeVersion":"11.13.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-qWFfdopCFl2zuSLca32napdZfFb9TiNp3vUzvEOd8Y9vWg9gmzdGYcDPNuhWqm/pdyBzSU8DfzQHO3Rb+8VZZg==","shasum":"8efe1bb20b507642f387d0b5af5fabd2a9fc2873","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-3.1.5.tgz","fileCount":4,"unpackedSize":29093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdQY9aCRA9TVsSAnZWagAAzmYP/2iSaUDtvweJCRcU0A3d\n9w9oDv/SoUhpvhc/Tcy7yUECdpYLqggsANXNthNA+ICLCvKZvUSUAlXoggvY\nm3zc/8V9NJZcRX3l9dKyteng6beFUHklHz0PjmLWwhPSUlJfTtCbd+iCk4II\n0Wi1Tuu3XqW5fdApDEhdzjH3dcpmFQaaUFvdItpQaLFQAb4q85VAPgz8y3yb\n6U70KvAfeg2ld1A6Uwo1Tgvfc98/afxFjEg5Zm5gyrTj78W/Ijd4NOCG9nCv\nbGZ4gFmUrjaaH0u3BTR95KaZxbuT+2kX5MCU0a/DafcML6FaG9r/BXNJ8usz\n4h1M6a7BOWCpkSm5yliIy/XzYzpQ2miVtuIsrAwDuSHN45AtIkx9HkCNq7aF\nJOPLKZ7/wqkwngij3ffcQn8mf9pUFkCVEPdIF7yISTA8x2oH9c2tJKOg3m7p\n3SSeETZOWAEQWseA1VXaa7H3TucZQNwnZcwC2OFCzgKEpvP6r8ITW/TX54sx\nLfnisQgMeo1wLI/OmVqekNCdI5bHWp2msM+6a1OFxqjupMHOC1djTWgjAeQK\n5c3CLiFPW8lgce+tzMz963BUA4ZT8Fjw8PhZA2kf19Tm1ELNhoh7VACLyXDc\npM7WY4+0QGgMVfbh7U4PuaeAvrorYRkh6N1MQiT+xSW0n2pSCQl8gJuoQ++q\nJ+42\r\n=iA81\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGJFqadeNlDJiRxgjwscb1JbWYLz6Qsvtu8ln5pa3BHWAiAoby++xZ8X/6m9tpdiM6+8QgY7xAqa39VhmJk+8QhPow=="}]},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_3.1.5_1564577625589_0.5794692268402546"},"_hasShrinkwrap":false},"3.1.6":{"name":"yall-js","version":"3.1.6","description":"Yet Another Lazy Loader","main":"./dist/yall.js","module":"./src/yall.mjs","jsnext:main":"./src/yall.mjs","scripts":{"clean":"rm -rf ./dist","lint":"npx eslint ./src/yall.mjs","test":"npm run lint && npm run build && cp -fv ./dist/yall.min.js ./test/js && npm run server","server":"node http.js","build":"npm run clean && npx rollup -c"},"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","lazy loader","lazy loading","intersection observer","IntersectionObserver","mutation observer","MutationObserver","requestIdleCallback","images","video","iframe","web performance","requestAnimationFrame"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"@babel/cli":"^7.6.0","@babel/core":"^7.6.0","@babel/preset-env":"^7.6.0","eslint":"^6.4.0","express":"^4.17.1","rollup":"^1.21.4","rollup-plugin-babel":"^4.3.3","rollup-plugin-terser":"^5.1.2"},"dependencies":{},"gitHead":"0658ab9e259a9dd3c6b6a3eec03617bf1486ebb3","_id":"yall-js@3.1.6","_nodeVersion":"11.13.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-3u0dElyL5baBqmzsyRzNrnKzJ44tJKY0KYd3YoJ2Ovs135PXSGpO5TteL44hUfpofHTUYJTLySeJQAYW6gY2Qw==","shasum":"095921affde99e4bc1b8e203aeb5631e19410803","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-3.1.6.tgz","fileCount":6,"unpackedSize":32881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhd8VCRA9TVsSAnZWagAAyB8P/0jUcc5WDUJE94losliH\nCQLBXd0kMEa/68DkUlkJ600Mo1hyLD3BYnnkDaCKZFRzT+UxhJOR2rvm98vc\nepECB6pCLcVCJy5oM4ns1K6uQhqdF8HfA6WZSCe+BRifqiP22RhzfkhenP9P\niziBAAvedUSqXBvv8t7q7N5/0jm+d4Uq9CWlGr8/6xBOfkfqLzdfQ4HHIREO\nz2V71xIqzusYufmBumdMoUJU9EJAxHFgNrMEvNbBgCsqLBS9a4tKeB+RIfaR\nesr+mPPYGbkQSa8k0u9w1LRJcVSL3/elU0A+7/lXkgM9XYKYn/jBznluZ4eO\npPR04YqqoLM1AcbxaK4LDp02G3jAMohvq8N++RNxVoLzbhm3g3mIoRmvZwDg\nsv4GAOLaGy45Srw/PihO4tjB1RBdML3Jexf9zOAcoHeEx+7TPAo0SZaJu7I5\nHPelBwS7FaCcJ2CuNKQHSrX4bUyFsWQx7OCeajlxVQvzqbbXqZWjBuQdQlWT\nO5FAWm67xuB+jD7KZVn20ssLbNgML3cug3G7+be8BwjVVo6R3rmDFcf4FMiS\n3TgiOzXV7U+Xu3cVGiwXxvJmrBdyeQ9GOOt4wd2LuIswbpfzjieywr6EDmZJ\n3iUXIJEXOEc4nI/Ph8beFFexedv02sGgCZYfM1OrfQnHqDzPUFflA5kB/J0q\n+OdZ\r\n=kDrU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCG8XwdZLk0yVCRQzmwgEA5IDJkQVQ8Na6JpOlFtWkDSwIhAIZDywz9AmKs7xXlyaL222+NvHaFrXTKFQSaz896WIdt"}]},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_3.1.6_1569054485102_0.9547548097725576"},"_hasShrinkwrap":false},"3.1.7":{"name":"yall-js","version":"3.1.7","description":"Yet Another Lazy Loader","main":"./dist/yall.js","module":"./src/yall.mjs","jsnext:main":"./src/yall.mjs","scripts":{"clean":"rm -rf ./dist","lint":"npx eslint ./src/yall.mjs","test":"npm run lint && npm run build && cp -fv ./dist/yall.min.js ./test/js && npm run server","server":"node http.js","build":"npm run clean && npx rollup -c"},"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","lazy loader","lazy loading","intersection observer","IntersectionObserver","mutation observer","MutationObserver","requestIdleCallback","images","video","iframe","web performance","requestAnimationFrame"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"@babel/cli":"^7.6.0","@babel/core":"^7.6.0","@babel/preset-env":"^7.6.0","eslint":"^6.4.0","express":"^4.17.1","rollup":"^1.21.4","rollup-plugin-babel":"^4.3.3","rollup-plugin-terser":"^5.1.2"},"dependencies":{},"gitHead":"14b7e048426494036e55d60848f777d2917891ac","_id":"yall-js@3.1.7","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-rCuaO7El9dQOffYxhMzeW98vBeSVcPErUSx+c9RvfNFpoF/Ep1hyt7FIDqA3XSM0xwMXtYVNXnkuBwvAY9E1GQ==","shasum":"a757f0007e8276f12345763d289e488cb24f6803","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-3.1.7.tgz","fileCount":6,"unpackedSize":32973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd2DUSCRA9TVsSAnZWagAAPXYP/Au7EqCd+wSz9rCsXVHX\nY8WDgFOH+ZDR9fdMtMH8OloCTs4F03+zOpb4ImsVpPsmlfEH51Km9YuX6XTt\nRNXdEFlslm+4z98IWr/cssOTXWmPMONUL+4WRtdb+7OSqcmYvVwBo2NWsCkS\nIoH9zWYAZQ2VOH03T+guIvbJsAmA9M+xI1q7AF9fxhRh1lV9POLpRCQIw+12\nOOamXb2YITKjppmSO7/T24r024CwYhiLs6txpK8N44aLmaW7qrdPBiY8IFXL\ncidVX57sG7yJqokIVp/hVpaoLcobv+enyd1mzhNU4bZDtRXDiZS8jF4972U9\nMy3s5Kfy3gNvO3RmdkDhENiOIrV8YDgOfXNqlyLRvq1lebdhypi0F3KKwpE2\nklJlnEG3U7DyCcY1JBn99fGt7OOSrEQI/PSTw9DVlPQgjQzafPzOFGXoXGk7\nGTCv7LqpWhKFekaD93U/7hrXT6ci5yUeJ2+1togxcYg5S0TERiZ0u5qH7Rgu\nIOmLL465Hrnp2XXDmnhgGJKyZMD+b/fTE2wJtg25OWf+fCCYkih6f/wNCDXh\ndqoKFxqcv640BeZi+7WCWYl459C5TOO79gxf8U8oeHROKsz9up1LjoN2Uuw3\nAOo6pAqybX8N4vegui69fFYSWZW0yxHaGu8OWQTe2qLAvKL6uFbM2Jiv2X6r\nX++Q\r\n=9xRi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFt0gTOZpRW2twczVfE1zHLnIWoMMk3mC8pPcLnI4XuxAiBf3S9Xj+g0Mr23CYPgnT1BTYch6RsEmRM5jJSWqyHH4g=="}]},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_3.1.7_1574450450148_0.6114472470284391"},"_hasShrinkwrap":false},"3.2.0":{"name":"yall-js","version":"3.2.0","description":"Yet Another Lazy Loader","main":"./dist/yall.js","module":"./src/yall.mjs","jsnext:main":"./src/yall.mjs","scripts":{"clean":"npx rimraf ./dist","lint":"npx eslint ./src/yall.mjs","test":"npm run lint && npm run build && cp -fv ./dist/yall.min.js ./test/js && npm run server","server":"node http.js","build":"npm run clean && npx rollup -c","postinstall":"node -e \"console.log('\\u001b[31m\\u001b[1mThanks for using yall.js! Excluding bugfixes, development of yall.js is finished. You should also consider replacing yall.js with native lazy loading if you can. Learn more at \\u001b[34mhttps://web.dev/native-lazy-loading/\\u001b[0m')\""},"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","lazy loader","lazy loading","intersection observer","IntersectionObserver","mutation observer","MutationObserver","requestIdleCallback","images","video","iframe","web performance","requestAnimationFrame"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"@babel/cli":"^7.8.4","@babel/core":"^7.9.0","@babel/preset-env":"^7.9.0","eslint":"^6.8.0","express":"^4.17.1","rimraf":"^3.0.2","rollup":"^2.3.2","rollup-plugin-babel":"^4.4.0","rollup-plugin-copy":"^3.3.0","rollup-plugin-terser":"^5.3.0"},"dependencies":{},"gitHead":"319ceeabe940d93cd072357ce4c199f8346a6f11","_id":"yall-js@3.2.0","_nodeVersion":"12.14.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-e62eb6pZdCs/YhKrgTYG6vlzIwNeqzA8j/jVjdLJLFaAHZVzWylSqe/LIHeMGcSExfDHtKeN8Dk6QMTLy17Bxg==","shasum":"2b284eb2fdc9a61fd43fccedc8559146e692ab68","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-3.2.0.tgz","fileCount":7,"unpackedSize":37340,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh2smCRA9TVsSAnZWagAAtjIP/0uPAH4qoLjqvVcyFuyC\n5R4XIV+uFYXspz0J6g+52aptyvNBhq0F0uNOigx56VCTYyIf3b6w88x3F+su\nvUT3FzDQpN1utg/K/tl4D3mxVnWhJwexN4K1J6O4was7TLujy2lv8uOnumyG\nBv/apzrj0AbQ9qhLnUkOPeflw3tEgCgBK2L4LKq9UD6aSsg/z8WgdVMgM/W5\ne0Z8MZaPtXWttw0BSwSXxoX49LVx34G01c+nRfgbNO6KRm8GhKJFegneh5NJ\nSaU6SwH2E73N/H95TN6/BlKC6AQvGV1i4EAOLrpTqlW48fxxYDTa7b0WUiYW\nPFCPsxGapM2FEV6hC4iY0814GiQPJ0g/P8DpsMJ3F7wW7Vz/DFtM/p71BM/z\ntwmCtwtnybbH7y46bloJmQbteU9eerLORD/Zd/hlF7W4jLMIBMXq8Jmyi9j5\njOh1FE31fLHcIi3D52z/EnsvttNTbXQ3PPZwJ4MegeAKrZ0fgYWbkuVa/n06\nCmoxRT/U4UJBM0KgH4HmbsF1rJhI6hv7yiELQyfp1/GUN3AXDWnywj1tjV2A\nu4yKVzsCZjjx5dfA8oMstTYYgvFfAtNF6PluPirMFWqPVr9nhzTvp6gqQwjj\nuYuehw4Fips9dv+2CLKRTemH7pGZ3RuNDMa4EvXx0QWpKvtGuC7E9nWWV/AE\niFn7\r\n=6OEG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE+LmUOJF4TyD44R/l6AdnASo442YKEHfr/eYykYtA40AiEAmuS5konsxZz/XH6HX0YUwHuKZjtoKf5QPUEy3e+bIfA="}]},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_3.2.0_1585933094230_0.7192207445137475"},"_hasShrinkwrap":false},"4.0.0":{"name":"yall-js","version":"4.0.0","description":"Yet Another Lazy Loader","type":"module","source":"./src/index.js","exports":"./dist/yall.mjs","main":"./dist/yall.cjs","module":"./dist/yall.js","unpkg":"./dist/yall.umd.js","scripts":{"clean":"rm -rf ./dist","build":"npm run clean && npx microbundle && npm run copy","copy":"cp -v dist/yall.js ./test/js/yall.js && cp -v dist/yall.js.map ./test/js/yall.js.map","dev":"npm run clean && npx microbundle watch","lint":"npx eslint ./src/**.js ./src/**/*.js","test":"npm run lint && npm run build && node ./http.js","postinstall":"node -e \"console.log('\\u001b[31m\\u001b[1mThanks for using yall.js! Excluding bugfixes, development of yall.js is finished. You should also consider replacing yall.js with native lazy loading if you can. Learn more at \\u001b[34mhttps://web.dev/native-lazy-loading/\\u001b[0m')\""},"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","lazy loader","lazy loading","intersection observer","IntersectionObserver","mutation observer","MutationObserver","requestIdleCallback","images","video","iframe","web performance","requestAnimationFrame"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"@babel/cli":"^7.17.10","@babel/core":"^7.18.2","@babel/preset-env":"^7.18.2","eslint":"^8.16.0","express":"^4.18.1","microbundle":"^0.15.0"},"gitHead":"d118cc6df7d6d7109d749a5b7705aec7d444a8a8","_id":"yall-js@4.0.0","_nodeVersion":"16.11.1","_npmVersion":"8.0.0","dist":{"integrity":"sha512-GMyD6MzHXbN7qcmR9tG6JuiJWq+gDg7wD1/b7f5Xmx/B8MF52maF2Bqk9zdEKVcUU5kc1GLZ9/amj+HNZmPgfw==","shasum":"2f66caf6e9b56ebd9bcb71d929784256de38e6cb","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-4.0.0.tgz","fileCount":10,"unpackedSize":53048,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaagI0Q5mrIJCKyFuB6VILpI7yFfn+JueAUlnpJ81uzQIhANPW61m93ZgGFIwCPferdDSDD3nfTWDm3ngxd91Afrmo"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJimlnDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpm1w/+K16UsDtoJGbIpkQEPmcTSWqzXQNdO8F9O9FzYYE5lfW5XR7A\r\nhnCB+XJ43sGIqRA0/DeqMv4/Fuh+blZdLBvKtcuz6fo8KZI4DsaoUSgVeL2J\r\nI1phkU9mGl4CA6Z0cnywYxnz2FnMTurZ0UmKHE1VZHrP2yYk+T+k9O6r6vRx\r\nIFMxyrXAo7FeCRKqxX1V+9+mzrIrqZwSahV5hAjU7fHXXr1wkuNU6FFESAfR\r\n+BeEJCxqiSiBvwZHzziKbvboIAaduiYeeYmYg8+cy95GcjDABOkC1o2FnCwW\r\nK2Psttz0Gu8bMLvXqSXabC2crhpFskut38DcheKNEjLvfR7Hod/HL6PxBtzd\r\nbWmZfw7MpfiivFuzjAEn0aSVHPMBivKMdsfFvafxpU5l4vKXDyMBkRQ0+ooL\r\nTTBH4l9k1j3R0EtWsOH78fwLtGhiTotnzjid3kY0IkuBDf5ksPcYQ6UyFq5j\r\nE+ZUO7BaAwU3+8+BU6IiY+hN2HUCIrbvE2ISZ4YMUm5GjTBULJIZHNOZqVTz\r\nhgfo+b1+Vr9H0I0aIgTx9HXNiewoUmoD5zz/72kVsR8YxIkRjLjyX5UH86w4\r\nSLl5ZKkVgmvA6iG8wiFl6QoF+U0XeD64rTJim7GXDNxapBYY+Qdh7eEpiAG/\r\n+owPRElR4PGhl5ZmjiQ/KVLnRjrQDSJ5njk=\r\n=IOXf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"directories":{},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_4.0.0_1654282691603_0.42099543477631074"},"_hasShrinkwrap":false},"4.0.1":{"name":"yall-js","version":"4.0.1","description":"Yet Another Lazy Loader","type":"module","source":"./src/index.js","exports":"./dist/yall.mjs","main":"./dist/yall.cjs","module":"./dist/yall.js","unpkg":"./dist/yall.umd.js","scripts":{"clean":"rm -rf ./dist","build":"npm run clean && npx microbundle && npm run copy","copy":"cp -v dist/yall.js ./test/js/yall.js && cp -v dist/yall.js.map ./test/js/yall.js.map","dev":"npm run clean && npx microbundle watch","lint":"npx eslint ./src/**.js ./src/**/*.js","test":"npm run lint && npm run build && node ./http.js","postinstall":"node -e \"console.log('\\u001b[31m\\u001b[1mThanks for using yall.js! This is version 4, which remove support for lazy loading `<img>`, `<picture>`, and `<iframe>` elements. You should use native lazy loading for those use cases. Learn more at \\u001b[34mhttps://github.com/malchata/yall.js\\u001b[0m')\""},"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","lazy loader","lazy loading","intersection observer","IntersectionObserver","mutation observer","MutationObserver","requestIdleCallback","images","video","iframe","web performance","requestAnimationFrame"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"eslint":"^8.16.0","express":"^4.18.1","microbundle":"^0.15.0"},"gitHead":"889bce1bb9fa44f4c2a124ddef6776cf3616b949","_id":"yall-js@4.0.1","_nodeVersion":"16.11.1","_npmVersion":"8.0.0","dist":{"integrity":"sha512-G9aUpfbkxhfrpGpw0GVF73QEtyiG/AIf5/1AYx5gNPg6qGQ7sezXjVVJ6YPf8ELyQYxJ/ekuoGPvmQvjJqP2FQ==","shasum":"b6028d95ec4dab7b718d7b5fea82576afc015af2","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-4.0.1.tgz","fileCount":10,"unpackedSize":52772,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDL47+HdBwrLq8URmNlkE7bspp5uTt+5UDB+k8Vw3kgGwIhAOr0EXU0Slxn49018xN02OS2XHMPAR+6wStgyr+IBEo3"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJimlt2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpU6Q/+Nc6dR55SEJ4s5AGMVvR1Bz0/2hNX4uKxIfWhpqinqATKKcAe\r\nUKGjduFP2vmPe9pAV54Yxe14WzVqLst+tRdlkxTXD4B6PfBqx8rp+RNIKWdY\r\n6FUK7s3XsxY1VC66EGglqi7bF9IoMIHGPw/5CdDnVUhYncOHKIwaUqyaW5xY\r\nWh6oxIZvAgadWBUl1rZ+qwUcKy4n8b26hgfzfOhdAinqMSZUSnE0jh+m0DFm\r\n2rPozym+mo/ld9YDmv3jKmH9UuYALaGGj2h6Z7ndKmnxEVjjtl2s0LAEuVJG\r\nhiV8eMEIeL2l5swwF9ei/TIj7mmnyVEGmCFBviqFzhv69UbBAEmkEUgX5MWV\r\nk7kHIg2PsopGMXDD3zESecwhxY3IWWY+wTqgenEFICCnwb1OIUcBXc1Lmy77\r\njKo3L2SS7GNi+/mv16Ju2nDVbuU6Bbva2DFINtkAfABi2yRxJOiVCaoW6VJk\r\nxadlc5qL6wIgpCAMmwuzFXn4WRIPfSSGdm3ZW1E3ZS1X6jHE080Gvaz+qu6x\r\nSj/ITcU5miZcQyO2LZx4aydkVbAflwggRUPIgheNEXF0VuEo+AZc06Muqduh\r\nd8MhrBaxVcYkFbPLBwxiQe47f9SkH5UCQklqKR8fyFdeC+gz9/Sit7ybBU1J\r\nQxJMR/7kX2oxNQtuZQQxqFX2eJwHdBY+umc=\r\n=H4Kv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"directories":{},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_4.0.1_1654283126068_0.10049219126363074"},"_hasShrinkwrap":false},"4.0.2":{"name":"yall-js","version":"4.0.2","description":"Yet Another Lazy Loader","type":"module","source":"./src/index.js","exports":"./dist/yall.mjs","main":"./dist/yall.cjs","module":"./dist/yall.js","unpkg":"./dist/yall.umd.js","scripts":{"clean":"rm -rf ./dist","build":"npm run clean && npx microbundle && npm run copy","copy":"cp -v dist/yall.js ./test/js/yall.js && cp -v dist/yall.js.map ./test/js/yall.js.map","dev":"npm run clean && npx microbundle watch","lint":"npx eslint ./src/**.js ./src/**/*.js","test":"npm run lint && npm run build && node ./http.js","postinstall":"node -e \"console.log('\\u001b[31m\\u001b[1mThanks for using yall.js! This is version 4, which remove support for lazy loading img, picture, and iframe elements. You should use native lazy loading for those use cases. Learn more at \\u001b[34mhttps://github.com/malchata/yall.js\\u001b[0m')\""},"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"keywords":["lazy load","lazy loader","lazy loading","intersection observer","IntersectionObserver","mutation observer","MutationObserver","requestIdleCallback","images","video","iframe","web performance","requestAnimationFrame"],"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/malchata/yall.js/issues"},"homepage":"https://github.com/malchata/yall.js#readme","devDependencies":{"eslint":"^8.16.0","express":"^4.18.1","microbundle":"^0.15.0"},"gitHead":"b608106238bf5b52bd36fd015758341598cc662d","_id":"yall-js@4.0.2","_nodeVersion":"16.11.1","_npmVersion":"8.0.0","dist":{"integrity":"sha512-C3C8S1sHPyqcKqF7XLCDugxzP8UOQ99htWCVuYLo2UZ0Mx/mIuip6FOGBPpp0cqOVKgyHOLafUK19L6yG1CmXQ==","shasum":"2c36756593b1df6bb82bd9428388d7be304e6a08","tarball":"https://registry.npmjs.org/yall-js/-/yall-js-4.0.2.tgz","fileCount":10,"unpackedSize":52760,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEbz40hVC7e7cKD2qRT95SZiQjCD78uMbFY+0u3tPS9UAiEApgC9ZxRZE+nDLcclPPzKj8mo5hE9D30FShapOixASRk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiml0jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJ5Q//dcfOkxB1LN7HTB4D8/IWYspeFL9FVprqHtFzojGUcICWNZ+u\r\n/RngRJV6T6HRRUnz2Psatv2Renvw7zR1gb7F1UtSCgN+FVtJ4h4aBDNxmb1U\r\nLtRNDTA0Z8vsWBhgBRtGMa78FJE1UpbRHnbIr21N++OhtCfMwSpNhub2INS7\r\nTOVH6ilWbZeMjmWeIa9Gf8JQ9Mw2FTuOU962e5oQdUunmhOOyGJdFYzju+W4\r\nrRn6lSlX73tqQ+fQf7jUvd9EYrY6ZHlKn1rqFrE9iXg3gPDx9QeslQUF6JFV\r\nEP5oSBdtj4NTkjOM+6NCJ/jP7dSBivl6uK9+daMSCTNVncFM26eVZtMFEfci\r\nA+uD8EBQT846WKLPljlpKvHl5xe3w0Pw0n2RbonS4SgWTs4/m9V8Ykzsv6a2\r\nh6W2P1Cap4jMGvjMNl1q+5Dqp2ETSaYv+nnWDYnk6KKD/sv7d/fGPzZ3sN8c\r\nTqb0gECS++XlnedocOkeUKzJcnsxzXnxmC6sC4d6kLg7bh+4i9KeZ3AJGztW\r\n4Hiy28QQPgR1l0mFd05mr3cYXYtNzfP08rnNfKlSEXcLTLJZYAEHmFOaF/pn\r\nF6pcA3m04id/RlvVcFAlTVgBrkKLHb482pA6PYxbk1d7L9Ng5RQxCHutpPDm\r\nNx3QrkUAXChi14LBsGJthpCljaQ9Uec9PkE=\r\n=H0b1\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"malchata","email":"jeremy.l.wagner@gmail.com"},"directories":{},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/yall-js_4.0.2_1654283554756_0.9562884844304094"},"_hasShrinkwrap":false}},"time":{"created":"2019-02-08T19:11:27.883Z","2.2.2":"2019-02-08T19:11:27.975Z","modified":"2022-06-03T19:12:35.110Z","2.3.0":"2019-03-16T17:38:44.769Z","2.3.1":"2019-03-19T02:49:35.460Z","3.0.0":"2019-03-23T16:57:50.835Z","2.3.2":"2019-03-23T22:14:39.242Z","3.1.0":"2019-03-24T17:02:22.877Z","3.1.1":"2019-04-02T21:30:35.997Z","3.1.2":"2019-07-10T22:17:57.060Z","3.1.3":"2019-07-25T16:39:59.668Z","3.1.4":"2019-07-27T16:37:41.844Z","3.1.5":"2019-07-31T12:53:45.903Z","3.1.6":"2019-09-21T08:28:05.277Z","3.1.7":"2019-11-22T19:20:50.293Z","3.2.0":"2020-04-03T16:58:14.376Z","4.0.0":"2022-06-03T18:58:11.801Z","4.0.1":"2022-06-03T19:05:26.291Z","4.0.2":"2022-06-03T19:12:34.970Z"},"maintainers":[{"name":"malchata","email":"jeremy.l.wagner@gmail.com"}],"description":"Yet Another Lazy Loader","homepage":"https://github.com/malchata/yall.js#readme","keywords":["lazy load","lazy loader","lazy loading","intersection observer","IntersectionObserver","mutation observer","MutationObserver","requestIdleCallback","images","video","iframe","web performance","requestAnimationFrame"],"repository":{"type":"git","url":"git+ssh://git@github.com/malchata/yall.js.git"},"author":{"name":"Jeremy L. Wagner","email":"jeremy.l.wagner@gmail.com"},"bugs":{"url":"https://github.com/malchata/yall.js/issues"},"license":"MIT","readme":"# yall.js (Yet Another Lazy Loader)\n\n<p align=\"center\">\n  <img src=\"https://img.badgesize.io/malchata/yall.js/main/dist/yall.js?label=Uncompressed\" alt=\"Uncompressed size.\">&nbsp;<img src=\"https://img.badgesize.io/malchata/yall.js/main/dist/yall.js?compression=gzip&label=gzip\" alt=\"gzip size.\">&nbsp;<img src=\"https://img.badgesize.io/malchata/yall.js/main/dist/yall.js?compression=brotli&label=brotli\" alt=\"Brotli size.\">\n</p>\n\nyall.js is a SEO-friendly lazy loader for `<video>` elements as well as CSS background images. It works in all modern browsers. It uses [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) where available. yall.js can also monitor the DOM for changes using [Mutation Observer](https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/) to lazy load elements that have been appended to the DOM after initial load, which may be desirable for single page applications.\n\nyall.js 4 removes lazy loading for `<img>`, `<picture>`, and `<iframe>` elements, as [native lazy loading](https://web.dev/browser-level-image-lazy-loading/) covers these use cases. However, yall.js 4 retains the ability to lazy load autoplaying `<video>` (ala animated GIFs), lazy loading `<video>` element `poster` images, as well as CSS background images.\n\nTo use yall, grab `yall.min.js` (or `yall.min.mjs` if you're the modern sort) from the `dist` directory and slap it on your page. You can also install it with npm:\n\n```shell\nnpm install yall-js\n```\n\n## Usage\n\nThis is version 4 of yall.js, and introduces a named export named `yall` rather than a single default export:\n\n```javascript\n// Import y'all\nimport { yall } from \"yall-js\";\n\n// Invoke!\nyall();\n```\n\nThe above syntax is sufficient if you don't want to pass in any options. [If you _do_ want to specify options](#api-options), you'll need to use a slightly more verbose syntax:\n\n```javascript\n// Import y'all\nimport { yall } from \"yall-js\";\n\n// Invoke!\nyall({\n  observeChanges: true\n});\n```\n\nFrom there, lazy loading elements depends on _what_ you want to lazy load. Let's take a look at what you can do with it.\n\n### `<video>`\n\nyall.js covers two possible lazy loading patterns for video.\n\n#### Lazy-loading videos intended as replacements for animated GIFs\n\nyall.js can lazy load `<video>` elements intended to [replace animated GIFs with autoplaying videos](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/):\n\n```html\n<video class=\"lazy\" autoplay loop muted playsinline>\n  <source data-src=\"video.webm\" type=\"video/webm\">\n  <source data-src=\"video.mp4\" type=\"video/mp4\">\n</video>\n```\n\nThe pattern is largely the same as it is with `<picture>`, only the `lazy` class is applied to the `<video>` element. **Tip:** If you're embedding videos that _don't_ emulate animated GIFs (i.e., non autoplaying video), it's better to _not_ lazy load them. Instead, use the [`preload` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload) to defer loading of video content. Please also note that video autoplay policies can change at any time, meaning your video may not autoplay on some platforms! Such behaviors are not bugs, but rather features designed to respect users' bandwidth and preferences. Filing issues related to video autoplay issues will likely be rejected, as yall.js can't (and won't) override browser policies.\n\n#### Lazy-loading `poster` placeholder images for non-autoplaying video\n\nSometimes you have video you'd rather not autoplay, such as those with an audio track. Or, perhaps you want to be more considerate of your user's bandwidth (how nice of you). In these cases, the [`poster` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-poster) can be used to load a placeholder image. However, these images can also be rather large, especially if you have a number of videos on the page that use this pattern. You can lazy load `poster` images with the following markup pattern:\n\n```html\n<video class=\"lazy\" data-poster=\"placeholder.jpg\" controls preload=\"none\">\n  <source src=\"video.webm\" type=\"video/webm\">\n  <source src=\"video.mp4\" type=\"video/mp4\">\n</video>\n```\n\nThis pattern is slightly different than the one before it. Because we're not trying to emulate animated GIFs, we've removed a number of attributes from the `<video>` element that aren't necessary in this case:\n\n1. We've done away with the usual `data-src` attribute, and specified `preload=\"none\"` to ensure the browser doesn't preload any portion of the video (which, depending on the browser, can't be guaranteed).\n2. To lazy load the `poster` image itself, we specify the image to load in a `data-poster` attribute.\n3. The `controls` attribute is added here to allow the user to control video playback.\n\n**Note:** For the sake of your users, don't mix the above markup patterns. If a video is going to use `autoplay` to replace an animated image, lazy loading a placeholder image via `data-poster` isn't necessary. Furthermore, if you're unsure of what to do, _let browsers handle this stuff and don't use yall.js to manage loading of videos at all!_\n\n### CSS images\n\nLast, but not least, you can use yall.js to lazy load images referenced in CSS. This might be useful if you have a very large `background-image` you'd like to defer. Proper use of this feature requires _both_ HTML and CSS. To start, let's say you have a `<div>` that loads a very large masthead `background-image`:\n\n```html\n<!-- I bet this loads a giant stock photo! -->\n<div class=\"masthead lazy-bg\"></div>\n```\n\nThe key here is the `lazy-bg` class, which is a class yall.js looks for (and can be changed in the options). When yall.js sees elements with this class, it will remove that class and replace it with a class of `lazy-bg-loaded` (also changeable in the options). From here, it's up to you to author CSS that makes use of this class to swap the image in. Such CSS might look like this:\n\n```css\n/* Pre-lazy loading styles */\n.masthead {\n  background: #e6e6e6; /* A little placeholder color */\n  height: 16.66vw;\n  margin: 0 0 1rem;\n}\n\n/* BAM! Lazy loaded! */\n.masthead.lazy-bg-loaded {\n  background: url(\"masthead.jpg\");\n}\n```\n\nThis works because, unlike HTML which loads most resources regardless of their visibility, CSS loads resources only if the current layout builds a CSSOM which includes them. That means if your document's style tree changes later on to request a background image, the browser will fetch it the moment the change is applied. Leaning on this behavior is more sensible than using a mess of `data-` attributes pointing to possible image candidates, which could potentially add a bunch of extra markup and introduce edge cases that are difficult to code for.\n\n## What about users without JavaScript?\n\nSlap on some `<noscript>`:\n\n```html\n<!-- A `<video>` example: -->\n<video class=\"lazy\" preload=\"none\" autoplay loop muted playsinline>\n  <source data-src=\"video.webm\" type=\"video/webm\">\n  <source data-src=\"video.mp4\" type=\"video/mp4\">\n</video>\n<noscript>\n  <video preload=\"none\" autoplay loop muted playsinline>\n    <source src=\"video.webm\" type=\"video/webm\">\n    <source src=\"video.mp4\" type=\"video/mp4\">\n  </video>\n</noscript>\n\n<!-- A `<video>` example: -->\n<video class=\"lazy\" preload=\"none\" autoplay loop muted playsinline data-poster=\"img/video-poster.jpg\">\n  <source src=\"video.webm\" type=\"video/webm\">\n  <source src=\"video.mp4\" type=\"video/mp4\">\n</video>\n<noscript>\n  <video preload=\"none\" autoplay loop muted playsinline poster=\"img/video-poster.jpg\">\n    <source src=\"video.webm\" type=\"video/webm\">\n    <source src=\"video.mp4\" type=\"video/mp4\">\n  </video>\n</noscript>\n```\n\nThen place a `no-js` class on the `<html>` element:\n\n```html\n<html class=\"no-js\">\n```\n\nFinally, add this one line `<script>` before any `<link>` or `<style>` elements in the document `<head>`:\n\n```html\n<!-- Remove the no-js class on the <html> element if JavaScript is on -->\n<script>document.documentElement.classList.remove(\"no-js\")</script>\n```\n\nNormally, this script will remove the `no-js` class from the `<html>` element as the page loads, but if JavaScript is turned off, this never happens. From there, you can add some CSS that hides elements with a `class` of `lazy` when the `no-js` class is present on the `<html>` element:\n\n```css\n/* Hide .lazy elements if JavaScript is off */\n.no-js .lazy {\n  display: none;\n}\n```\n\nTo see all these examples in action, clone the repo, install packages, run `npm test`, and check out the demos on your local machine at [http://localhost:8080](http://localhost:8080).\n\n## API options\n\nWhen you call the main `yall` initializing function, you can pass an in an options object. Here are the current options available:\n\n### `lazyClass`\n\n**default:** `\"lazy\"`<br>\nThe element class used by yall.js to find elements to lazy load. Change this is if a `class` attribute value of `lazy` conflicts with your application.\n\n### `lazyBackgroundClass`\n\n**default:** `\"lazy-bg\"`<br>\nThe element class used by yall.js to find elements to lazy load CSS background images for. Change this if you'd prefer not to use the default.\n\n### `lazyBackgroundLoaded`\n\n**default:** `\"lazy-bg-loaded\"`<br>\nWhen yall.js finds elements using the class specified by `lazyBackgroundClass`, it will remove that class and put this one in its place. This will be the class you use in your CSS to bring in your background image when the affected element is scrolled into the viewport.\n\n### `threshold`\n\n**default:** `200`<br>\nThe threshold (in pixels) for how far elements need to be within the viewport to begin lazy loading.\n\n### `events`\n**default:** `{}`<br>\nAn object of events that get sent directly to [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) for each element to be lazy loaded. Rather than building an opinionated, bespoke event management system, this system gets out of your way and lets you to specify whatever events are possible to bind with `addEventListener`. Here's an example below:\n\n```javascript\nyall({\n  events: {\n    // The object key is sent as the first argument to `addEventListener`,\n    // which is the event. The corresponding value can be the callback if you\n    // don't want to send any options to `addEventListener`.\n    load: function (event) {\n      if (!event.target.classList.contains(\"lazy\")) {\n        event.target.classList.add(\"yall-loaded\");\n      }\n    },\n    // If we want to pass options to the third argument in `addEventListener`,\n    // we can use a nested object syntax like so:\n    error: {\n      // Here, the `listener` member is the callback.\n      listener: function (event) {\n        if (!event.target.classList.contains(\"lazy\") && event.target.nodeName == \"VIDEO\") {\n          event.target.classList.add(\"yall-error\");\n        }\n      },\n      // The option below is sent as the third argument to `addEventListener`,\n      // offering more control over how events are bound. If you want to\n      // specify `useCapture` in lieu of options pass a boolean here instead.\n      options: {\n        once: true\n      }\n    }\n  }\n});\n```\n\nEvents for yall.js are bound at initialization time (often `DOMContentLoaded`). This means that some events _could_ fire multiple times, depending on the event. For instance, in the above `load` event example, you can see that we check for the default class of `lazy` on the element. This is because the `load` event could fire when the initial image placeholder loaded (if one is specified) _and_ when the final image is lazy loaded.\n\nThe advantage of this approach is that you can do pretty much anything you want in any of the events on the elements yall.js observes. The disadvantage is that it places the responsibility squarely on you to manage events. If you think yall.js has a bug in this behavior, do your due diligence to research whether your event callback code is buggy before filing issues.\n\n### `observeChanges`\n\n**default:** `false`<br>\nUse a `MutationObserver` to monitor the DOM for changes. This is useful if you're using yall.js in a single page application and want to lazy load resources for markup injected into the page after initial page render.\n\n### `observeRootSelector`\n\n**default:** `\"body\"`<br>\nIf `observeChanges` is set to `true`, the value of this string is fed into `document.querySelector` to limit the scope in which the Mutation Observer looks for DOM changes. The `<body>` element is monitored by default, but you can confine the observer to any valid CSS selector (e.g., `#main-wrapper`).\n\n### `mutationObserverOptions`\n\n**default:** `{ childList: true, subtree: true }`<br>\nOptions to pass to the `MutationObserver` instance. Read [this MDN guide](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#MutationObserverInit) for a list of options. It's very possible that changing this value could result in yall.js failing to lazy load resources that are appended to the DOM later on.\n\n## Words of advice\n\nUnlike previous versions of yall-js, compatibility back to IE 11 is no longer a goal. If you need compatibility with older browsers, install the previous release of yall.js like so:\n\n```shell\nnpm i yall@3.2.0\n```\n\nAlso, it is not this script's job to minimize [layout shifts](https://web.dev/cls/) for you. [Use appropriate `width` and `height` attributes](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/), styles, and lightweight placeholders for your images.\n\nFor `<video>` elements, avoid lazy loading a placeholder with the `data-poster` attribute for autoplaying videos and just use `poster`. On the other hand, _do_ consider lazy loading a placeholder image with `data-poster` for non-autoplaying videos. Or you can opt _not_ to use a `poster` image. Your website, your call.\n\nAlso, do _not_ lazy load resources that are likely to near the top of the page&mdash;or \"above the fold\", as it were. Doing so is an anti-pattern in that those resources will not begin loading until yall.js has been loaded, which may take much longer than if those resources were loaded normally. Such a pattern will negatively affect your page's [LCP](https://web.dev/lcp/).\n\n## Contributing\n\nPlease read the [contribution guidelines](https://github.com/malchata/yall.js/blob/master/CONTRIBUTING.md). If you think I'm some kind of grumpy crank after reading that, please remember that this is a hobby project you can use for free.\n","readmeFilename":"README.md"}