[
  {
    "path": ".babelrc",
    "content": "{\n  \"ignore\": [\"node_modules/**\"],\n  \"presets\": [[\"@babel/env\", { \"modules\": false }]],\n  \"env\": {\n    \"test\": {\n      \"presets\": [\"@babel/preset-env\"]\n    }\n  }\n}\n"
  },
  {
    "path": ".eslintignore",
    "content": "dist/**/*.js"
  },
  {
    "path": ".eslintrc.json",
    "content": "{\n\t\"parserOptions\": {\n\t\t\"ecmaVersion\": 6,\n\t\t\"sourceType\": \"module\"\n\t},\n\t\"env\": {\n\t\t\"browser\": true,\n\t\t\"jest\": true\n\t},\n\t\"rules\": {\n\t\t\"quotes\": [2, \"double\"],\n\t\t\"block-scoped-var\": 1,\n\t\t\"class-methods-use-this\": 1,\n\t\t\"complexity\": 1,\n\t\t\"consistent-return\": 1,\n\t\t\"curly\": 2,\n\t\t\"default-case\": 1,\n\t\t\"dot-location\": 1,\n\t\t\"dot-notation\": 1,\n\t\t\"eqeqeq\": 2,\n\t\t\"guard-for-in\": 1,\n\t\t\"no-alert\": 1,\n\t\t\"no-caller\": 1,\n\t\t\"no-case-declarations\": 1,\n\t\t\"no-div-regex\": 1,\n\t\t\"no-else-return\": 1,\n\t\t\"no-empty-function\": 1,\n\t\t\"no-empty-pattern\": 1,\n\t\t\"no-eq-null\": 1,\n\t\t\"no-eval\": 1,\n\t\t\"no-extend-native\": 1,\n\t\t\"no-extra-bind\": 1,\n\t\t\"no-extra-label\": 1,\n\t\t\"no-fallthrough\": 1,\n\t\t\"no-floating-decimal\": 1,\n\t\t\"no-global-assign\": 1,\n\t\t\"no-implicit-coercion\": 0,\n\t\t\"no-implicit-globals\": 1,\n\t\t\"no-implied-eval\": 1,\n\t\t\"no-invalid-this\": 1,\n\t\t\"no-iterator\": 1,\n\t\t\"no-labels\": 1,\n\t\t\"no-lone-blocks\": 1,\n\t\t\"no-loop-func\": 1,\n\t\t\"no-magic-numbers\": [1, { \"ignore\": [-1, 0, 1] }],\n\t\t\"no-multi-spaces\": 1,\n\t\t\"no-multi-str\": 1,\n\t\t\"no-new\": 1,\n\t\t\"no-new-func\": 1,\n\t\t\"no-new-wrappers\": 1,\n\t\t\"no-octal\": 1,\n\t\t\"no-octal-escape\": 1,\n\t\t\"no-param-reassign\": 1,\n\t\t\"no-proto\": 1,\n\t\t\"no-redeclare\": 1,\n\t\t\"no-restricted-properties\": 1,\n\t\t\"no-return-assign\": 1,\n\t\t\"no-return-await\": 1,\n\t\t\"no-script-url\": 1,\n\t\t\"no-self-assign\": 1,\n\t\t\"no-self-compare\": 1,\n\t\t\"no-sequences\": 1,\n\t\t\"no-throw-literal\": 1,\n\t\t\"no-unmodified-loop-condition\": 1,\n\t\t\"no-unused-expressions\": 1,\n\t\t\"no-unused-labels\": 1,\n\t\t\"no-useless-call\": 1,\n\t\t\"no-useless-concat\": 1,\n\t\t\"no-useless-escape\": 1,\n\t\t\"no-useless-return\": 1,\n\t\t\"no-void\": 1,\n\t\t\"no-warning-comments\": 1,\n\t\t\"no-with\": 1,\n\t\t\"prefer-promise-reject-errors\": 1,\n\t\t\"radix\": 1,\n\t\t\"require-await\": 1,\n\t\t\"vars-on-top\": 1,\n\t\t\"wrap-iife\": 1,\n\t\t\"yoda\": 1\n\t}\n}\n"
  },
  {
    "path": ".gitattributes",
    "content": "# Auto detect text files and perform LF normalization\n* text=auto\n\n# Custom for Visual Studio\n*.cs     diff=csharp\n*.sln    merge=union\n*.csproj merge=union\n*.vbproj merge=union\n*.fsproj merge=union\n*.dbproj merge=union\n\n# Standard to msysgit\n*.doc  diff=astextplain\n*.DOC  diff=astextplain\n*.docx diff=astextplain\n*.DOCX diff=astextplain\n*.dot  diff=astextplain\n*.DOT  diff=astextplain\n*.pdf  diff=astextplain\n*.PDF  diff=astextplain\n*.rtf  diff=astextplain\n*.RTF  diff=astextplain"
  },
  {
    "path": ".github/CONTRIBUTING.md",
    "content": "Thank you for taking the time to contribute!\n\nTo report a bug or request an enhancement or a feature, use the [issues page](https://github.com/verlok/vanilla-lazyload/issues) on github\n\nIf you just want to show your appreciation for this script, how about [buying a coffee](https://ko-fi.com/verlok) to its author?\n\nIf you want to contribute actively with your own code, please:\n\n1. fork the repo on your namespace\n2. open a new branch\n3. develop your contribution on the branch\n4. create a pull request towards this repo\n\nI recommend to do **one pull request per feature** to make sure your contribution is easy to review and accept.\n\nThank you and... may the force be with you!\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/bug_report.md",
    "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: 'TYPE: Bug'\nassignees: ''\n\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**LazyLoad version**\nPlease report which version of LazyLoad you're using.\n- Version [e.g. 8.x.x, 10.x.x, 11.x.x]\n\n**Desktop (please complete the following information):**\n - OS: [e.g. iOS]\n - Browser [e.g. chrome, safari]\n - Version [e.g. 22]\n\n**Smartphone (please complete the following information):**\n - Device: [e.g. iPhone6]\n - OS: [e.g. iOS8.1]\n - Browser [e.g. stock browser, safari]\n - Version [e.g. 22]\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Additional context**\nAdd any other context about the problem here.\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/feature_request.md",
    "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: 'TYPE: Enhancement'\nassignees: ''\n\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/support-request.md",
    "content": "---\nname: Support request\nabout: Ask a question or support\ntitle: ''\nlabels: 'TYPE: Question'\nassignees: ''\n\n---\n\n**Is your support request related to a problem? Please describe.**\nA clear and concise description of what the problem is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**LazyLoad version**\nPlease report which version of LazyLoad you're using.\n- Version [e.g. 8.x.x, 10.x.x, 11.x.x]\n\n**Desktop (please complete the following information):**\n - OS: [e.g. iOS]\n - Browser [e.g. chrome, safari]\n - Version [e.g. 22]\n\n**Smartphone (please complete the following information):**\n - Device: [e.g. iPhone6]\n - OS: [e.g. iOS8.1]\n - Browser [e.g. stock browser, safari]\n - Version [e.g. 22]\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Additional context**\nAdd any other context about the problem here.\n"
  },
  {
    "path": ".github/workflows/ci.yml",
    "content": "name: Node.js CI\n\non:\n  - push\n  - pull_request\n\njobs:\n  build:\n\n    runs-on: ${{ matrix.os }}\n\n    strategy:\n      matrix:\n        node-version: [lts/*, latest]\n        os: [ubuntu-latest, macos-latest, windows-latest]\n        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/\n\n    steps:\n      - uses: actions/checkout@v4\n      - name: Use Node.js ${{ matrix.node-version }}\n        uses: actions/setup-node@v4\n        with:\n          node-version: ${{ matrix.node-version }}\n          cache: 'npm'\n\n      - run: npm install\n\n      - run: npm run build --if-present\n\n      - run: npm run test:unit\n"
  },
  {
    "path": ".github/workflows/playwright.yml",
    "content": "name: Playwright Tests\non:\n  push:\n    branches: [main, master, develop, \"feature/**\"]\n  pull_request:\n    branches: [main, master]\njobs:\n  test:\n    timeout-minutes: 60\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: lts/*\n      - name: Install dependencies\n        run: npm ci\n      - name: Install Playwright Browsers\n        run: npx playwright install --with-deps\n      - name: Run Playwright tests\n        run: npx playwright test\n      - uses: actions/upload-artifact@v4\n        if: always()\n        with:\n          name: playwright-report\n          path: playwright-report/\n          retention-days: 30\n"
  },
  {
    "path": ".gitignore",
    "content": "Thumbs.db\nehthumbs.db\n\nDesktop.ini\n\n$RECYCLE.BIN/\n\n*.cab\n*.msi\n*.msm\n*.msp\n\n.DS_Store\n.AppleDouble\n.LSOverride\n\nIcon\n\n._*\n\n.Spotlight-V100\n.Trashes\n\n.AppleDB\n.AppleDesktop\nNetwork Trash Folder\nTemporary Items\n.apdisk\n\n.idea\n\nnode_modules\n\n_site\n.sass-cache\n\n/test-results/\n/playwright-report/\n/blob-report/\n/playwright/.cache/\n\ncoverage"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"tabWidth\": 2,\n  \"useTabs\": false,\n  \"printWidth\": 100,\n  \"trailingComma\": \"none\"\n}\n"
  },
  {
    "path": ".vscode/settings.json",
    "content": "{\n  \"editor.codeActionsOnSave\": {\n    \"source.fixAll.eslint\": \"explicit\"\n  },\n  \"editor.tabSize\": 4,\n  \"editor.defaultFormatter\": \"esbenp.prettier-vscode\"\n}"
  },
  {
    "path": "CHANGELOG.md",
    "content": "# CHANGELOG\n\n## Version 19\n\n#### 19.1.3\n\n- File `CHANGELOG.md` is now included in the package and installed along with it\n- Updated Babel, Rollup and Playwright to the latest versions\n\n#### 19.1.2\n\n- Modernized code and smaller file bundles, everything is now shipped as in the ES2015 format.\n\n#### 19.1.1\n\n- Removed code to support image-set on legacy versions of Chromium browsers\n- Added coverage with 2 more demos for images with single src and a placeholder image\n\n#### 19.1.0\n\n- Added end to end tests to expand test coverage to more use cases and cross browser\n\n#### 19.0.5\n\n- Removed `.eslintrc.json`, `LICENSE`, `CHANGELOG.md`, `CODE_OF_CONDUCT.md`, `README.md`, `package.json` from the package files, as they didn't have any impact on [code quality](https://docs.npmjs.com/searching-for-and-choosing-packages-to-download#quality).\n\n#### 19.0.4\n\n- Removed Babel plugin to polyfill `Object.assign()`, as suggested in #611.\n\n#### 19.0.3\n\n- Files `.eslintrc.json`, `LICENSE`, `CHANGELOG.md`, `CODE_OF_CONDUCT.md`, `README.md`, `package.json` are now included in the package\n\n#### 19.0.1\n\n- Restored compatibility for bundlers that used this module, see #609\n\n#### 19.0.0\n\n- Rollup setup enhancement \n  - Refactored the Rollup setup to improve performance and maintainability.\n  - Switched to ES6 module format for better compatibility and readability.\n  - Enabled tree shaking and module preservation to optimize the build output.\n- Added [ESM demo](demos/esm.html) to showcase the functionality of the esm module.\n- Updated various dependencies to their latest versions for better compatibility and security\n- Removed AMD module from the `/dist` folder, as it's been unused since version 11\n- Removed AMD-related demos\n\n## Version 18\n\n#### 18.0.0\n\n- **Dropped support for Internet Explorer 11**\n- Modernized code\n- Smaller file\n\n## Version 17\n\n#### 17.9.0\n\n- Allowing to pass empty string (`\"\"`) as value for class options (`class_loading`, `class_applied`, `class_loaded`, `class_error`, `class_entered`, `class_exited`) so that no DOM mutation will happen if not necessary. This is a potential performance improvement. Suggested in [#605](https://github.com/verlok/vanilla-lazyload/issues/605).\n\n#### 17.8.8\n\n- Fixed dependency issues detected by `npm audit`\n\n#### 17.8.5\n\n- Improved callbacks check by introducing type check (must be `function`)\n\n#### 17.8.4\n\n- Updated link to demos in the documentation.\n\n#### 17.8.3\n\n- Fixed `callback_error` in background images demos, like suggested in #573. Thanks to @Soul244.\n\n#### 17.8.2\n\n- Fixed a bug which occurred if the network connection went off and on again after a LazyLoad instance was destroyed\n\n#### 17.8.1\n\n- Updated Typescript typings\n\n#### 17.8.0\n\n- Added the ability to lazyload background images with CSS `image-set()` via `data-bg-set`.\n\n#### 17.7.0\n\n- Added the new option `restore_on_error` to restore original attributes on error.\n\n#### 17.6.1\n\n- Removed nasty \"debugger\" from code (sorry about that rookie mistake!)\n\n#### 17.6.0\n\n- Added ability to lazily load the `<object>` tag, as requested in #177. Useful to lazily load animated SVGs.\n\n#### 17.5.1\n\n- Updated Typescript typings\n\n#### 17.5.0\n\n- Added the ability to restore DOM to its original state through the `restoreAll()` method.\n- Destroy demo became [restore and destroy demo](demos/restore_destroy.html)\n\n#### 17.4.0\n\n- Adding native lazy loading for videos, as discussed in #527. Thanks to @saschaeggi.\n- Updated the `native_lazyload_conditional.html` demo with the new best practice for cross browser native lazy loading.\n\n#### 17.3.2\n\n- Fixes double trigger of `callback_load` after a watched image was loaded using the static `load()` method (#526). Thanks to @nick-vincent.\n\n#### 17.3.1\n\n- Removed `caniuse-lite` from dependencies. Fixes #505. Thanks to @ar53n.\n\n#### 17.3.0\n\n- Added `class_entered` and `class_exited` options to apply a class when an element entered and/or exited the viewport\n\n#### 17.2.0\n\n- Rolling back the \"`data` attribute cleanup\" feature that was released on 16.1.0 and was causing issues like [#484](https://github.com/verlok/vanilla-lazyload/issues/484) when more than one instance of LazyLoad were working on the same elements of the page - the script is also 500 bytes lighter now\n\n#### 17.1.3\n\n- Added missing types (#480), thanks to @ar53n (#482)\n\n#### 17.1.2\n\n- Fixed TypeScript typings (#475), thanks to @ar53n (#477)\n\n#### 17.1.1\n\n- Fixing npm audit vulnerabilities\n\n#### 17.1.0\n\n- Unobserve all elements on `loadAll()` call. It's better for performance, and it solves #469.\n- Added some hidden images in the `load_all.html` demo\n\n#### 17.0.1\n\n- Bug fix: `callback_exit()` was not being called on non-image elements (#468).\n\n#### 17.0.0\n\n- The `elements_selector` option now defaults to  `.lazy` (was `img`)\n- The `cancel_on_exit` option now defaults to `true` (was `false`)\n\nSee [UPGRADE.md](UPGRADE.md) to understand **if** you are impacted by any breaking change and **how** to upgrade from previous versions.\n\n---\n\n**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## Version 16\n\n#### 16.1.0\n\nImproved speed, cleaning DOM, better working destroy, and also fixed 2 bugs.\n\n- Cleaning up `data` attributes from the DOM when finished using them (mainly when elements have finished loading)\n- Improved `destroy` method, which now also removes lazyload's additions to the DOM elements\n- Video elements are now only listening to the `loadeddata` event, no longer to `load`\n- Removed constants containing strings. I thought it would produced shorter minified code, but discovered that terser expands them to strings.\n- Bugfix: when lazily loading videos, the error `_poster_ is undefined` was thrown\n- Bugfix: when selecting native lazy loading, the `loading` class was added without knowing whether or not the loading had started\n\n#### 16.0.0\n\nFunctional changes:\n\n- Removed call to deprecated `callback_reveal`\n- Removed deprecated instance `load()` method in favor of the static `LazyLoad.load()` method\n- Replaced `auto_unobserve` with `unobserve_completed`, still defaulting to `true`\n- Introduced a new `unobserve_entered` option (useful to execute lazy functions once)\n- Created a demo called `lazy_functions.html` to show how to execute functions as elements enter the viewport\n- Wrote a new recipe to facilitate the lazy execution of scripts/functions\n- Renamed instance method `resetElementStatus()` to the static `LazyLoad.resetStatus()`\n- Removed the `load_delay` option since there's no more use for it\n- Removed the `load_delay` related demos\n\nSee [UPGRADE.md](UPGRADE.md) to understand **if** you are impacted by any breaking change and **how** to upgrade from previous versions.\n\nInternal changes:\n\n- Simplified management of the `cancel_on_exit` with less increase/decrease of the `toLoadCount` property\n- Refactored counters functions in a new `lazyload.counters` file\n\n---\n\n**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## Version 15\n\n#### 15.2.0\n\nOPTIMIZE FOR SLOW CONNECTIONS WITH `cancel_on_exit`\n\nWant to optimize speed for users who scroll down fast on a slow connection? Just set `cancel_on_exit: true` and LazyLoad will cancel the download of images exiting the viewport while still loading, eventually restoring the original attributes.\n\n- Introduced the new `cancel_on_exit` option.\n- Introduced the `callback_cancel` option, just in case you want to perform any additional action whenever a download gets canceled by `cancel_on_exit`.\n- Created a new demo named `cancel_on_exit.html` so you can try the new `cancel_on_exit` option live.\n- Set `cancel_on_exit` to `true` in the following demos, so you can test how it behaves...\n  - `image_ph_inline.html`, with an inline SVG placeholder\n  - `image_ph_external.html`, with an external SVG placeholder\n  - `delay_test.html`, in conjuction with the `delay_load` option\n  - `fade_in.html`, with a beautiful fade-in effect.\n\nThe `cancel_on_exit` option applies only to images so to the `img` (and `picture`) tags. It doesn't work for background images, `iframe`s nor `video`s.\n\nThe `cancel_on_exit` option will probably default to `true` starting from the next major version, so give it a try! And please report your feedback in the comments of [#438](https://github.com/verlok/vanilla-lazyload/issues/438).\n\nAPI\n\n- Added the `resetElementStatus()` method for when you need to tell LazyLoad to consider an image (or other DOM element) again. This is particularly useful if you change the `data-src` attribute after the previous `data-src` was loaded). See the [API section](README.md#-api) in the README file for more information.\n\nFIX\n\n- The `callback_exit` callback was called several times (for every images out of the viewport) at instance creation or upon `update()` calls. Now the callback is properly called only when any element exits the viewport.\n\nINTERNALS\n\n- Improved script performance by reducing the number of event listeners used for loading elements.\n- Changed the values that the (internally used) `data-ll-status` attribute can take. Removed the status `\"observed\"` (it was useless) and introduced status `\"delayed\"`.\n\n#### 15.1.1\n\nFixed a bug when loading lazy background images on HiDPI screens, `data-bg-hidpi` was mandatory, not it fallbacks to `data-bg`. #430\n\n#### 15.1.0\n\nLazy background images just gained support for hiDPI (\"retina\") screens!\nPlace your standard resolution images in the `data-bg` attribute and your hiDPI images in `data-bg-hidpi`.\nSame for `data-bg-multi` and `data-bg-multi-hidpi`.\n\n#### 15.0.0\n\n**Lazy background images gained loaded/error classes and callbacks! 🎉**\n\n**Breaking changes impacting lazy background images!** ⚠ See [UPGRADE.md](UPGRADE.md) to understand **if** you are impacted and **how** to upgrade from previous versions.\n\n- Lazy loading of **one background image** using the `data-bg` attribute, now manages the `load` and `error` events, so they are applied the classes defined in the `class_loading`/`class_loaded`/`class_error`, and the callbacks defined in `callback_loading`/`callback_loaded`/`callback_error`.\n- Lazy loading of **multiple background images** is still possible via the `data-bg-multi` attribute. In this case, the `load` and `error` events are not managed. The `class_applied` and `callback_applied` can be used to understand when the multiple background was applied to the element.\n- Updated background images demos:\n  - background-images.html -> single background images\n  - background-images-multi.html -> multiple background images\n- Added [UPGRADE.md](UPGRADE.md), a guide on how to upgrade from previous versions (from version 12 up)\n\n---\n\n**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## Version 14\n\n#### 14.0.1\n\nFixed error TS1036: Statements are not allowed in ambient contexts. Closes #427\n\n#### 14.0.0\n\n🎉 **Major refactoring and performance improvement!**\n🔍 File size stays tiny: only 2.07 KB gZipped\n\n**Settings**\n\n- `callback_loading` is called when an element started loading\n- `callback_reveal` is now **⚠ DEPRECATED, use `callback_loading` instead** (it's the same thing, it was just renamed). `callback_reveal` will be removed and will stop working in version 15.\n\n**Instance methods**\n\n- `update()` method now **also unobserves deleted elements**, instead of just looking for and observing new elements\n- `destroy()` **destroys better** than it did before, `delete`-ing properties instead of setting their values to `null`\n- `load()` method (as an instance method) is now **⚠ DEPRECATED, use the static method instead**. If you were using `aLazyLoadInstance.load(element)` you should change it to `LazyLoad.load(element, settings)`.\n\n**Static methods**\n\n- `load()` was added as a static method. Note that if you need to use custom settings, you need to pass them in the `settings` parameter.\n\n**Instance properties**\n\n- Added `toLoadCount`. It's the counter of the elements that haven't been lazyloaded yet.\n\n**DOM**\n\n- Removed the `data-was-processed` attribute, that was added to mark lazy DOM elements as \"already managed\". If you were manually handling that attribute to obtain some goal, this is a potentially breaking change. You should now refer to the `data-ll-status` instead.\n- Added the `data-ll-status` attribute, which is now used to mark the status of a lazy DOM element. The values it can take are: `observing` (not loaded yet), `loading` (loading started), `loaded` (load completed), `error` (an error has occured), `native` (similar to `observing`, but managed by native lazy loading).\n\n---\n\n**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## Version 13\n\n#### 13.0.1\n\n- Fixed a JS error that could happen to IE11 users after going offline and back online\n- Minor refactoring for better readibility and lighter code (and files)!\n\n#### 13.0.0\n\n- Added the minified version of `dist/lazyload.esm.js` as `dist/lazyload.esm.min.js`, so now you can effortlessly use it with an ES module `import` statement when using `type=\"module\"`\n- Reduced files weight even more! `dist/lazyload.iife.min.js` now weights only 2.03 KB GZipped\n- Removed the `callback_set` callback that was **deprecated** since version 11 in favour of `callback_reveal`\n- Removed sourcemaps (they were probably used only by the authors, but if anyone was actually needing them, we can bring them back)\n- Hidden the `_extends` function inside LazyLoad's scope (it was global before)\n- Updated build tooling: removed Gulp, now using Rollup & Babel only\n\n## Version 12\n\n#### 12.5.1\n\nRestored IE 11 compatibility, which was broken since 12.2.0. See #414.\nThanks to @ninosaurus for reporting.\n\n#### 12.5.0\n\nThe once-private `_loadingCount` property is now public and renamed to `loadingCount`. This property contains the number of images that are currently downloading from the network, limitedly to the ones managed by an instance of LazyLoad. This is particularly useful to understand whether or not is safe to destroy an instance of LazyLoad. See implementation in the [destroy demo](demos/destroy.html).\n\nThanks to @wzhscript and @eugene-stativka.\n\n#### 12.4.0\n\nVideo `poster`s can now be loaded lazily, as requested in #365\n\n#### 12.3.0\n\nCallbacks now pass more arguments!\n\n`callback_enter`, `callback_exit` now pass:\n\n1. the DOM element that entered / exited the viewport\n2. the `IntersectionObserverEntry` that triggered the enter/exit event\n3. the LazyLoad instance\n\n`callback_load`, `callback_error`, `callback_reveal` now pass\n\n1. the DOM element that entered / exited the viewport\n2. the LazyLoad instance\n\n`callback_finish` now passes:\n\n1. the LazyLoad instance\n\nThe README file has been updated accordingly.\n\n#### 12.2.0\n\nReleased new feature \"retry when back online\". Now if your users lose the internet connection causing errors on images loading, this script tries and loads those images again when the connection is restored.\n\n#### 12.1.1\n\nSolved a bug with Internet Explorer 11 and the W3C polyfill, as reported in #383.\n\n#### 12.1.0\n\n- Updated npm dev dependencies\n- Added the new `image_ph_inline.html`, with an inline SVG placeholder\n- Added the new `image_ph_external.html`, with an external SVG placeholder\n\n#### 12.0.3\n\nUpdated the IntersectionObserver polyfill to version 0.7.0\n\n#### 12.0.2\n\nImproved detection of browser support of IntersectionObserver, as suggested in #362. Thanks to @kaldonir\n\n#### 12.0.1\n\nUpdated CHANGELOG.md and README.md to mention the change of the option name `callback_load` which is called `callback_loaded` in versions 11.0.0 and above.\n\n#### 12.0.0\n\n- Reorganized code\n- Improved native lazy loading demos\n- Aligned console messages throughout all demos.\n\n#### 12.0.0-beta.0\n\n- Added the `use_native` option which enables _native lazy loading_ (where supported) with the `loading=\"lazy\"` attribute. See #331\n- Added two demos:\n  - native_lazyload_conditional.html which you can use to test the `use_native` option\n  - native_lazyload.html which always uses native lazy loading (without JS) just to test how it works beyond the LazyLoad script\n- Refactored the constructor and the `update` method\n\n## Version 11\n\n#### 11.0.6\n\nRestored the `callback_set` callback as **deprecated**, in order to make the upgrade from v.10 easier.\n\n#### 11.0.5\n\nFixed the `module` property of this package.json, which was pointing to a non-existing dist file.\n\n#### 11.0.4\n\nFixed the `main` property of this package.json, which was pointing to a non-existing dist file.\n\n#### 11.0.3\n\nRollback of the patch applied in 11.0.2 since it gave strange results in some cases. See #293. Thanks to @davejamesmiller for the analysis and the report.\n\n#### 11.0.2\n\nApplied a patch to resolve #293 a [Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=910741#c13) already fixed in Chrome 72. Thanks to @dverbovyi for the analysis and the report.\n\n#### 11.0.1\n\nSquashed a nasty bug that occurred on IE 11 and Safari when the `IntersectionObserver` polyfill wasn't loaded before LazyLoad.\n\n#### 11.0.0\n\n- Changed bundle file name of ES Module from `lazyload.es2015.js` to `lazyload.esm.js`\n- Removed the `to_webp` option (see issue #288)\n- Ceased support and development of LazyLoad v.8 (see issue #306)\n  version. If you were using it, please update your code to use `callback_reveal` instead.\n- Private methods like `_setObserver`, `_onIntersection` etc. are now hidden from the outside.\n- Added the `auto_unobserve` boolean option, see API.\n- Bugfix: `loadAll()` didn't unobserve elements.\n- Updated to Jest 24, Babel 7, etc.\n- Fixed dev dependencies vulnerabilities\n- Updated callbacks. See below:\n\nCallbacks updated:\n\n- **Changed** `callback_enter`. This callback is now called whenever an element enters the viewport, even when `load_delay` is set. In previous versions, this callback was delayed until an element started loading if a `load_delay` was set. Note that this is a **possible breaking change**, which you can fix using `callback_reveal` instead.\n- **Renamed** `callback_loaded` is the new name of `callback_load`.\n- **Added** `callback_exit`. This callback is called whenever an element exits the viewport, even if a `load_delay` is set.\n- **Added** `callback_reveal`. This callback is called just after an element starts loading.\n- **Deprecated** `callback_set`. This callback still works\\*, but will be removed in the next major\n\n\\* it didn't work from versions 11.0.0 to 11.0.5, it still works from 11.0.6.\n\n## Version 10\n\n#### 10.20.1\n\nFixed a bug for which LazyLoad didn't copy the `data-sizes` attribute value to `sizes` in `source` tags inside `picture`. See #307.\n\n#### 10.20.0\n\nImproved WebP detection to work correctly on Firefox too, see #298.\n\nThanks to @ipernet for contributing.\n\n#### 10.19.1\n\n- Fixed build for those using React + SSR, see #287\n- TypeScript definitions clearified, see #283\n- Gulp updated to v.4.0.0 to make it work with node 10\n\nThanks to @AlexCSR and @muturgan for contributing.\n\n#### 10.19.0\n\n- Added the ability to know when all images have been downloaded through the `callback_finish` callback.\n- Added the file `demos/print.html` to demo how to print lazy images.\n\n#### 10.18.0\n\nAdded the ability to have multiple background images, through the new `data_bg` option.\n\n#### 10.17.0\n\nAdded the ability to set different thresholds for the scrolling area, through the new `thresholds` option.\n\n#### 10.16.2\n\n**BUGFIX**: Class `loaded` was not applied to a loaded video (issue #239).\n\n#### 10.16.1\n\n**BUGFIX**: Autoplaying video not loaded correctly after entering the viewport (issue #240). Thanks to @maeligg.\n\n#### 10.16.0\n\nAdded new option `load_delay` to skip loading when fast scrolling occurs, as requested in issues #235 and #166.\nPass in a number of milliseconds, and each image will be loaded after it stayed inside that viewport for that time.\n\n#### 10.15.0\n\n- Refactorized code & improved script performance\n- **BUGFIX**: Fixed webpack import (issue #230) `TypeError: default is not a constructor`\n\n#### 10.14.0\n\nNow supporting WebP through dynamic extension rename if the user browser is compatible.\n\n#### 10.13.0\n\n- Shortened the RegEx for crawlers detection (shaved a few bytes)\n- Released LazyLoad in new module types! Enjoy the new flavours :)\n\n| Filename               | Module Type                                    | Advantages                                                         |\n| ---------------------- | ---------------------------------------------- | ------------------------------------------------------------------ |\n| `lazyload.min.js`      | UMD (Universal Module Definition)              | Works pretty much everywhere, even in common-js contexts           |\n| `lazyload.iife.min.js` | IIFE (Immediately Invoked Function Expression) | Works as in-page `<script src=\"\">`, ~0.5kb smaller minified        |\n| `lazyload.amd.min.js`  | AMD (Asynchronous Module Definition)           | Works with the _require.js_ module loader, ~0.5kb smaller minified |\n| `lazyload.es2015.js`   | ES Module type                                 | Exports `LazyLoad` so you can import it in your project            |\n\n#### 10.12.0\n\nSEO! Expanded SEO-friendliness to more crawlers, Bingbot included.\n\n#### 10.11.1\n\n**BUGFIX**: Fixed issue #225. Due to mistyped BOT detection, in version 10.11.0 all images were loaded as soon as `LazyLoad` was created.\n\n#### 10.11.0\n\nSEO! Version 10.x is now as SEO-friendly as version 8.x.\n\n#### 10.10.0\n\nAdded a public `load` method to lazyload any element.\n\n#### 10.9.0\n\nAdded the ability to lazily set the `sizes` attribute via a `data-sizes` attribute.\nSee the [README](README.md) file for more information.\n\n#### 10.8.0\n\nAdded a public `loadAll` method to loading all the images at once, as asked in #193.\n\n#### 10.7.0\n\n- Added support for the `<video>` HTML tag and descending `<source>` tags.\n  Now you can lazily load your videos too!\n- Created the `video.html` demo.\n\n#### 10.6.0\n\n- Added a demo with a popup layer and images injected after popup open, to help with #196.\n- Updated the `background_images` demo with a custom management of the loading class and the loaded event callback.\n\n#### 10.5.2\n\nAdded a security check on lazy elements' parents.\n\n#### 10.5.1\n\nJust a refactoring over previous version.\n\n#### 10.5.0\n\nAdded node support by merging pull request #188, \"node-support\" by @klarstrup.\n\nWith these changes in place, simply importing vanilla-lazyload without using it won't crash Node by itself. This is important for isomorphic/universal/server rendered setups where the same code runs on both the server and the browser.\n\n#### 10.4.2\n\nFixed a bug for which sometimes images wouldn't reveal on Chrome 65 (see issue #165).\n\n#### 10.4.1\n\nUpdated `dist` folder.\n\n#### 10.4.0\n\nAdded the `callback_enter` callback, which is called whenevery any element managed by LazyLoad enters the viewport, as requested in #159. Thanks to @alvarotrigo.\n\n#### 10.3.6\n\nFixed tests to match dataset revert made in 10.3 and 8.2 (oopsy).\n\n#### 10.3.5\n\nFixed a bug that could occur on older versions of IE when trying to access an image's parent node.\n\n#### 10.3.4\n\nFixed a CustomEvent bug which occurred on IE when using async object initialization.\n\n#### 10.3.3\n\nFixed `supportsClassList` test to work even when the `document` object isn't yet there. Thanks to @Spone and his pull request #145.\n\n#### 10.3.1\n\nIntroduced a workaround for an issue of Microsoft Edge documented [here](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12156111/)\n\n#### 10.3.0\n\nRestored support to IE9 and IE10, as requested in #118 and #132.\n\n#### 10.2.0\n\nTo solve cases when you can't select the elements to load using a string, added the ability to pass a `NodeList` object...\n\n- as a second parameter in the constructor, after the regular option object, e.g. `var ll = new Lazyload({}, myNodeList)`\n- as a single parameter to the `update()` method, e.g. `ll.update(myNodeList)`\n\n#### 10.1.0\n\nTo solve cases when you can't select the elements to load using a string, added the ability to pass a `NodeList` object to the `elements_selector` option, as suggested by @SassNinja in #130.\n\n#### 10.0.1\n\nSolved a problem with cdnjs.com: version 10.0.0 was pointing to 9.0.0.\n\n#### 10.0.0\n\n- Change in default options:\n  - default for `data_src` is now `src` (was `original`)\n  - default for `data_srcset` is now `srcset` (was `original-set`)\n\n## Version 9\n\n#### 9.0.1\n\n- Restored tests using Jest\n- Squashed a bug which didn't make images inside `picture` load correctly\n\n#### 9.0.0\n\nLazyLoad is now _faster_ thanks to the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).\n\n**IMPORTANT!** Browser support changed. Find more information in the [README](README.md) file.\n\n## Version 8\n\n#### 8.17.0\n\n- Added the ability to know when all images have been downloaded through the `callback_finish` callback.\n- Added the file `demos/print.html` to demo how to print lazy images.\n\n#### 8.16.0\n\nAdded the ability to have multiple background images, through the new `data_bg` option.\n\n#### 8.15.2\n\n**BUGFIX**: Class `loaded` was not applied to a loaded video (issue #239).\n\n#### 8.15.1\n\n**BUGFIX**: Autoplaying video not loaded correctly after entering the viewport (issue #240). Thanks to @maeligg.\n\n#### 8.15.0\n\n- Refactorized code & improved script performance\n- **BUGFIX**: Fixed webpack import (issue #230) `TypeError: default is not a constructor`\n\n#### 8.14.0\n\nNow supporting WebP through dynamic extension rename if the user browser is compatible.\n\n#### 8.13.0\n\n- Shortened the RegEx for crawlers detection (shaved a few bytes)\n- Released LazyLoad in new module types! Enjoy the new flavours :)\n\n| Filename               | Module Type                                    | Advantages                                                         |\n| ---------------------- | ---------------------------------------------- | ------------------------------------------------------------------ |\n| `lazyload.min.js`      | UMD (Universal Module Definition)              | Works pretty much everywhere, even in common-js contexts           |\n| `lazyload.iife.min.js` | IIFE (Immediately Invoked Function Expression) | Works as in-page `<script src=\"\">`, ~0.5kb smaller minified        |\n| `lazyload.amd.min.js`  | AMD (Asynchronous Module Definition)           | Works with the _require.js_ module loader, ~0.5kb smaller minified |\n| `lazyload.es2015.js`   | ES Module type                                 | Exports `LazyLoad` so you can import it in your project            |\n\n#### 8.12.0\n\nSEO! Expanded SEO-friendliness to more crawlers, Bingbot included.\n\n#### 8.11.0\n\nAdded a public `load` method to lazyload any element.\n\n#### 8.10.0\n\nAdded the ability to lazily set the `sizes` attribute via a `data-sizes` attribute.\nSee the [README](README.md) file for more information.\n\n#### 8.9.0\n\nAdded a public `loadAll` method to load all the images, as asked in #193.\n\n#### 8.8.0\n\nAdded support for the `video` tag. Closes #209.\nCreated the `video.html` demo.\n\n#### 8.7.1\n\nAdded a security check on lazy elements' parents.\n\n#### 8.7.0\n\nAdded node support by merging pull request #188, \"node-support\" by @klarstrup.\n\nWith these changes in place, simply importing vanilla-lazyload without using it won't crash Node by itself. This is important for isomorphic/universal/server rendered setups where the same code runs on both the server and the browser.\n\n#### 8.6.0\n\nAdded the `callback_enter` callback, which is called whenevery any element managed by LazyLoad enters the viewport, as requested in #159. Thanks to @alvarotrigo.\n\n#### 8.5.2\n\nFixed a bug that could occur on older versions of IE when trying to access an image's parent node.\n\n#### 8.5.1\n\nFixed a CustomEvent bug which occured on IE when using async object initialization.\n\n#### 8.5.0\n\n- Change in default options, in order to be aligned with version 10\n  - default for `data_src` is now `src` (was `original`)\n  - default for `data_srcset` is now `srcset` (was `original-set`)\n\n#### 8.2.1\n\nFixed `supportsClassList` test to work even when the `document` object isn't yet there. Thanks to @Spone and his #145.\n\n#### 8.2.0\n\nRestored support to IE9 and IE10, as requested in #118 and #132.\n\n#### 8.1.0\n\nUpdated from grunt to gulp (run with gulp scripts).\n\n#### 8.0.3\n\nAdded quotes in background image URLs, as suggested in #114 (thanks to @vseva).\n\n#### 8.0.2\n\nFixed a bug that affected performance.\n\n#### 8.0.1\n\nFixed reference to old names in demo files.\n\n#### 8.0.0\n\n- The main file to include is now **`dist/lazyload.min.js`** as you would expect, and no longer `dist/lazyload.transpiled.min.js`.\n- The non-transpiled version is now named lazyload.es2015.js\n\n## Version 7\n\n#### 7.2.0\n\n- Now using `element.dataset` to read data attributes\n- New readme! New website!\n\nBug fixes:\n\n- Fixed #87\n\n**IMPORTANT!** Browser support changed. Find more information in the [README](README.md) file.\n\n#### 7.1.0\n\n- Refactored code now using more modules\n- Saving ~0.5 kb of transpiled code going back from ES2015 `class` to function's `prototype`\n\n#### 7.0.0\n\nSource code converted to ES2015 modules, bundled with [rollup.js](https://rollupjs.org/) and transpiled with [babel](https://babeljs.io/).\n\n## Version 6\n\n#### 6.3.x\n\nAdded the class initial to all images (or iframes) inside the viewport at the moment of script initialization\n\n#### 6.2.x\n\n- Added the ability to load LazyLoad using an async script\n\n#### 6.1.x\n\nSEO improvements for lazily loaded images\n\n#### 6.0.x\n\n- Source code migrated to ES6 / ES2015\n- Serving both minified ES6 version and minified transpiled-to-ES5 version\n\n## Version 5\n\n- Exposed private functions for test coverage\n- Test coverage\n\n## Version 4\n\n- Lighter constructor\n- Performance improvements\n- Bugfix: null on background images\n- Removed code for legacy browsers - now supporting IE10+\n\n## Version 3\n\n- Added support to the picture tag\n- Removed the \"show image only when fully loaded\" mode\n  - Dumped the show_while_loading and placeholder options\n\n## Version 2\n\n- Added support to lazily load iframes and background images\n- Added error management callback and error class option\n- Performance improvements\n\n## Version 1\n\n- Added support to the srcset attribute for images\n- Added typescript typings + updated dist folder files\n- Performance improvements\n- Stable release of LazyLoad\n\n---\n\n_Want more detail? Take a look at the [release history](https://github.com/verlok/vanilla-lazyload/releases) on GitHub_!\n"
  },
  {
    "path": "CODE_OF_CONDUCT.md",
    "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at andrea.verlicchi@gmail.com. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n"
  },
  {
    "path": "LICENSE",
    "content": "MIT License\n\nCopyright (c) 2025 Andrea Verlicchi\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "LazyLoad is a lightweight (2.4 kB) and flexible script that **speeds up your web application** by deferring the loading of your below-the-fold images, animated SVGs, videos and iframes to **when they will enter the viewport**. It's written in plain \"vanilla\" JavaScript, it leverages the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API, it supports [responsive images](https://alistapart.com/article/responsive-images-in-practice), it optimizes your website for slower connections, and can enable native lazy loading. See [all features](#-all-features-compared) for more.\n\n[![vanilla-lazyload (latest)](https://img.shields.io/npm/v/vanilla-lazyload/latest.svg)](https://www.npmjs.com/package/vanilla-lazyload)\n[![vanilla-lazyload (downloads)](https://img.shields.io/npm/dy/vanilla-lazyload.svg)](https://www.npmjs.com/package/vanilla-lazyload)\n[![](https://data.jsdelivr.com/v1/package/npm/vanilla-lazyload/badge)](https://www.jsdelivr.com/package/npm/vanilla-lazyload)\n[![](https://github.com/verlok/vanilla-lazyload/actions/workflows/ci.yml/badge.svg)](https://github.com/verlok/vanilla-lazyload/actions/workflows/ci.yml)\n\n➡️ Jump to: [👨‍💻 Getting started - HTML](#-getting-started---html) - [👩‍💻 Getting started - Script](#-getting-started---script) - [🥧 Recipes](#-recipes) - [📺 Demos](#-demos) - [😋 Tips & tricks](#-tips--tricks) - [🔌 API](#-api) - [😯 All features compared](#-all-features-compared)\n\n---\n\n**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## 👨‍💻 Getting started - HTML\n\nIn order to make your content be loaded by LazyLoad, you must use some `data-` attributes instead of the actual attributes. Examples below.\n\n### Lazy image:\n\n```html\n<img alt=\"A lazy image\" class=\"lazy\" data-src=\"lazy.jpg\" />\n```\n\n### Lazy image with low quality placeholder:\n\n```html\n<img alt=\"A lazy image\" class=\"lazy\" src=\"lazy-lowQuality.jpg\" data-src=\"lazy.jpg\" />\n```\n\n### Lazy responsive image with `srcset` and `sizes`:\n\n```html\n<img\n  alt=\"A lazy image\"\n  class=\"lazy\"\n  data-src=\"lazy.jpg\"\n  data-srcset=\"lazy_400.jpg 400w, \n    lazy_800.jpg 800w\"\n  data-sizes=\"100w\"\n/>\n```\n\nTo have a low quality placeholder, add the `src` attribute pointing to a very small version of the image. E.g. `src=\"lazy_10.jpg\"`.\n\n### Lazy responsive image with hi-dpi support using the `picture` tag:\n\n```html\n<picture>\n  <source media=\"(min-width: 1200px)\" data-srcset=\"lazy_1200.jpg 1x, lazy_2400.jpg 2x\" />\n  <source media=\"(min-width: 800px)\" data-srcset=\"lazy_800.jpg 1x, lazy_1600.jpg 2x\" />\n  <img alt=\"A lazy image\" class=\"lazy\" data-src=\"lazy.jpg\" />\n</picture>\n```\n\nTo have a low quality placeholder, add the `src` attribute pointing to a very small version of the image to the `img` tag. E.g. `src=\"lazy_10.jpg\"`.\n\n### Lazy responsive image with automatic _WebP_ format selection, using the `picture` tag:\n\n```html\n<picture>\n  <source\n    type=\"image/webp\"\n    data-srcset=\"lazy_400.webp 400w, \n      lazy_800.webp 800w\"\n    data-sizes=\"100w\"\n  />\n  <img\n    alt=\"A lazy image\"\n    class=\"lazy\"\n    data-src=\"lazy.jpg\"\n    data-srcset=\"lazy_400.jpg 400w, \n      lazy_800.jpg 800w\"\n    data-sizes=\"100w\"\n  />\n</picture>\n```\n\nTo have a low quality placeholder, add the `src` attribute pointing to a very small version of the image to the `img` tag. E.g. `src=\"lazy_10.jpg\"`.\n\n### Lazy background image\n\n⚠ **IMPORTANT NOTE**: To display content images on your pages, always use the `img` tag. This would benefit the SEO and the accessibility of your website. To understand if your images are content or background, ask yourself: \"would my website user like to see those images when printing out the page?\". If the answer is \"yes\", then your images are content images and you should avoid using background images to display them.\n\n#### Single background image:\n\n```html\n<div class=\"lazy\" data-bg=\"lazy.jpg\"></div>\n```\n\n#### Single background, with HiDPI screen support:\n\n```html\n<div class=\"lazy\" data-bg=\"lazy.jpg\" data-bg-hidpi=\"lazy@2x.jpg\"></div>\n```\n\n#### Multiple backgrounds:\n\n```html\n<div\n  class=\"lazy\"\n  data-bg-multi=\"url(lazy-head.jpg), \n    url(lazy-body.jpg), \n    linear-gradient(#fff, #ccc)\"\n>\n  ...\n</div>\n```\n\n#### Multiple backgrounds, HiDPI screen support:\n\n```html\n<div\n  class=\"lazy\"\n  data-bg-multi=\"url(lazy-head.jpg),\n    url(lazy-body.jpg),\n    linear-gradient(#fff, #ccc)\"\n  data-bg-multi-hidpi=\"url(lazy-head@2x.jpg),\n    url(lazy-body@2x.jpg),\n    linear-gradient(#fff, #ccc)\"\n>\n  ...\n</div>\n```\n\n#### Backgrounds with `image-set`:\n\n```html\n<div class=\"lazy\" data-bg-set=\"url('lazy@1x.jpg') 1x, url('lazy@2x.jpg') 2x\">...</div>\n```\n\n#### Multiple backgrounds with `image-set`:\n\n```html\n<div\n  class=\"lazy\"\n  data-bg-set=\"\n    url('lazy-head@1x.jpg') 1x, url('lazy-head@2x.jpg') 2x | \n    url('lazy-body@1x.jpg') 1x, url('lazy-body@2x.jpg') 2x\n  \"\n>\n  ...\n</div>\n```\n\n### Lazy animated SVG\n\n```html\n<object class=\"lazy\" type=\"image/svg+xml\" data-src=\"lazy.svg\"></object>\n```\n\n### Lazy video\n\n```html\n<video class=\"lazy\" controls width=\"620\" data-src=\"lazy.mp4\" data-poster=\"lazy.jpg\">\n  <source type=\"video/mp4\" data-src=\"lazy.mp4\" />\n  <source type=\"video/ogg\" data-src=\"lazy.ogg\" />\n  <source type=\"video/avi\" data-src=\"lazy.avi\" />\n</video>\n```\n\nPlease note that the video poster can be lazily loaded too.\n\n### Lazy iframe\n\n```html\n<iframe class=\"lazy\" data-src=\"lazyFrame.html\"></iframe>\n```\n\n---\n\n**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## 👩‍💻 Getting started - Script\n\nThe latest, recommended version of LazyLoad is **19.1.3**.\nNote that if you need to support Internet Explorer 11, you need to use version 17.9.0 or below.\n\nQuickly understand how to upgrade from a previous version reading the [practical upgrade guide](UPGRADE.md).\n\n### The simple, easiest way\n\nThe easiest way to use LazyLoad is to include the script from a CDN.\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.1.3/dist/lazyload.min.js\"></script>\n```\n\nOR, if you prefer to import it as an ES module:\n\n```html\n<script type=\"module\">\n  import LazyLoad from \"https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.0.3/+esm\";\n</script>\n```\n\nThen, in your javascript code:\n\n```js\nvar lazyLoadInstance = new LazyLoad({\n  // Your custom settings go here\n});\n```\n\nTo be sure that DOM for your lazy content is ready when you instantiate LazyLoad, **place the script tag right before the closing `</body>` tag**.\n\nIf more DOM arrives later, e.g. via an AJAX call, you'll need to call `lazyLoadInstance.update();` to make LazyLoad check the DOM again.\n\n```js\nlazyLoadInstance.update();\n```\n\n### Using an `async` script\n\nIf you prefer, it's possible to include LazyLoad's script using `async` script and initialize it as soon as it's loaded.\n\nTo do so, **you must define the options before including the script**. You can pass:\n\n- `{}` an object to get a single instance of LazyLoad\n- `[{}, {}]` an array of objects to get multiple instances of LazyLoad, each one with different options.\n\n```html\n<script>\n  // Set the options globally\n  // to make LazyLoad self-initialize\n  window.lazyLoadOptions = {\n    // Your custom settings go here\n  };\n</script>\n```\n\nThen include the script.\n\n```html\n<script\n  async\n  src=\"https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.1.3/dist/lazyload.min.js\"\n></script>\n```\n\n**Possibly place the script tag right before the closing `</body>` tag**. If you can't do that, LazyLoad could be executed before the browser has loaded all the DOM, and you'll need to call its `update()` method to make it check the DOM again.\n\n### Using an `async` script + getting the instance reference\n\nSame as above, but you must put the `addEventListener` code shown below before including the `async` script.\n\n```html\n<script>\n  // Set the options globally\n  // to make LazyLoad self-initialize\n  window.lazyLoadOptions = {\n    // Your custom settings go here\n  };\n  // Listen to the initialization event\n  // and get the instance of LazyLoad\n  window.addEventListener(\n    \"LazyLoad::Initialized\",\n    function (event) {\n      window.lazyLoadInstance = event.detail.instance;\n    },\n    false\n  );\n</script>\n```\n\nThen include the script.\n\n```html\n<script\n  async\n  src=\"https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.1.3/dist/lazyload.min.js\"\n></script>\n```\n\nNow you'll be able to call its methods, like:\n\n```js\nlazyLoadInstance.update();\n```\n\n[DEMO](https://verlok.github.io/vanilla-lazyload/demos/async.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/async.html) &larr; for a single LazyLoad instance\n\n[DEMO](https://verlok.github.io/vanilla-lazyload/demos/async_multiple.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/async_multiple.html) &larr; for multiple LazyLoad instances\n\n### Local install\n\nIf you prefer to install LazyLoad locally in your project, you can!\n\n#### Using npm\n\n```\nnpm install vanilla-lazyload\n```\n\n#### Using bower\n\n```\nbower install vanilla-lazyload\n```\n\n#### Manual download\n\nDownload one the latest [releases](https://github.com/verlok/vanilla-lazyload/releases/). The files you need are inside the `dist` folder. If you don't know which one to pick, use `lazyload.min.js`, or read [about bundles](#bundles).\n\n### Local usage\n\nShould you install LazyLoad locally, you can import it as ES module like the following:\n\n```js\nimport LazyLoad from \"vanilla-lazyload\";\n```\n\nIt's also possible (but unadvised) to use the `require` commonJS syntax.\n\nMore information about bundling LazyLoad with WebPack are available on [this specific repo](https://github.com/verlok/lazyload-es2015-webpack-test).\n\n### Usage with React\n\nTake a look at this example of [usage of React with LazyLoad](https://codesandbox.io/s/20306yk96p) on Sandbox.\n\nThis implementation takes the same props that you would normally pass to the `img` tag, but it renders a lazy image. Feel free to fork and improve it!\n\n### Bundles\n\nInside the `dist` folder you will find different bundles.\n\n| Filename               | Module Type                                                   | Advantages                                                                                                                                 |\n| ---------------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| `lazyload.min.js`      | UMD <small>(Universal Module Definition)</small>              | Works pretty much everywhere, even in common-js contexts                                                                                   |\n| `lazyload.iife.min.js` | IIFE <small>(Immediately Invoked Function Expression)</small> | Works as in-page `<script src=\"...\">`, ~0.5kb smaller than UMD version                                                                     |\n| `esm/lazyload.js`      | ES Module                                                     | Exports `LazyLoad` so you can import it in your project both using `<script type=\"module\" src=\"...\">` and a bundler like WebPack or Rollup |\n\n---\n\n**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## 🥧 Recipes\n\nThis is the section where you can find _ready to copy & paste_ code for your convenience.\n\n### Hide alt text and empty image\n\n> 💡 **Use case**: when your lazily loaded images show their `alt` text and the empty image icon before loading.\n\nCSS\n\n```css\nimg:not([src]):not([srcset]) {\n  visibility: hidden;\n}\n```\n\nJust that, really.\n\n### Image errors handling\n\n> 💡 **Use case**: when you want to prevent showing unexisting/broken images on your website.\n\nJavascript\n\n```js\nvar myLazyLoad = new LazyLoad({\n  // Other options here...\n  callback_error: (img) => {\n    // Use the following line only if your images have the `srcset` attribute\n    img.setAttribute(\"srcset\", \"fallback_image@1x.jpg 1x, fallback_image@2x.jpg 2x\");\n    img.setAttribute(\"src\", \"fallback_image@1x.jpg\");\n  }\n});\n```\n\nNOTE: if the error was generated by a network down (navigator if temporarily offline), vanilla-lazyload will try and load the images again when the network becomes available again.\n\n[EXAMPLE](https://codepen.io/verlok/pen/mdwYbGq) - [API](#-api)\n\n### Dynamic content\n\n> 💡 **Use case**: when you want to lazily load images, but the number of images change in the scrolling area changes, maybe because they are added asynchronously.\n\nJavascript\n\n```js\nvar myLazyLoad = new LazyLoad();\n// After your content has changed...\nmyLazyLoad.update();\n```\n\n[DEMO](https://verlok.github.io/vanilla-lazyload/demos/dynamic_content.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/dynamic_content.html) - [API](#-api)\n\n### Mixed native and JS-based lazy loading\n\n> 💡 **Use case**: you want to use the `use_native` option to delegate the loading of images, iframes and videos to the browsers engine where supported, but you also want to lazily load background images.\n\nHTML\n\n```html\n<img class=\"lazy\" alt=\"A lazy image\" data-src=\"lazy.jpg\" />\n<iframe class=\"lazy\" data-src=\"lazyFrame.html\"></iframe>\n<video class=\"lazy\" controls data-src=\"lazy.mp4\" data-poster=\"lazy.jpg\">...</video>\n<object class=\"lazy\" type=\"image/svg+xml\" data-src=\"lazy.svg\"></object>\n<div class=\"lazy\" data-bg=\"lazy.jpg\"></div>\n```\n\nJavascript\n\n```js\n// Instance using native lazy loading\nconst lazyContent = new LazyLoad({\n  use_native: true // <-- there you go\n});\n\n// Instance without native lazy loading\nconst lazyBackground = new LazyLoad({\n  // DON'T PASS use_native: true HERE\n});\n```\n\n[DEMO](https://verlok.github.io/vanilla-lazyload/demos/native_lazyload_conditional.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/native_lazyload_conditional.html) - [API](#-api)\n\n### Scrolling panel(s)\n\n> 💡 **Use case**: when your scrolling container is not the main browser window, but a scrolling container.\n\nHTML\n\n```html\n<div class=\"scrollingPanel\">\n  <!-- Set of images -->\n</div>\n```\n\nJavascript\n\n```js\nvar myLazyLoad = new LazyLoad({\n  container: document.querySelector(\".scrollingPanel\")\n});\n```\n\n[DEMO](https://verlok.github.io/vanilla-lazyload/demos/container_single.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/container_single.html) - [API](#-api)\n\nIf you have _multiple_ scrolling panels, you can use the following markup and code.\n\nHTML\n\n```html\n<div id=\"scrollingPanel1\" class=\"scrollingPanel\">\n  <!-- Set of images -->\n</div>\n<div id=\"scrollingPanel2\" class=\"scrollingPanel\">\n  <!-- Set of images -->\n</div>\n```\n\nJavascript\n\n```js\nvar myLazyLoad1 = new LazyLoad({\n  container: document.getElementById(\"scrollingPanel1\")\n});\nvar myLazyLoad2 = new LazyLoad({\n  container: document.getElementById(\"scrollingPanel2\")\n});\n```\n\n[DEMO](https://verlok.github.io/vanilla-lazyload/demos/container_multiple.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/container_multiple.html) - [API](#-api)\n\n### Lazy functions\n\n> 💡 **Use case**: when you want to execute arbitrary scripts or functions when given elements enter the viewport\n\nHTML\n\n```html\n<div class=\"lazy\" data-lazy-function=\"foo\">...</div>\n<div class=\"lazy\" data-lazy-function=\"bar\">...</div>\n<div class=\"lazy\" data-lazy-function=\"buzz\">...</div>\n<div class=\"lazy\" data-lazy-function=\"booya\">...</div>\n```\n\nJS\n\n```js\n// It's a best practice to scope the function names inside a namespace like `lazyFunctions`.\nwindow.lazyFunctions = {\n  foo: function (element) {\n    element.style.color = \"red\";\n    console.log(\"foo\");\n  },\n  bar: function (element) {\n    element.remove(element);\n    console.log(\"bar\");\n  },\n  buzz: function (element) {\n    var span = document.createElement(\"span\");\n    span.innerText = \" - buzz!\";\n    element.appendChild(span);\n    console.log(\"buzz\");\n  },\n  booya: function (element) {\n    element.classList.add(\"boo\");\n    console.log(\"booya\");\n  }\n};\n```\n\n```js\nfunction executeLazyFunction(element) {\n  var lazyFunctionName = element.getAttribute(\"data-lazy-function\");\n  var lazyFunction = window.lazyFunctions[lazyFunctionName];\n  if (!lazyFunction) return;\n  lazyFunction(element);\n}\n\nvar ll = new LazyLoad({\n  unobserve_entered: true, // <- Avoid executing the function multiple times\n  callback_enter: executeLazyFunction // Assigning the function defined above\n});\n```\n\nUse `unobserve_entered` to avoid executing the function multiple times.\n\nThat's it. Whenever an element with the `data-lazy-function` attribute enters the viewport, LazyLoad calls the `executeLazyScript` function, which gets the function name from the `data-lazy-function` attribute itself and executes it.\n\n[DEMO](https://verlok.github.io/vanilla-lazyload/demos/lazy_functions.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/lazy_functions.html) - [API](#-api)\n\n### Lazy initialization of multiple LazyLoad instances\n\n> 💡 **Use case**: when you have a lot of horizontally scrolling containers and you want to instantiate a LazyLoad instance on them, but only when they entered the viewport.\n\nHTML\n\n```html\n<div class=\"horizContainer\">\n  <img\n    src=\"\"\n    alt=\"Row 01, col 01\"\n    data-src=\"https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w=200&amp;h=200\"\n  />\n  <img\n    src=\"\"\n    alt=\"Row 01, col 02\"\n    data-src=\"https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w=200&amp;h=200\"\n  />\n  <!-- ... -->\n</div>\n<div class=\"horizContainer\">\n  <img\n    src=\"\"\n    alt=\"Row 02, col 01\"\n    data-src=\"https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_01&amp;w=200&amp;h=200\"\n  />\n  <img\n    src=\"\"\n    alt=\"Row 02, col 02\"\n    data-src=\"https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_02&amp;w=200&amp;h=200\"\n  />\n  <!-- ... -->\n</div>\n```\n\nJavascript\n\n```js\nvar lazyLoadInstances = [];\n\nvar initOneLazyLoad = function (horizContainerElement) {\n  // When the .horizContainer element enters the viewport,\n  // instantiate a new LazyLoad on the horizContainerElement\n  var oneLL = new LazyLoad({\n    container: horizContainerElement\n  });\n  // Optionally push it in the lazyLoadInstances\n  // array to keep track of the instances\n  lazyLoadInstances.push(oneLL);\n};\n\n// The \"lazyLazy\" instance of lazyload is used to check\n// when the .horizContainer divs enter the viewport\nvar lazyLazy = new LazyLoad({\n  elements_selector: \".horizContainer\",\n  callback_enter: initOneLazyLoad,\n  unobserve_entered: true // Stop observing .horizContainer(s) after they entered\n});\n```\n\nThat's it. Whenever a `.horizContainer` element enters the viewport, LazyLoad calls the `initOneLazyLoad` function, which creates a new instance of LazyLoad on the `.horizContainer` element.\n\n[DEMO](https://verlok.github.io/vanilla-lazyload/demos/lazily_load_lazyLoad.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/lazily_load_lazyLoad.html) - [API](#-api)\n\n---\n\n**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## 📺 Demos\n\nDidn't find the [recipe](#-recipes) that exactly matches your case? We have demos!\n\nThe [demos](https://github.com/verlok/vanilla-lazyload/tree/master/demos) folder contains 30+ use cases of vanilla-lazyload. You might find there what you're looking for.\n\n| Type      | Title                                                                                          | Code                                           | Demo                                                                                     |\n| --------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------- | ---------------------------------------------------------------------------------------- |\n| Content   | Simple lazy loaded images, not using any placeholder                                           | [Code](demos/image_basic.html)                 | [Live](https://verlok.github.io/vanilla-lazyload/demos/image_basic.html)                 |\n| Content   | Lazy images that use an inline SVG as a placeholder                                            | [Code](demos/image_ph_inline.html)             | [Live](https://verlok.github.io/vanilla-lazyload/demos/image_ph_inline.html)             |\n| Content   | Lazy images that use an external SVG file as a placeholder                                     | [Code](demos/image_ph_external.html)           | [Live](https://verlok.github.io/vanilla-lazyload/demos/image_ph_external.html)           |\n| Content   | Lazy responsive images with `srcset`                                                           | [Code](demos/image_srcset.html)                | [Live](https://verlok.github.io/vanilla-lazyload/demos/image_srcset.html)                |\n| Content   | Lazy responsive images with the `<picture>` tag and the `media` attribute (art direction)      | [Code](demos/picture_media.html)               | [Live](https://verlok.github.io/vanilla-lazyload/demos/picture_media.html)               |\n| Content   | Lazy responsive images with `srcset` and `sizes` (using `data-sizes`)                          | [Code](demos/image_srcset_lazy_sizes.html)     | [Live](https://verlok.github.io/vanilla-lazyload/demos/image_srcset_lazy_sizes.html)     |\n| Content   | Lazy responsive images with `srcset` and `sizes` (using plain `sizes`)                         | [Code](demos/image_srcset_sizes.html)          | [Live](https://verlok.github.io/vanilla-lazyload/demos/image_srcset_sizes.html)          |\n| Content   | Lazy video with multiple `<source>` tags, different preload options, NO autoplay               | [Code](demos/video.html)                       | [Live](https://verlok.github.io/vanilla-lazyload/demos/video.html)                       |\n| Content   | Lazy video with multiple `<source>` tags, different preload options, WITH autoplay             | [Code](demos/video_autoplay.html)              | [Live](https://verlok.github.io/vanilla-lazyload/demos/video_autoplay.html)              |\n| Content   | Lazy loading background images                                                                 | [Code](demos/background_images.html)           | [Live](https://verlok.github.io/vanilla-lazyload/demos/background_images.html)           |\n| Content   | Lazy loading multiple background images                                                        | [Code](demos/background_images_multi.html)     | [Live](https://verlok.github.io/vanilla-lazyload/demos/background_images_multi.html)     |\n| Content   | Lazy loading background images with `image-set()`                                              | [Code](demos/background_images_image-set.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/background_images_image-set.html) |\n| Content   | Lazy loading iframes                                                                           | [Code](demos/iframes.html)                     | [Live](https://verlok.github.io/vanilla-lazyload/demos/iframes.html)                     |\n| Content   | Lazy loading animated SVGs and PDF files                                                       | [Code](demos/objects.html)                     | [Live](https://verlok.github.io/vanilla-lazyload/demos/objects.html)                     |\n| Content   | Lazy WebP images with the `<picture>` tag and the `type` attribute for WebP                    | [Code](demos/picture_type_webp.html)           | [Live](https://verlok.github.io/vanilla-lazyload/demos/picture_type_webp.html)           |\n| Loading   | Asynchronous loading LazyLoad with `<script async>`                                            | [Code](demos/async.html)                       | [Live](https://verlok.github.io/vanilla-lazyload/demos/async.html)                       |\n| Loading   | Asynchronous loading multiple LazyLoad instances with `<script async>`                         | [Code](demos/async_multiple.html)              | [Live](https://verlok.github.io/vanilla-lazyload/demos/async_multiple.html)              |\n| Error     | Test error loading behaviour when `restore_on_error` is `false`                                | [Code](demos/error_no_restore.html)            | [Live](https://verlok.github.io/vanilla-lazyload/demos/error_no_restore.html)            |\n| Error     | Test error loading behaviour when `restore_on_error` is `true`                                 | [Code](demos/error_restore.html)               | [Live](https://verlok.github.io/vanilla-lazyload/demos/error_restore.html)               |\n| Technique | Fade in images as they load                                                                    | [Code](demos/fade_in.html)                     | [Live](https://verlok.github.io/vanilla-lazyload/demos/fade_in.html)                     |\n| Technique | Lazy load images in CSS-only horizontal sliders (Netflix style)                                | [Code](demos/sliders_css_only.html)            | [Live](https://verlok.github.io/vanilla-lazyload/demos/sliders_css_only.html)            |\n| Technique | Lazily create Swiper instances and lazily load Swiper images                                   | [Code](demos/swiper.html)                      | [Live](https://verlok.github.io/vanilla-lazyload/demos/swiper.html)                      |\n| Technique | Lazily execute functions as specific elements enter the viewport                               | [Code](demos/lazy_functions.html)              | [Live](https://verlok.github.io/vanilla-lazyload/demos/lazy_functions.html)              |\n| Technique | How to manage the print of a page with lazy images                                             | [Code](demos/print.html)                       | [Live](https://verlok.github.io/vanilla-lazyload/demos/print.html)                       |\n| Technique | A popup layer containing lazy images in a scrolling container                                  | [Code](demos/popup_layer.html)                 | [Live](https://verlok.github.io/vanilla-lazyload/demos/popup_layer.html)                 |\n| Settings  | Multiple scrolling containers                                                                  | [Code](demos/container_multiple.html)          | [Live](https://verlok.github.io/vanilla-lazyload/demos/container_multiple.html)          |\n| Settings  | Single scrolling container                                                                     | [Code](demos/container_single.html)            | [Live](https://verlok.github.io/vanilla-lazyload/demos/container_single.html)            |\n| Methods   | How to `restore()` DOM to its original state, and/or `destroy()` LazyLoad                      | [Code](demos/restore_destroy.html)             | [Live](https://verlok.github.io/vanilla-lazyload/demos/restore_destroy.html)             |\n| Methods   | Adding dynamic content, then `update()` LazyLoad                                               | [Code](demos/dynamic_content.html)             | [Live](https://verlok.github.io/vanilla-lazyload/demos/dynamic_content.html)             |\n| Methods   | Adding dynamic content, then `update()` LazyLoad passing a NodeSet of elements                 | [Code](demos/dynamic_content_nodeset.html)     | [Live](https://verlok.github.io/vanilla-lazyload/demos/dynamic_content_nodeset.html)     |\n| Methods   | Load punctual images using the `load()` method                                                 | [Code](demos/load.html)                        | [Live](https://verlok.github.io/vanilla-lazyload/demos/load.html)                        |\n| Methods   | Load all images at once using `loadAll()`                                                      | [Code](demos/load_all.html)                    | [Live](https://verlok.github.io/vanilla-lazyload/demos/load_all.html)                    |\n| Test      | Test for multiple thresholds                                                                   | [Code](demos/thresholds.html)                  | [Live](https://verlok.github.io/vanilla-lazyload/demos/thresholds.html)                  |\n| Test      | Test behaviour with hidden images                                                              | [Code](demos/image_hidden.html)                | [Live](https://verlok.github.io/vanilla-lazyload/demos/image_hidden.html)                |\n| Test      | Test performance, lazy loading of hundreds of images                                           | [Code](demos/hundreds.html)                    | [Live](https://verlok.github.io/vanilla-lazyload/demos/hundreds.html)                    |\n| Native    | Test the native lazy loading of images _WITHOUT_ any line of javascript, not even this script  | [Code](demos/native_lazyload.html)             | [Live](https://verlok.github.io/vanilla-lazyload/demos/native_lazyload.html)             |\n| Native    | Test the native lazy loading of images _conditionally_ using the `use_native` option (see API) | [Code](demos/native_lazyload_conditional.html) | [Live](https://verlok.github.io/vanilla-lazyload/demos/native_lazyload_conditional.html) |\n\n---\n\n**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## 😋 Tips & tricks\n\n### Minimize [CLS](https://web.dev/cls) by occupy space beforehand\n\nIt's very important to make sure that your lazy images occupy some space even **before they are loaded**, otherwise the `img` elements will be shrinked to zero-height, causing your layout to shift and making lazyload inefficient.\n\nThe best way to do that is to set both `width` and `height` attributes to `img` and `video` elements and, if you choose not to use a placeholder image, apply the `display: block` CSS rule to every image.\n\nYou can find more details and demos in my article [aspect-ratio: A modern way to reserve space for images and async content in responsive design](https://www.andreaverlicchi.eu/blog/aspect-ratio-modern-reserve-space-lazy-images-async-content-responsive-design/).\n\n---\n\n**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## 🔌 API\n\n### Constructor arguments\n\nThe `new LazyLoad()` instruction you execute on your page can take two parameters:\n\n| Parameter | What to pass                                    | Required | Default value | Type         |\n| --------- | ----------------------------------------------- | -------- | ------------- | ------------ |\n| Options   | The option object for this instance of LazyLoad | No       | `{}`          | Plain Object |\n| Nodeset   | A NodeSet of elements to execute LazyLoad on    | No       | `null`        | NodeSet      |\n\nThe most common usage of LazyLoad constructor is to pass only the options object (see \"options\" in the next section). For example:\n\n```js\nvar aLazyLoad = new LazyLoad({\n  /* options here */\n});\n```\n\nIn the unusual cases when you can't select the elements using `elements_selector`, you could pass the elements set as a second parameter. It can be either a NodeSet or an array of DOM elements.\n\n```js\nvar elementsToLazyLoad = getElementSetFromSomewhere();\nvar aLazyLoad = new LazyLoad(\n  {\n    /* options here */\n  },\n  elementsToLazyLoad\n);\n```\n\n### Options\n\nFor every instance of _LazyLoad_ you can pass in some options, to alter its default behaviour.\nHere's the list of the options.\n\n| Name                  | Meaning                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Default value      | Example value                            |\n| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ---------------------------------------- |\n| `container`           | The scrolling container of the elements in the `elements_selector` option.                                                                                                                                                                                                                                                                                                                                                                                   | `document`         | `document.querySelector('.scrollPanel')` |\n| `elements_selector`   | The CSS selector of the elements to load lazily, which will be selected as descendants of the `container` object.                                                                                                                                                                                                                                                                                                                                            | `\".lazy\"`          | `\".lazyload\"`                            |\n| `threshold`           | A number of pixels representing the outer distance off the scrolling area from which to start loading the elements.                                                                                                                                                                                                                                                                                                                                          | `300`              | `0`                                      |\n| `thresholds`          | Similar to `threshold`, but accepting multiple values and both `px` and `%` units. It maps directly to the `rootMargin` property of IntersectionObserver ([read more](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)), so it must be a string with a syntax similar to the CSS `margin` property. You can use it when you need to have different thresholds for the scrolling area. It overrides `threshold` when passed. | `null`             | `\"500px 10%\"`                            |\n| `data_src`            | The name of the data attribute containing the element URL to load, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-src\"`, just pass `\"src\"`                                                                                                                                                                                                                                                                                        | `\"src\"`            | `\"lazy-src\"`                             |\n| `data_srcset`         | The name of the data attribute containing the image URL set to load, in either `img` and `source` tags, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-srcset\"`, just pass `\"srcset\"`                                                                                                                                                                                                                                             | `\"srcset\"`         | `\"lazy-srcset\"`                          |\n| `data_sizes`          | The name of the data attribute containing the sizes attribute to use, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-sizes\"`, just pass `\"sizes\"`                                                                                                                                                                                                                                                                                 | `\"sizes\"`          | `\"lazy-sizes\"`                           |\n| `data_bg`             | The name of the data attribute containing the URL of `background-image` to load lazily, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-bg\"`, just pass `\"bg\"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction.                                                                                                                                               | `\"bg\"`             | `\"lazy-bg\"`                              |\n| `data_bg_hidpi`       | The name of the data attribute containing the URL of `background-image` to load lazily on HiDPI screens, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-bg-hidpi\"`, just pass `\"bg-hidpi\"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction.                                                                                                                  | `\"bg-hidpi\"`       | `\"lazy-bg-hidpi\"`                        |\n| `data_bg_multi`       | The name of the data attribute containing the value of multiple `background-image` to load lazily, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-bg-multi\"`, just pass `\"bg-multi\"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction.                                                                                                                        | `\"bg-multi\"`       | `\"lazy-bg-multi\"`                        |\n| `data_bg_multi_hidpi` | The name of the data attribute containing the value of multiple `background-image` to load lazily on HiDPI screens, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-bg-multi-hidpi\"`, just pass `\"bg-multi-hidpi\"`. The attribute value must be a valid value for `background-image`, including the `url()` part of the CSS instruction.                                                                                           | `\"bg-multi-hidpi\"` | `\"lazy-bg-multi-hidpi\"`                  |\n| `data_bg_set`         | The name of the data attribute containing the value of the background to be applied with image-set, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-bg-set\"`, just pass `\"bg-set\"`. The attribute value must be what goes inside the `image-set` CSS function. You can separate values with a pipe (`\\|`) character to have multiple backgrounds.                                                                                  | `\"bg-set\"`         | `\"lazy-bg-set\"`                          |\n| `data_poster`         | The name of the data attribute containing the value of `poster` to load lazily, excluding the `\"data-\"` part. E.g. if your data attribute is named `\"data-poster\"`, just pass `\"poster\"`.                                                                                                                                                                                                                                                                    | `\"poster\"`         | `\"lazy-poster\"`                          |\n| `class_applied`       | The class applied to the multiple background elements after the multiple background was applied                                                                                                                                                                                                                                                                                                                                                              | `\"applied\"`        | `\"lazy-applied\"`                         |\n| `class_loading`       | The class applied to the elements while the loading is in progress.                                                                                                                                                                                                                                                                                                                                                                                          | `\"loading\"`        | `\"lazy-loading\"`                         |\n| `class_loaded`        | The class applied to the elements when the loading is complete.                                                                                                                                                                                                                                                                                                                                                                                              | `\"loaded\"`         | `\"lazy-loaded\"`                          |\n| `class_error`         | The class applied to the elements when the element causes an error.                                                                                                                                                                                                                                                                                                                                                                                          | `\"error\"`          | `\"lazy-error\"`                           |\n| `class_entered`       | The class applied to the elements after they entered the viewport.                                                                                                                                                                                                                                                                                                                                                                                           | `\"entered\"`        | `\"lazy-entered\"`                         |\n| `class_exited`        | The class applied to the elements after they exited the viewport. This class is removed if an element enters the viewport again. The `unobserve_entered` option can affect the appliance of this class, e.g. when loading images that complete loading before exiting.                                                                                                                                                                                       | `\"exited\"`         | `\"lazy-exited\"`                          |\n| `cancel_on_exit`      | A boolean that defines whether or not to cancel the download of the images that exit the viewport while they are still loading, eventually restoring the original attributes. It applies only to images so to the `img` (and `picture`) tags, so it doesn't apply to background images, `iframe`s, `object`s nor `video`s.                                                                                                                                   | `true`             | `false`                                  |\n| `unobserve_entered`   | A boolean that defines whether or not to automatically unobserve elements once they entered the viewport                                                                                                                                                                                                                                                                                                                                                     | `false`            | `true`                                   |\n| `unobserve_completed` | A boolean that defines whether or not to automatically unobserve elements once they've loaded or throwed an error                                                                                                                                                                                                                                                                                                                                            | `true`             | `false`                                  |\n| `callback_enter`      | A callback function which is called whenever an element enters the viewport. Arguments: DOM element, intersection observer entry, lazyload instance.                                                                                                                                                                                                                                                                                                         | `null`             | `(el)=>{console.log(\"Entered\", el)}`     |\n| `callback_exit`       | A callback function which is called whenever an element exits the viewport. Arguments: DOM element, intersection observer entry, lazyload instance.                                                                                                                                                                                                                                                                                                          | `null`             | `(el)=>{console.log(\"Exited\", el)}`      |\n| `callback_loading`    | A callback function which is called whenever an element starts loading. Arguments: DOM element, lazyload instance.                                                                                                                                                                                                                                                                                                                                           | `null`             | `(el)=>{console.log(\"Loading\", el)}`     |\n| `callback_cancel`     | A callback function which is called whenever an element loading is canceled while loading, as for `cancel_on_exit: true`.                                                                                                                                                                                                                                                                                                                                    | `null`             | `(el)=>{console.log(\"Cancelled\", el)}`   |\n| `callback_loaded`     | A callback function which is called whenever an element finishes loading. Note that, in version older than 11.0.0, this option went under the name `callback_load`. Arguments: DOM element, lazyload instance.                                                                                                                                                                                                                                               | `null`             | `(el)=>{console.log(\"Loaded\", el)}`      |\n| `callback_error`      | A callback function which is called whenever an element triggers an error. Arguments: DOM element, lazyload instance.                                                                                                                                                                                                                                                                                                                                        | `null`             | `(el)=>{console.log(\"Error\", el)}`       |\n| `callback_applied`    | A callback function which is called whenever a multiple background element starts loading. Arguments: DOM element, lazyload instance.                                                                                                                                                                                                                                                                                                                        | `null`             | `(el)=>{console.log(\"Applied\", el)}`     |\n| `callback_finish`     | A callback function which is called when there are no more elements to load _and_ all elements have been downloaded. Arguments: lazyload instance.                                                                                                                                                                                                                                                                                                           | `null`             | `()=>{console.log(\"Finish\")}`            |\n| `use_native`          | This boolean sets whether or not to use [native lazy loading](https://addyosmani.com/blog/lazy-loading/) to do [hybrid lazy loading](https://www.smashingmagazine.com/2019/05/hybrid-lazy-loading-progressive-migration-native/). On browsers that support it, LazyLoad will set the `loading=\"lazy\"` attribute on images, iframes and videos, and delegate their loading to the browser.                                                                    | `false`            | `true`                                   |\n| `restore_on_error`    | Tells LazyLoad if to restore the original values of `src`, `srcset` and `sizes` when a loading error occurs.                                                                                                                                                                                                                                                                                                                                                 | `false`            | `true`                                   |\n\n### Methods\n\n**Instance methods**\n\nYou can call the following methods on any instance of LazyLoad.\n\n| Method name    | Effect                                                                                                                                                           | Use case                                                                          |\n| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |\n| `update()`     | Make LazyLoad to re-check the DOM for `elements_selector` elements inside its `container`.                                                                       | Update LazyLoad after you added or removed DOM elements to the page.              |\n| `loadAll()`    | Loads all the lazy elements right away _and_ stop observing them, no matter if they are inside or outside the viewport, no matter if they are hidden or visible. | To load all the remaining elements in advance                                     |\n| `restoreAll()` | Restores DOM to its original state. Note that it doesn't destroy LazyLoad, so you probably want to use it along with `destroy()`.                                | Reset the DOM before a soft page navigation (SPA) occures, e.g. using TurboLinks. |\n| `destroy()`    | Destroys the instance, unsetting instance variables and removing listeners.                                                                                      | Free up some memory. Especially useful for Single Page Applications.              |\n\n**Static methods**\n\nYou can call the following static methods on the LazyLoad class itself (e.g. `LazyLoad.load(element, settings)`).\n\n| Method name               | Effect                                                                                                                                                                                                                                                                                 | Use case                                                                                                                                                                                                           |\n| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `load(element, settings)` | Immediately loads the lazy `element`. You can pass your custom options in the `settings` parameter. Note that the `elements_selector` option has no effect, since you are passing the element as a parameter. Also note that this method has effect only once on a specific `element`. | To load an `element` at mouseover or at any other event different than \"entering the viewport\"                                                                                                                     |\n| `resetStatus(element)`    | Resets the internal status of the given `element`.                                                                                                                                                                                                                                     | To tell LazyLoad to consider this `element` again, for example: if you changed the `data-src` attribute after the previous `data-src` was loaded, call this method, then call `update()` on the LazyLoad instance. |\n\n### Properties\n\nYou can use the following properties on any instance of LazyLoad.\n\n| Property name  | Value                                                                                                                                                                                                                                      |\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `loadingCount` | The number of elements that are currently downloading from the network (limitedly to the ones managed by the instance of LazyLoad). This is particularly useful to understand whether or not is safe to destroy this instance of LazyLoad. |\n| `toLoadCount`  | The number of elements that haven't been lazyloaded yet (limitedly to the ones managed by the instance of LazyLoad)                                                                                                                        |\n\n---\n\n**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## 😯 All features, compared\n\nA list of all vanilla-lazyload features, compared with other popular lazy loading libraries.\n\n### vanilla-lazyload VS lazysizes\n\n| It                                                                                                                       | vanilla-lazyload | lazysizes   |\n| ------------------------------------------------------------------------------------------------------------------------ | ---------------- | ----------- |\n| Is lightweight                                                                                                           | ✔ (2.8 kB)       | ✔ (3.4 kB)  |\n| Is extendable                                                                                                            | ✔ (API)          | ✔ (plugins) |\n| Is SEO friendly                                                                                                          | ✔                | ✔           |\n| Optimized for INP (uses `IntersectionObserver` instead of [these]https://gist.github.com/paulirish/5d52fb081b3570c81e3a) | ✔                |             |\n| Optimizes performance by cancelling downloads of images that already exited the viewport                                 | ✔                |             |\n| Retries loading after network connection went off and on again                                                           | ✔                |             |\n| Supports conditional usage of native lazyloading                                                                         | ✔                |             |\n| Works with your DOM, your own classes and data-attributes                                                                | ✔                |             |\n| Can lazyload responsive images                                                                                           | ✔                | ✔           |\n| ...and automatically calculate the value of the `sizes` attribute                                                        |                  | ✔           |\n| Can lazyload iframes                                                                                                     | ✔                | ✔           |\n| Can lazyload animated SVGs                                                                                               | ✔                |             |\n| Can lazyload videos                                                                                                      | ✔                |             |\n| Can lazyload background images                                                                                           | ✔                |             |\n| Can lazily execute code, when given elements enter the viewport                                                          | ✔                |             |\n| Can restore DOM to its original state                                                                                    | ✔                |             |\n\nWeights source: [bundlephobia](https://bundlephobia.com/). Find others table rows explanation below.\n\n#### Is extendable\n\nBoth scripts are extendable, check out the [API](#-api).\n\n#### Is SEO friendly\n\nBoth scripts **don't hide images/assets from search engines**. No matter what markup pattern you use. Search engines don't scroll/interact with your website. These scripts detects whether or not the user agent is capable to scroll. If not, they reveal all images instantly.\n\n#### Optimizes performance by cancelling downloads of images that already exited the viewport\n\nIf your mobile users are on slow connections and scrolls down fast, vanilla-lazyload cancels the download of images that are still loading but already exited the viewport.\n\n#### Retries loading after network connection went off and on\n\nIf your mobile users are on flaky connections and go offline and back online, vanilla-lazyload retries downloading the images that errored.\n\n#### Supports conditional usage of native lazyloading\n\nIf your users are on a browser supporting native lazyloading and you want to use it, just set the `use_native` option to `true`.\n\n#### Works with your DOM, your own classes and data-attributes\n\nBoth scripts work by default with the `data-src` attribute and the `lazy` class in your DOM, but on LazyLoad you can change it, e.g. using `data-origin` to migrate from other lazy loading script.\n\n#### Can lazyload responsive images\n\nBoth scripts can lazyload images and responsive images by all kinds, e.g. `<img src=\"...\" srcset=\"...\" sizes=\"...\">` and `<picture><source media=\"...\" srcset=\"\" ...><img ...></picture>`.\n\n#### ...and automatically calculate the value of the `sizes` attribute\n\nlazysizes is it can derive the value of the `sizes` attribute from your CSS by using Javascript.\nvanilla-lazyload doesn't have this feature because of performance optimization reasons (the `sizes` attribute is useful to eagerly load responsive images when it's expressed in the markup, not when it's set by javascript).\n\n#### Can lazyload iframes\n\nBoth scripts can lazyload the `iframe` tag.\n\n#### Can lazyload animated SVGs\n\nOnly vanilla-lazyload can load animated SVGs via the `object` tag.\n\n#### Can lazyload videos\n\nOnly vanilla-lazyload can lazyload the `video` tag, even with multiple `source`s.\n\n#### Can lazyload background images\n\nOnly vanilla-lazyload can lazyload background images. And also multiple background images. And supporting HiDPI such as Retina and Super Retina display.\n\n#### Can lazily execute code, when given elements enter the viewport\n\nCheck out the [lazy functions](#lazy-functions) section and learn how to execute code only when given elements enter the viewport.\n\n#### Can restore DOM to its original state\n\nUsing the `restoreAll()` method, you can make LazyLoad restore all DOM manipulated from LazyLoad to how it was when the page was loaded the first time.\n\n---\n\n**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## Tested on real browsers\n\nThis script is tested in every browser before every release using [BrowserStack](http://browserstack.com/) live, thanks to the BrowserStack Open Source initiative.\n\n<a href=\"http://browserstack.com/\"><img alt=\"BrowserStack Logo\" src=\"./img/browserstack-logo-600x315.png\"  width=\"300\" height=\"158\"/></a>\n"
  },
  {
    "path": "UPGRADE.md",
    "content": "# 🗺 HOW TO UPDATE FROM PREVIOUS VERSIONS\n\n## Version 16 to 17\n\n**If you were NOT setting the `elements_selector` option**\n\nYou should add the `lazy` class to your lazy images.\n\n```html\n<!-- FROM -->\n<img data-src=\"lazyImage.jpg\" alt=\"Lazy image\" />\n<!-- TO -->\n<img class=\"lazy\" data-src=\"lazyImage.jpg\" alt=\"Lazy image\" />\n```\n\n**ALTERNATIVELY**, you could set the `elements_selector` option to `\"img\"`\n\n```js\nconst myLazyLoad = new LazyLoad({\n  /* other options here */\n  elements_selector: \"img\" // ADD THIS OPTION\n});\n```\n\n\n**If you were using `cancel_on_exit: true`**\n\n```js\n// From\nconst myLazyLoad = new LazyLoad({\n  /* other options here */\n  cancel_on_exit: true // REMOVE THIS OPTION\n});\n```\n\nYou should remove `cancel_on_exit: true` from the settings.\n\n---\n\n**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## Version 15 to 16\n\n**If you were using the `callback_reveal` callback**\n\nYou should replace `callback_reveal` with `callback_loading` in your JS code.\n\n**If you were using the instance `load(element)` method**\n\nYou should replace the `load(element)` with `LazyLoad.load(element, settings)`\n\n```js\nconst myLazyLoad = new LazyLoad({\n  /* options here */\n});\n// FROM\nmyLazyLoad.load(element);\n// TO\nLazyLoad.load(element, {\n  /* options here */\n});\n```\n\nNote that the settings object of the `load` method can be different. If none are provided, the default options will apply.\n\n**If you were using `auto_unobserve: false`**\n\nYou should replace `auto_unobserve` with `unobserve_completed`.\n\n```js\nconst myLazyLoad = new LazyLoad({\n  // FROM\n  auto_unobserve: false,\n  // TO\n  unobserve_completed: false\n});\n```\n\n**If you were using the `load_delay` option**\n\nYou should change `load_delay: ___` with `cancel_on_exit: true`.\n\n```js\nconst myLazyLoad = new LazyLoad({\n  // FROM\n  load_delay: 300,\n  // TO\n  cancel_on_exit: true\n});\n```\n\n---\n\n**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## Version 14 to 15\n\n**If you have background images loaded via `data-src`**\n\nYou should replace `data-src` with `data-bg` in your markup/DOM\n\n```html\n<!-- FROM -->\n<div data-src=\"background.jpg\">...</div>\n<!-- TO -->\n<div data-bg=\"background.jpg\">...</div>\n```\n\n**ALTERNATIVELY**, you could pass `src` in the `data_bg` option\n\n```js\nnew LazyLoad({\n  /* other options here */\n  data_bg: \"src\"\n});\n```\n\n**If you have single background images loaded via `data-bg`**\n\nYou must remove the `url()` part from the `data-bg` attribute values\n\n```html\n<!-- FROM -->\n<div data-bg=\"url(background.jpg)\">...</div>\n<!-- TO -->\n<div data-bg=\"background.jpg\">...</div>\n```\n\n**If you have multipe background images loaded via `data-bg`**\n\nYou must change the attribute to `data-bg-multi`\n\n```html\n<!-- FROM -->\n<div data-bg=\"url(background1.jpg), url(background2.jpg)\">...</div>\n<!-- TO -->\n<div data-bg-multi=\"url(background1.jpg), url(background2.jpg)\">...</div>\n```\n\n---\n\n**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## Version 13 to 14\n\n**If you are using `callback_reveal`**\n\nYou should replace it to `callback_loading`. `callback_reveal` still works but it will be removed in next versions\n\n```js\n// FROM\nnew LazyLoad({ /* other options? */ callback_reveal: () => {} });\n// TO\nnew LazyLoad({ /* other options? */ callback_loading: () => {} });\n```\n\n---\n\n**Love this project? 😍 [Buy me a coffee!](https://ko-fi.com/verlok)**\n\n---\n\n## Version 12 to 13\n\n**If you are using `callback_set`**\n\nYou should replace it to `callback_reveal`. `callback_set` still works but it will be removed in next versions\n\n```js\n// FROM\nnew LazyLoad({ /* other options? */ callback_set: () => {} });\n// TO\nnew LazyLoad({ /* other options? */ callback_reveal: () => {} });\n```\n"
  },
  {
    "path": "_config.yml",
    "content": "theme: jekyll-theme-slate\ntitle: vanilla-lazyload\ndescription: LazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading images only as they enter the viewport. LazyLoad supports responsive images.\n"
  },
  {
    "path": "bower.json",
    "content": "{\n  \"name\": \"vanilla-lazyload\",\n  \"homepage\": \"https://verlok.github.io/vanilla-lazyload/\",\n  \"authors\": [\"Andrea Verlicchi <andrea.verlicchi@gmail.com>\"],\n  \"description\": \"A fast, lightweight script to load images as they enter the viewport. Supporting responsive images (both srcset + sizes and picture).\",\n  \"main\": \"dist/lazyload.min.js\",\n  \"keywords\": [\n    \"lazy\",\n    \"load\",\n    \"responsive\",\n    \"images\",\n    \"picture\",\n    \"srcset\",\n    \"sizes\",\n    \"progressive\",\n    \"SEO\",\n    \"JPEG\",\n    \"performance\",\n    \"perfmatters\",\n    \"no-jquery\",\n    \"vanilla\"\n  ],\n  \"license\": \"MIT\",\n  \"ignore\": [\n    \"**/.*\",\n    \"node_modules\",\n    \"bower_components\",\n    \"test\",\n    \"tests\",\n    \"src\",\n    \"img\",\n    \"demos\",\n    \"Gruntfile.js\",\n    \"README.md\",\n    \"todo.md\",\n    \"favicon.ico\",\n    \"index.html\",\n    \"package.json\"\n  ]\n}\n"
  },
  {
    "path": "currentFeature.md",
    "content": "# Current feature:\n\n- Unobserve all elements on `loadAll()`. It's better for performance. It solves #469.\n- Added some hidden images in the `load_all.html` demo"
  },
  {
    "path": "demos/async.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Async loading - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      /* Fixes Firefox anomaly during image load */\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Async loading demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Open toe\"\n              data-src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis\"\n              data-src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-04.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-06.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-08.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-09.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-10.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-11.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-12.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-13.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-14.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-15.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-16.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-17.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-18.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-19.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Francesine\"\n              data-src=\"./images/440x560-20.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-21.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-22.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-23.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-24.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-25.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-26.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-27.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-28.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-29.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-30.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-31.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-32.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Cuissardes\"\n              data-src=\"./images/440x560-33.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-34.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-35.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-36.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-37.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-38.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-39.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-40.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n      </ul>\n    </div>\n    <script>\n      function logElementEvent(eventName, element) {\n        console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n      }\n\n      var callback_enter = function (element) {\n        logElementEvent(\"🔑 ENTERED\", element);\n      };\n      var callback_exit = function (element) {\n        logElementEvent(\"🚪 EXITED\", element);\n      };\n      var callback_loading = function (element) {\n        logElementEvent(\"⌚ LOADING\", element);\n      };\n      var callback_loaded = function (element) {\n        logElementEvent(\"👍 LOADED\", element);\n      };\n      var callback_error = function (element) {\n        logElementEvent(\"💀 ERROR\", element);\n        element.src =\n          \"./images/440x560-Error.webp\";\n      };\n      var callback_finish = function () {\n        logElementEvent(\"✔️ FINISHED\", document.documentElement);\n      };\n      var callback_cancel = function (element) {\n        logElementEvent(\"🔥 CANCEL\", element);\n      };\n\n      window.lazyLoadOptions = {\n        threshold: 0,\n        // Assign the callbacks defined above\n        callback_enter: callback_enter,\n        callback_exit: callback_exit,\n        callback_cancel: callback_cancel,\n        callback_loading: callback_loading,\n        callback_loaded: callback_loaded,\n        callback_error: callback_error,\n        callback_finish: callback_finish\n      };\n      window.addEventListener(\n        \"LazyLoad::Initialized\",\n        function (e) {\n          console.log(e.detail.instance);\n        },\n        false\n      );\n    </script>\n    <script async src=\"../dist/lazyload.min.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/async_multiple.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Async loading, multiple instances - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style type=\"text/css\">\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      .flex {\n        display: flex;\n      }\n\n      .results {\n        height: 564px;\n        overflow: scroll;\n        border: 1px dotted #f00;\n        flex-grow: 1;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Async loading, multiple instances demo</h1>\n    <div class=\"flex\">\n      <div id=\"results1\" class=\"results\">\n        <ul>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n              ><img\n                alt=\"Stivaletti\"\n                src=\"./images/440x560-01.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n              ><img\n                alt=\"Open toe\"\n                src=\"./images/440x560-02.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n              ><img\n                alt=\"Sneakers &amp; Tennis\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-03.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n              ><img\n                alt=\"Sneakers &amp; Tennis shoes basse\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-04.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n              ><img\n                alt=\"Sneakers &amp; Tennis shoes alte\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-05.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n              ><img\n                alt=\"Sneakers &amp; Tennis shoes alte\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-06.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n              ><img\n                alt=\"Sneakers &amp; Tennis shoes basse\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-07.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n              ><img\n                alt=\"Sneakers &amp; Tennis shoes basse\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-08.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n              ><img\n                alt=\"Stivali\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-09.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n              ><img\n                alt=\"Stivali\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-10.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n              ><img\n                alt=\"Stivaletti\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-11.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n              ><img\n                alt=\"Stivaletti\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-12.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivali_cod44719480km.html\"\n              ><img\n                alt=\"Stivali\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-13.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n              ><img\n                alt=\"Stivaletti\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-14.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n              ><img\n                alt=\"Décolleté\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-15.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n              ><img\n                alt=\"Mocassini\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-16.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n              ><img\n                alt=\"Stivaletti\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-17.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n              ><img\n                alt=\"Décolleté\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-18.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n              ><img\n                alt=\"Décolleté\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-19.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n        </ul>\n      </div>\n      <div id=\"results2\" class=\"results\">\n        <ul>\n          <li>\n            <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n              ><img\n                alt=\"Francesine\"\n                src=\"./images/440x560-20.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n              ><img\n                alt=\"Stivaletti\"\n                src=\"./images/440x560-21.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n              ><img\n                alt=\"Décolleté\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-22.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n              ><img\n                alt=\"Mocassini\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-23.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n              ><img\n                alt=\"Mocassini\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-24.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n              ><img\n                alt=\"Stivali\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-25.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n              ><img\n                alt=\"Stivaletti\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-26.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n              ><img\n                alt=\"Stivaletti\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-27.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n              ><img\n                alt=\"Mocassini\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-28.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n              ><img\n                alt=\"Stivaletti\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-29.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n              ><img\n                alt=\"Stivaletti\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-30.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n              ><img\n                alt=\"Stivaletti\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-31.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n              ><img\n                alt=\"Stivaletti\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-32.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n              ><img\n                alt=\"Cuissardes\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-33.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n              ><img\n                alt=\"Décolleté\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-34.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n              ><img\n                alt=\"Stivaletti\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-35.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n              ><img\n                alt=\"Sneakers &amp; Tennis shoes basse\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-36.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n              ><img\n                alt=\"Mocassini\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-37.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n              ><img\n                alt=\"Sneakers &amp; Tennis shoes basse\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-38.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n              ><img\n                alt=\"Mocassini\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-39.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n              ><img\n                alt=\"Mocassini\"\n                class=\"lazy\"\n                data-src=\"./images/440x560-40.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n        </ul>\n      </div>\n    </div>\n\n    <script>\n      function logElementEvent(eventName, element) {\n        console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n      }\n\n      var callback_enter = function (element) {\n        logElementEvent(\"🔑 ENTERED\", element);\n      };\n      var callback_exit = function (element) {\n        logElementEvent(\"🚪 EXITED\", element);\n      };\n      var callback_loading = function (element) {\n        logElementEvent(\"⌚ LOADING\", element);\n      };\n      var callback_loaded = function (element) {\n        logElementEvent(\"👍 LOADED\", element);\n      };\n      var callback_error = function (element) {\n        logElementEvent(\"💀 ERROR\", element);\n        element.src =\n          \"./images/440x560-Error.webp\";\n      };\n      var callback_finish = function () {\n        logElementEvent(\"✔️ FINISHED\", document.documentElement);\n      };\n      var callback_cancel = function (element) {\n        logElementEvent(\"🔥 CANCEL\", element);\n      };\n\n      window.lazyLoadInstances = [];\n      window.lazyLoadOptions = [\n        {\n          container: document.getElementById(\"results1\"),\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        },\n        {\n          container: document.getElementById(\"results2\"),\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        }\n      ];\n      window.addEventListener(\n        \"LazyLoad::Initialized\",\n        function (e) {\n          var instance = e.detail.instance;\n          console.log(instance);\n          lazyLoadInstances.push(instance);\n        },\n        false\n      );\n    </script>\n    <script async src=\"../dist/lazyload.min.js\"></script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/background_images.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>Background images - Lazyload demos</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a {\n        display: block;\n        width: 220px;\n        height: 280px;\n        background-size: 220px 280px;\n      }\n\n      a.multiple {\n        width: 440px;\n        background-repeat: no-repeat;\n        background-position: left, right;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Background images demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-01.webp\"\n            data-bg-hidpi=\"./images/440x560-01.webp\"\n          ></a>\n        </li>\n        <li>\n          <a class=\"lazy\" href=\"#\" data-bg=\"./images/220x280-02.webp\"></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-03.webp\"\n            data-bg-hidpi=\"./images/440x560-03.webp\"\n          ></a>\n        </li>\n        <li>\n          <a class=\"lazy\" href=\"#\" data-bg=\"./images/220x280-04.webp\"></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-05.webp\"\n            data-bg-hidpi=\"./images/440x560-05.webp\"\n          ></a>\n        </li>\n        <li>\n          <a class=\"lazy\" href=\"#\" data-bg=\"./images/220x280-06.webp\"></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-07.webp\"\n            data-bg-hidpi=\"./images/440x560-07.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-08.webp\"\n            data-bg-hidpi=\"./images/440x560-08.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-09.webp\"\n            data-bg-hidpi=\"./images/440x560-09.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-10.webp\"\n            data-bg-hidpi=\"./images/440x560-10.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-11.webp\"\n            data-bg-hidpi=\"./images/440x560-11.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-12.webp\"\n            data-bg-hidpi=\"./images/440x560-12.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-13.webp\"\n            data-bg-hidpi=\"./images/440x560-13.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-14.webp\"\n            data-bg-hidpi=\"./images/440x560-14.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-15.webp\"\n            data-bg-hidpi=\"./images/440x560-15.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-16.webp\"\n            data-bg-hidpi=\"./images/440x560-16.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-17.webp\"\n            data-bg-hidpi=\"./images/440x560-17.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-18.webp\"\n            data-bg-hidpi=\"./images/440x560-18.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-19.webp\"\n            data-bg-hidpi=\"./images/440x560-19.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-20.webp\"\n            data-bg-hidpi=\"./images/440x560-20.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-21.webp\"\n            data-bg-hidpi=\"./images/440x560-21.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-22.webp\"\n            data-bg-hidpi=\"./images/440x560-22.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-23.webp\"\n            data-bg-hidpi=\"./images/440x560-23.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-24.webp\"\n            data-bg-hidpi=\"./images/440x560-24.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-25.webp\"\n            data-bg-hidpi=\"./images/440x560-25.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-26.webp\"\n            data-bg-hidpi=\"./images/440x560-26.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-27.webp\"\n            data-bg-hidpi=\"./images/440x560-27.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-28.webp\"\n            data-bg-hidpi=\"./images/440x560-28.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-29.webp\"\n            data-bg-hidpi=\"./images/440x560-29.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-30.webp\"\n            data-bg-hidpi=\"./images/440x560-30.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-31.webp\"\n            data-bg-hidpi=\"./images/440x560-31.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-32.webp\"\n            data-bg-hidpi=\"./images/440x560-32.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-33.webp\"\n            data-bg-hidpi=\"./images/440x560-33.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-34.webp\"\n            data-bg-hidpi=\"./images/440x560-34.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-35.webp\"\n            data-bg-hidpi=\"./images/440x560-35.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-36.webp\"\n            data-bg-hidpi=\"./images/440x560-36.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-37.webp\"\n            data-bg-hidpi=\"./images/440x560-37.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-38.webp\"\n            data-bg-hidpi=\"./images/440x560-38.webp\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg=\"./images/220x280-39.webp\"\n            data-bg-hidpi=\"./images/440x560-39.webp\"\n          ></a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      function logElementEvent(eventName, element) {\n        console.log(Date.now(), eventName, element.getAttribute(\"data-bg88da112-bg-hidpi=bg\"));\n      }\n\n      var callback_enter = function (element) {\n        logElementEvent(\"🔑 ENTERED\", element);\n      };\n      var callback_exit = function (element) {\n        logElementEvent(\"🚪 EXITED\", element);\n      };\n      var callback_loading = function (element) {\n        logElementEvent(\"⌚ LOADING\", element);\n      };\n      var callback_loaded = function (element) {\n        logElementEvent(\"👍 LOADED\", element);\n      };\n      var callback_error = function (element) {\n        logElementEvent(\"💀 ERROR\", element);\n        element.style.backgroundImage = 'url(\"./images/440x560-Error.webp\")';\n      };\n      var callback_finish = function () {\n        logElementEvent(\"✔️ FINISHED\", document.documentElement);\n      };\n      var callback_cancel = function (element) {\n        logElementEvent(\"🔥 CANCEL\", element);\n      };\n\n      LL = new LazyLoad({\n        // Assign the callbacks defined above\n        callback_enter: callback_enter,\n        callback_exit: callback_exit,\n        callback_cancel: callback_cancel,\n        callback_loading: callback_loading,\n        callback_loaded: callback_loaded,\n        callback_error: callback_error,\n        callback_finish: callback_finish\n      });\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/background_images_image-set.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>Background images with \"image-set\" - Lazyload demos</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a {\n        display: block;\n        width: 220px;\n        height: 280px;\n        background-size: 220px 280px;\n      }\n\n      a.multiple {\n        width: 440px;\n        background-repeat: no-repeat;\n        background-position: left, right;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Background images with <q>image-set</q> demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a\n            href=\"#\"\n            style=\"\n              background-image: image-set(\n                url('./images/220x280-01.webp') 1x,\n                url('./images/440x560-01.webp') 2x\n              );\n            \"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"multiple\"\n            href=\"#\"\n            style=\"\n              background-image: image-set(\n                  url('./images/220x280-L-02.webp') 1x,\n                  url('./images/440x560-L-02.webp') 2x\n                ),\n                image-set(\n                  url('./images/220x280-R-02.webp') 1x,\n                  url('./images/440x560-R-02.webp') 2x\n                );\n            \"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-03.webp\") 1x, url(\"./images/440x560-03.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy multiple\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-L-04.webp\") 1x, url(\"./images/440x560-L-04.webp\") 2x | url(\"./images/220x280-R-04.webp\") 1x, url(\"./images/440x560-R-04.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-05.webp\") 1x, url(\"./images/440x560-05.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-06.webp\") 1x, url(\"./images/440x560-06.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-07.webp\") 1x, url(\"./images/440x560-07.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-08.webp\") 1x, url(\"./images/440x560-08.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-09.webp\") 1x, url(\"./images/440x560-09.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-10.webp\") 1x, url(\"./images/440x560-10.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-11.webp\") 1x, url(\"./images/440x560-11.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-12.webp\") 1x, url(\"./images/440x560-12.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-13.webp\") 1x, url(\"./images/440x560-13.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-14.webp\") 1x, url(\"./images/440x560-14.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-15.webp\") 1x, url(\"./images/440x560-15.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-16.webp\") 1x, url(\"./images/440x560-16.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-17.webp\") 1x, url(\"./images/440x560-17.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-18.webp\") 1x, url(\"./images/440x560-18.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-19.webp\") 1x, url(\"./images/440x560-19.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-20.webp\") 1x, url(\"./images/440x560-20.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-21.webp\") 1x, url(\"./images/440x560-21.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-22.webp\") 1x, url(\"./images/440x560-22.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-23.webp\") 1x, url(\"./images/440x560-23.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-24.webp\") 1x, url(\"./images/440x560-24.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-25.webp\") 1x, url(\"./images/440x560-25.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-26.webp\") 1x, url(\"./images/440x560-26.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-27.webp\") 1x, url(\"./images/440x560-27.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-28.webp\") 1x, url(\"./images/440x560-28.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-29.webp\") 1x, url(\"./images/440x560-29.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-30.webp\") 1x, url(\"./images/440x560-30.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-31.webp\") 1x, url(\"./images/440x560-31.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-32.webp\") 1x, url(\"./images/440x560-32.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-33.webp\") 1x, url(\"./images/440x560-33.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-34.webp\") 1x, url(\"./images/440x560-34.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-35.webp\") 1x, url(\"./images/440x560-35.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-36.webp\") 1x, url(\"./images/440x560-36.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-37.webp\") 1x, url(\"./images/440x560-37.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-38.webp\") 1x, url(\"./images/440x560-38.webp\") 2x'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#\"\n            data-bg-set='url(\"./images/220x280-39.webp\") 1x, url(\"./images/440x560-39.webp\") 2x'\n          ></a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      function logElementEvent(eventName, element) {\n        console.log(Date.now(), eventName, element.getAttribute(\"data-bg88da112-bg-hidpi=bg\"));\n      }\n\n      var callback_enter = function (element) {\n        logElementEvent(\"🔑 ENTERED\", element);\n      };\n      var callback_exit = function (element) {\n        logElementEvent(\"🚪 EXITED\", element);\n      };\n      var callback_loading = function (element) {\n        logElementEvent(\"⌚ LOADING\", element);\n      };\n      var callback_loaded = function (element) {\n        logElementEvent(\"👍 LOADED\", element);\n      };\n      var callback_error = function (element) {\n        logElementEvent(\"💀 ERROR\", element);\n        element.style.backgroundImage = 'url(\"./images/440x560-Error.webp\")';\n      };\n      var callback_finish = function () {\n        logElementEvent(\"✔️ FINISHED\", document.documentElement);\n      };\n      var callback_cancel = function (element) {\n        logElementEvent(\"🔥 CANCEL\", element);\n      };\n\n      LL = new LazyLoad({\n        // Assign the callbacks defined above\n        callback_enter: callback_enter,\n        callback_exit: callback_exit,\n        callback_cancel: callback_cancel,\n        callback_loading: callback_loading,\n        callback_loaded: callback_loaded,\n        callback_error: callback_error,\n        callback_finish: callback_finish\n      });\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/background_images_multi.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>Multiple background images - Lazyload demos</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a {\n        display: block;\n        width: 220px;\n        height: 280px;\n        background-size: 220px 280px;\n      }\n\n      a.multiple {\n        width: 440px;\n        background-repeat: no-repeat;\n        background-position: left, right;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Multiple background images demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            data-bg-multi='url(\"./images/220x280-01.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-01.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            data-bg-multi='url(\"./images/220x280-02.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            data-bg-multi='url(\"./images/220x280-L-03.webp\"), url(\"./images/440x560-R-03.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-L-03.webp\"), url(\"./images/440x560-R-03.webp\")'\n            class=\"multiple\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            data-bg-multi='url(\"./images/220x280-03.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            data-bg-multi='url(\"./images/220x280-04.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-04.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            data-bg-multi='url(\"./images/220x280-L-05.webp\"), url(\"./images/440x560-R-05.webp\")'\n            class=\"multiple\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            data-bg-multi='url(\"./images/220x280-06.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-06.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            data-bg-multi='url(\"./images/220x280-07.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-07.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivali_cod44736534fq.html\"\n            data-bg-multi='url(\"./images/220x280-L-08.webp\"), url(\"./images/440x560-R-08.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-L-08.webp\"), url(\"./images/440x560-R-08.webp\")'\n            class=\"multiple\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivali_cod44735388ui.html\"\n            data-bg-multi='url(\"./images/220x280-09.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-09.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            data-bg-multi='url(\"./images/220x280-10.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-10.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            data-bg-multi='url(\"./images/220x280-L-11.webp\"), url(\"./images/440x560-R-11.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-L-11.webp\"), url(\"./images/440x560-R-11.webp\")'\n            class=\"multiple\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivali_cod44719480km.html\"\n            data-bg-multi='url(\"./images/220x280-12.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-12.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            data-bg-multi='url(\"./images/220x280-13.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-13.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/decollete_cod44721899ng.html\"\n            data-bg-multi='url(\"./images/220x280-L-14.webp\"), url(\"./images/440x560-R-14.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-L-14.webp\"), url(\"./images/440x560-R-14.webp\")'\n            class=\"multiple\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            data-bg-multi='url(\"./images/220x280-15.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-15.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            data-bg-multi='url(\"./images/220x280-16.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-16.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/decollete_cod44718734xl.html\"\n            data-bg-multi='url(\"./images/220x280-L-17.webp\"), url(\"./images/440x560-R-17.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-L-17.webp\"), url(\"./images/440x560-R-17.webp\")'\n            class=\"multiple\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/decollete_cod44721796uk.html\"\n            data-bg-multi='url(\"./images/220x280-18.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-18.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/francesine_cod44717679mj.html\"\n            data-bg-multi='url(\"./images/220x280-19.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-19.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            data-bg-multi='url(\"./images/220x280-L-20.webp\"), url(\"./images/440x560-R-20.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-L-20.webp\"), url(\"./images/440x560-R-20.webp\")'\n            class=\"multiple\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/decollete_cod44726148aq.html\"\n            data-bg-multi='url(\"./images/220x280-21.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-21.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            data-bg-multi='url(\"./images/220x280-22.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-22.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            data-bg-multi='url(\"./images/220x280-L-23.webp\"), url(\"./images/440x560-R-23.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-L-23.webp\"), url(\"./images/440x560-R-23.webp\")'\n            class=\"multiple\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivali_cod44724026qs.html\"\n            data-bg-multi='url(\"./images/220x280-24.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-24.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            data-bg-multi='url(\"./images/220x280-25.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-25.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            data-bg-multi='url(\"./images/220x280-L-26.webp\"), url(\"./images/440x560-R-26.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-L-26.webp\"), url(\"./images/440x560-R-26.webp\")'\n            class=\"multiple\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            data-bg-multi='url(\"./images/220x280-27.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-27.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            data-bg-multi='url(\"./images/220x280-28.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-28.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            data-bg-multi='url(\"./images/220x280-L-29.webp\"), url(\"./images/440x560-R-29.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-L-29.webp\"), url(\"./images/440x560-R-29.webp\")'\n            class=\"multiple\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            data-bg-multi='url(\"./images/220x280-30.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-30.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            data-bg-multi='url(\"./images/220x280-31.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-31.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            data-bg-multi='url(\"./images/220x280-L-32.webp\"), url(\"./images/440x560-R-32.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-L-32.webp\"), url(\"./images/440x560-R-32.webp\")'\n            class=\"multiple\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/decollete_cod44725388jv.html\"\n            data-bg-multi='url(\"./images/220x280-33.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-33.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            data-bg-multi='url(\"./images/220x280-34.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-34.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            data-bg-multi='url(\"./images/220x280-L-35.webp\"), url(\"./images/440x560-R-35.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-L-35.webp\"), url(\"./images/440x560-R-35.webp\")'\n            class=\"multiple\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            data-bg-multi='url(\"./images/220x280-36.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-36.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            data-bg-multi='url(\"./images/220x280-37.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-37.webp\")'\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            data-bg-multi='url(\"./images/220x280-L-38.webp\"), url(\"./images/440x560-R-38.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-L-38.webp\"), url(\"./images/440x560-R-38.webp\")'\n            class=\"multiple\"\n          ></a>\n        </li>\n        <li>\n          <a\n            class=\"lazy\"\n            href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            data-bg-multi='url(\"./images/220x280-39.webp\")'\n            data-bg-multi-hidpi='url(\"./images/440x560-39.webp\")'\n          ></a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      function logElementEvent(eventName, element) {\n        console.log(Date.now(), eventName, element.getAttribute(\"data-bg-multi\"));\n      }\n\n      var callback_enter = function (element) {\n        logElementEvent(\"🔑 ENTERED\", element);\n      };\n      var callback_exit = function (element) {\n        logElementEvent(\"🚪 EXITED\", element);\n      };\n      var callback_loading = function (element) {\n        logElementEvent(\"⌚ LOADING\", element);\n      };\n      var callback_applied = function (element) {\n        logElementEvent(\"👍 APPLIED\", element);\n      };\n      var callback_loaded = function (element) {\n        logElementEvent(\"👍 LOADED\", element);\n      };\n      var callback_error = function (element) {\n        logElementEvent(\"💀 ERROR\", element);\n        element.style.backgroundImage = \"url(&quot;./images/440x560-Error.webp&quot;)\";\n      };\n      var callback_finish = function () {\n        logElementEvent(\"✔️ FINISHED\", document.documentElement);\n      };\n      var callback_cancel = function (element) {\n        logElementEvent(\"🔥 CANCEL\", element);\n      };\n\n      LL = new LazyLoad({\n        // Assign the callbacks defined above\n        callback_enter: callback_enter,\n        callback_exit: callback_exit,\n        callback_cancel: callback_cancel,\n        callback_applied: callback_applied,\n        callback_loading: callback_loading,\n        callback_loaded: callback_loaded,\n        callback_error: callback_error,\n        callback_finish: callback_finish\n      });\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/container_multiple.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Multiple scrolling container - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style type=\"text/css\">\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      .flex {\n        display: flex;\n      }\n\n      .results {\n        height: 564px;\n        overflow: scroll;\n        border: 1px dotted #f00;\n        flex-grow: 1;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Multiple scrolling container demo</h1>\n    <div class=\"flex\">\n      <div id=\"results1\" class=\"results\">\n        <ul>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n              ><img\n                alt=\"Stivaletti\"\n                src=\"./images/440x560-01.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n              ><img\n                alt=\"Open toe\"\n                src=\"./images/440x560-02.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Sneakers &amp; Tennis\"\n                data-src=\"./images/440x560-03.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Sneakers &amp; Tennis shoes basse\"\n                data-src=\"./images/440x560-04.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Sneakers &amp; Tennis shoes alte\"\n                data-src=\"./images/440x560-05.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Sneakers &amp; Tennis shoes alte\"\n                data-src=\"./images/440x560-06.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Sneakers &amp; Tennis shoes basse\"\n                data-src=\"./images/440x560-07.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Sneakers &amp; Tennis shoes basse\"\n                data-src=\"./images/440x560-08.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Stivali\"\n                data-src=\"./images/440x560-09.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Stivali\"\n                data-src=\"./images/440x560-10.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Stivaletti\"\n                data-src=\"./images/440x560-11.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Stivaletti\"\n                data-src=\"./images/440x560-12.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivali_cod44719480km.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Stivali\"\n                data-src=\"./images/440x560-13.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Stivaletti\"\n                data-src=\"./images/440x560-14.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Décolleté\"\n                data-src=\"./images/440x560-15.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Mocassini\"\n                data-src=\"./images/440x560-16.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Stivaletti\"\n                data-src=\"./images/440x560-17.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Décolleté\"\n                data-src=\"./images/440x560-18.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Décolleté\"\n                data-src=\"./images/440x560-19.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n        </ul>\n      </div>\n      <div id=\"results2\" class=\"results\">\n        <ul>\n          <li>\n            <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n              ><img\n                alt=\"Francesine\"\n                src=\"./images/440x560-20.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n              ><img\n                alt=\"Stivaletti\"\n                src=\"./images/440x560-21.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Décolleté\"\n                data-src=\"./images/440x560-22.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Mocassini\"\n                data-src=\"./images/440x560-23.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Mocassini\"\n                data-src=\"./images/440x560-24.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Stivali\"\n                data-src=\"./images/440x560-25.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Stivaletti\"\n                data-src=\"./images/440x560-26.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Stivaletti\"\n                data-src=\"./images/440x560-27.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Mocassini\"\n                data-src=\"./images/440x560-28.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Stivaletti\"\n                data-src=\"./images/440x560-29.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Stivaletti\"\n                data-src=\"./images/440x560-30.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Stivaletti\"\n                data-src=\"./images/440x560-31.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Stivaletti\"\n                data-src=\"./images/440x560-32.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Cuissardes\"\n                data-src=\"./images/440x560-33.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Décolleté\"\n                data-src=\"./images/440x560-34.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Stivaletti\"\n                data-src=\"./images/440x560-35.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Sneakers &amp; Tennis shoes basse\"\n                data-src=\"./images/440x560-36.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Mocassini\"\n                data-src=\"./images/440x560-37.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Sneakers &amp; Tennis shoes basse\"\n                data-src=\"./images/440x560-38.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Mocassini\"\n                data-src=\"./images/440x560-39.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n          <li>\n            <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n              ><img\n                class=\"lazy\"\n                alt=\"Mocassini\"\n                data-src=\"./images/440x560-40.webp\"\n                width=\"220\"\n                height=\"280\"\n            /></a>\n          </li>\n        </ul>\n      </div>\n    </div>\n\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        var ll1 = new LazyLoad({\n          container: document.getElementById(\"results1\"),\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n\n        var ll2 = new LazyLoad({\n          container: document.getElementById(\"results2\"),\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/container_single.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Single scrolling container - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      #results1 {\n        height: 564px;\n        overflow: scroll;\n        border: 1px dotted #f00;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Single scrolling container demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis\"\n              data-src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-04.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-06.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-08.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-09.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-10.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-11.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-12.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-13.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-14.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-15.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-16.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-17.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-18.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-19.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Francesine\"\n              data-src=\"./images/440x560-20.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-21.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-22.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-23.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-24.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-25.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-26.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-27.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-28.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-29.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-30.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-31.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-32.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Cuissardes\"\n              data-src=\"./images/440x560-33.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-34.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-35.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-36.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-37.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-38.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-39.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-40.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        var ll = new LazyLoad({\n          container: document.getElementById(\"results1\"),\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/dynamic_content.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Dynamic content - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      .buttons {\n        position: fixed;\n        bottom: 10px;\n        left: 0;\n        right: 0;\n        display: flex;\n        justify-content: center;\n      }\n\n      button {\n        width: 12em;\n        height: 3em;\n        margin: 0.5em;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Dynamic content demo</h1>\n    <div class=\"buttons\">\n      <button id=\"addContent\">\n        ADD CONTENT\n        <span class=\"count\"></span>\n      </button>\n      <button id=\"removeContent\">\n        REMOVE CONTENT\n        <span class=\"count\"></span>\n      </button>\n    </div>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#\">\n            <img\n              src=\"./images/440x560-01.webp\"\n              alt=\"Stivaletti\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#\">\n            <img\n              src=\"./images/440x560-02.webp\"\n              alt=\"Open toe\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#\">\n            <img\n              class=\"lazy\"\n              data-src=\"./images/440x560-03.webp\"\n              alt=\"Sneakers &amp; Tennis\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#\">\n            <img\n              class=\"lazy\"\n              data-src=\"./images/440x560-04.webp\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#\">\n            <img\n              class=\"lazy\"\n              data-src=\"./images/440x560-05.webp\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#\">\n            <img\n              class=\"lazy\"\n              data-src=\"./images/440x560-06.webp\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#\">\n            <img\n              class=\"lazy\"\n              data-src=\"./images/440x560-07.webp\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        var count = 0,\n          addContentButton,\n          additionalContent,\n          target;\n\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        ll = new LazyLoad({\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n\n        // Add more content\n        additionalContent = [\n          '<li><a href=\"#\"><img alt=\"Sneakers &amp; Tennis shoes basse\" src=\"./images/440x560-09.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img alt=\"Stivali\" class=\"lazy\" data-src=\"./images/440x560-10.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img alt=\"Stivali\" class=\"lazy\" data-src=\"./images/440x560-11.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img alt=\"Stivaletti\" class=\"lazy\" data-src=\"./images/440x560-12.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img alt=\"Stivaletti\" class=\"lazy\" data-src=\"./images/440x560-13.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img alt=\"Stivali\" class=\"lazy\" data-src=\"./images/440x560-14.webp\" width=\"220\" height=\"280\"></a> </li>',\n          '<li><a href=\"#\"><img alt=\"Stivaletti\" src=\"./images/440x560-15.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img alt=\"Décolleté\" class=\"lazy\" data-src=\"./images/440x560-16.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img alt=\"Mocassini\" class=\"lazy\" data-src=\"./images/440x560-17.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img alt=\"Stivaletti\" class=\"lazy\" data-src=\"./images/440x560-18.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img alt=\"Décolleté\" class=\"lazy\" data-src=\"./images/440x560-19.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img alt=\"Décolleté\" class=\"lazy\" data-src=\"./images/440x560-20.webp\" width=\"220\" height=\"280\"></a> </li>',\n          '<li><a href=\"#\"><img alt=\"Francesine\" src=\"./images/440x560-21.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img alt=\"Stivaletti\" class=\"lazy\" data-src=\"./images/440x560-22.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img alt=\"Décolleté\" class=\"lazy\" data-src=\"./images/440x560-23.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img alt=\"Mocassini\" class=\"lazy\" data-src=\"./images/440x560-24.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img alt=\"Mocassini\" class=\"lazy\" data-src=\"./images/440x560-25.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img alt=\"Stivali\" class=\"lazy\" data-src=\"./images/440x560-26.webp\" width=\"220\" height=\"280\"></a> </li>'\n        ];\n\n        addContentButton = document.getElementById(\"addContent\");\n        target = document.querySelector(\"#results1 ul\");\n\n        addContentButton.addEventListener(\"click\", function () {\n          if (count === additionalContent.length) {\n            return;\n          }\n          target.innerHTML += additionalContent[count];\n          ll.update();\n          addContentButton.disabled = ++count >= additionalContent.length;\n        });\n\n        // Remove the first 3 list items\n        removeContentButton = document.getElementById(\"removeContent\");\n        removeContentButton.addEventListener(\"click\", function () {\n          var images = document.querySelectorAll(\"#results1 img\");\n          var i = 0;\n          while (images[i] && i < 3) {\n            var image = images[i];\n            var listItem = image.parentNode.parentNode;\n            var list = listItem.parentNode;\n            list.removeChild(listItem);\n            i += 1;\n          }\n          ll.update();\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/dynamic_content_nodeset.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Dynamic content passing nodeset - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      button {\n        position: fixed;\n        bottom: 10px;\n        width: 10em;\n        height: 3em;\n        left: 50%;\n        margin-left: -5em;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Dynamic content passing nodeset demo</h1>\n    <button id=\"addContent\">\n      ADD CONTENT\n      <span class=\"count\"></span>\n    </button>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#\">\n            <img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#\">\n            <img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#\">\n            <img\n              alt=\"Sneakers &amp; Tennis\"\n              data-src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-04.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-06.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        var count = 0,\n          addContentButton,\n          additionalContent,\n          target;\n\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        ll = new LazyLoad(\n          {\n            // Assign the callbacks defined above\n            callback_enter: callback_enter,\n            callback_exit: callback_exit,\n            callback_cancel: callback_cancel,\n            callback_loading: callback_loading,\n            callback_loaded: callback_loaded,\n            callback_error: callback_error,\n            callback_finish: callback_finish\n          },\n          document.querySelectorAll(\"img\")\n        );\n\n        additionalContent = [\n          '<li><a href=\"#\"><img alt=\"Sneakers &amp; Tennis shoes basse\" src=\"./images/440x560-08.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img class=\"lazy\" alt=\"Stivali\" data-src=\"./images/440x560-09.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img class=\"lazy\" alt=\"Stivali\" data-src=\"./images/440x560-10.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img class=\"lazy\" alt=\"Stivaletti\" data-src=\"./images/440x560-11.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img class=\"lazy\" alt=\"Stivaletti\" data-src=\"./images/440x560-12.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img class=\"lazy\" alt=\"Stivali\" data-src=\"./images/440x560-13.webp\" width=\"220\" height=\"280\"></a> </li>',\n          '<li><a href=\"#\"><img alt=\"Stivaletti\" src=\"./images/440x560-14.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img class=\"lazy\" alt=\"Décolleté\" data-src=\"./images/440x560-15.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img class=\"lazy\" alt=\"Mocassini\" data-src=\"./images/440x560-16.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img class=\"lazy\" alt=\"Stivaletti\" data-src=\"./images/440x560-17.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img class=\"lazy\" alt=\"Décolleté\" data-src=\"./images/440x560-18.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img class=\"lazy\" alt=\"Décolleté\" data-src=\"./images/440x560-19.webp\" width=\"220\" height=\"280\"></a> </li>',\n          '<li><a href=\"#\"><img alt=\"Francesine\" src=\"./images/440x560-20.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img class=\"lazy\" alt=\"Stivaletti\" data-src=\"./images/440x560-21.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img class=\"lazy\" alt=\"Décolleté\" data-src=\"./images/440x560-22.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img class=\"lazy\" alt=\"Mocassini\" data-src=\"./images/440x560-23.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img class=\"lazy\" alt=\"Mocassini\" data-src=\"./images/440x560-24.webp\" width=\"220\" height=\"280\"></a> </li> <li> <a href=\"#\"><img class=\"lazy\" alt=\"Stivali\" data-src=\"./images/440x560-25.webp\" width=\"220\" height=\"280\"></a> </li>'\n        ];\n\n        addContentButton = document.getElementById(\"addContent\");\n        target = document.querySelector(\"#results1 ul\");\n\n        addContentButton.addEventListener(\"click\", function () {\n          if (count === additionalContent.length) {\n            return;\n          }\n          target.innerHTML += additionalContent[count];\n          ll.update(document.querySelectorAll(\".lazy\"));\n          addContentButton.disabled = ++count >= additionalContent.length;\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/embedded.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>Basic - Lazyload demos</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      iframe {\n        display: block;\n        margin: 1rem 0;\n        height: 50vh;\n        border: 1px solid red;\n        width: 100%;\n        flex-basis: 49%;\n      }\n      @media (min-width: 650px) {\n        main {\n          display: flex;\n          justify-content: space-between;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Embedded in iframes</h1>\n    <main>\n      <iframe src=\"image_basic.html\" frameborder=\"0\"></iframe>\n      <iframe src=\"image_basic.html\" frameborder=\"0\"></iframe>\n    </main>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/error_no_restore.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Error, no restore - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      /* Fixes Firefox anomaly during image load */\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Error, no restore</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/not-found.pic\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/not-found.pic\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/not-found.pic\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/not-found.pic\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-10.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-11.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-12.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-13.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-14.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-15.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-16.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-17.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-18.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-19.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              alt=\"Francesine\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-20.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-21.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-22.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-23.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-24.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-25.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-26.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-27.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-28.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-29.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-30.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-31.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-32.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              alt=\"Cuissardes\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-33.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-34.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-35.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-36.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-37.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-38.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-39.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-40.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src = \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        var ll = new LazyLoad({\n          class_applied: \"lz-applied\",\n          class_loading: \"lz-loading\",\n          class_loaded: \"lz-loaded\",\n          class_error: \"lz-error\",\n          class_entered: \"lz-entered\",\n          class_exited: \"lz-exited\",\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/error_restore.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Error, restore - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      /* Fixes Firefox anomaly during image load */\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Error, restore original attribute</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/not-found.pic\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/not-found.pic\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/not-found.pic\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/not-found.pic\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-10.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-11.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-12.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-13.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-14.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-15.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-16.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-17.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-18.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-19.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              alt=\"Francesine\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-20.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-21.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-22.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-23.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-24.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-25.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-26.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-27.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-28.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-29.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-30.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-31.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-32.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              alt=\"Cuissardes\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-33.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-34.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-35.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-36.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-37.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 280'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-38.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-39.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-40.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        var ll = new LazyLoad({\n          restore_on_error: true,\n\n          class_applied: \"lz-applied\",\n          class_loading: \"lz-loading\",\n          class_loaded: \"lz-loaded\",\n          class_error: \"lz-error\",\n          class_entered: \"lz-entered\",\n          class_exited: \"lz-exited\",\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/esm.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>ESM version - Lazyload demos</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      /* Fixes Firefox anomaly during image load */\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>ESM version demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-04.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-06.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-08.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-09.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-10.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-11.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-12.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-13.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-14.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-15.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-16.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-17.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-18.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-19.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              alt=\"Francesine\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-20.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-21.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-22.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-23.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-24.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-25.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-26.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-27.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-28.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-29.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-30.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-31.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-32.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              alt=\"Cuissardes\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-33.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-34.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-35.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-36.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-37.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-38.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-39.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-40.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n      </ul>\n    </div>\n    <script type=\"module\">\n      import LazyLoad from \"../dist/esm/lazyload.js\";\n\n      const lazyLoadInstance = new LazyLoad({});\n      function logElementEvent(eventName, element) {\n        console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n      }\n\n      var callback_enter = function (element) {\n        logElementEvent(\"🔑 ENTERED\", element);\n      };\n      var callback_exit = function (element) {\n        logElementEvent(\"🚪 EXITED\", element);\n      };\n      var callback_loading = function (element) {\n        logElementEvent(\"⌚ LOADING\", element);\n      };\n      var callback_loaded = function (element) {\n        logElementEvent(\"👍 LOADED\", element);\n      };\n      var callback_error = function (element) {\n        logElementEvent(\"💀 ERROR\", element);\n        element.src = \"./images/440x560-Error.webp\";\n      };\n      var callback_finish = function () {\n        logElementEvent(\"✔️ FINISHED\", document.documentElement);\n      };\n      var callback_cancel = function (element) {\n        logElementEvent(\"🔥 CANCEL\", element);\n      };\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/fade_in.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Fade in effect - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      body {\n        font-family: sans-serif;\n      }\n      .intro {\n        margin: 1em 0;\n      }\n      p {\n        margin: 0.3em 0;\n      }\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      img {\n        display: block;\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n      img.lazy {\n        opacity: 0;\n      }\n      img:not(.initial) {\n        transition: opacity 1s;\n      }\n      img.initial,\n      img.loaded,\n      img.error {\n        opacity: 1;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <h1>Fade in effect demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis\"\n              data-src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-04.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-06.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-08.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-09.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-10.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-11.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-12.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-13.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-14.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-15.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-16.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-17.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-18.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-19.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Francesine\"\n              data-src=\"./images/440x560-20.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-21.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-22.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-23.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-24.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-25.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-26.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-27.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-28.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-29.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-30.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-31.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-32.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Cuissardes\"\n              data-src=\"./images/440x560-33.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-34.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-35.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-36.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-37.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-38.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-39.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-40.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        var ll = new LazyLoad({\n          threshold: 0,\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/hundreds.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Hundreds of items - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul {\n        display: flex;\n        flex-flow: row wrap;\n      }\n\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      /* Fixes Firefox anomaly during image load */\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Hundreds of items demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis\"\n              data-src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-04.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-06.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-08.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-09.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-10.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-11.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-12.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-13.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-14.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-15.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-16.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-17.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-18.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-19.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Francesine\"\n              data-src=\"./images/440x560-20.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-21.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-22.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-23.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-24.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-25.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-26.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-27.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-28.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-29.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-30.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-31.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-32.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Cuissardes\"\n              data-src=\"./images/440x560-33.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-34.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-35.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-36.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-37.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-38.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-39.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-40.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-41.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Open toe\"\n              data-src=\"./images/440x560-42.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis\"\n              data-src=\"./images/440x560-43.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-44.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-45.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-46.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-47.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-48.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-49.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-50.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-51.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-52.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-53.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-54.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-55.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-56.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-57.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-58.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-59.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Francesine\"\n              data-src=\"./images/440x560-60.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-61.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-62.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-63.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-64.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-65.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-66.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-67.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-68.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-69.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-70.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-71.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-72.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Cuissardes\"\n              data-src=\"./images/440x560-73.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-74.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-75.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-76.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-77.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-78.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-79.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-80.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-81.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Open toe\"\n              data-src=\"./images/440x560-82.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis\"\n              data-src=\"./images/440x560-83.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-84.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-85.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-86.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-87.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-88.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-89.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-90.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-91.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-92.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-93.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-94.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-95.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-96.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-97.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-98.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-99.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Francesine\"\n              data-src=\"./images/440x560-100.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-101.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-102.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-103.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-104.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-105.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-106.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-107.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-108.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-109.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-110.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-111.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-112.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Cuissardes\"\n              data-src=\"./images/440x560-113.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-114.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-115.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-116.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-117.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-118.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-119.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-120.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-121.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Open toe\"\n              data-src=\"./images/440x560-122.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis\"\n              data-src=\"./images/440x560-123.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-124.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-125.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-126.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-127.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-128.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-129.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-130.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-131.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-132.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-133.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-134.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-135.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-136.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-137.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-138.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-139.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Francesine\"\n              data-src=\"./images/440x560-140.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-141.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-142.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-143.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-144.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-145.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-146.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-147.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-148.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-149.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-150.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-151.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-152.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Cuissardes\"\n              data-src=\"./images/440x560-153.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-154.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-155.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-156.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-157.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-158.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-159.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-160.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-161.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Open toe\"\n              data-src=\"./images/440x560-162.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis\"\n              data-src=\"./images/440x560-163.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-164.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-165.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-166.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-167.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-168.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-169.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-170.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-171.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-172.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-173.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-174.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-175.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-176.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-177.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-178.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-179.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Francesine\"\n              data-src=\"./images/440x560-180.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-181.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-182.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-183.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-184.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-185.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-186.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-187.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-188.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-189.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-190.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-191.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-192.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Cuissardes\"\n              data-src=\"./images/440x560-193.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-194.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-195.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-196.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-197.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-198.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-199.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-200.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-201.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Open toe\"\n              data-src=\"./images/440x560-202.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis\"\n              data-src=\"./images/440x560-203.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-204.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-205.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-206.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-207.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-208.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-209.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-210.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-211.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-212.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-213.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-214.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-215.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-216.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-217.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-218.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-219.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Francesine\"\n              data-src=\"./images/440x560-220.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-221.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-222.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-223.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-224.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-225.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-226.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-227.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-228.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-229.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-230.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-231.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-232.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Cuissardes\"\n              data-src=\"./images/440x560-233.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-234.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-235.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-236.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-237.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-238.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-239.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-240.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-241.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Open toe\"\n              data-src=\"./images/440x560-242.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis\"\n              data-src=\"./images/440x560-243.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-244.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-245.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-246.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-247.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-248.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-249.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-250.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-251.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-252.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-253.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-254.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-255.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-256.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-257.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-258.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-259.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Francesine\"\n              data-src=\"./images/440x560-260.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-261.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-262.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-263.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-264.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-265.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-266.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-267.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-268.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-269.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-270.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-271.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-272.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Cuissardes\"\n              data-src=\"./images/440x560-273.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-274.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-275.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-276.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-277.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-278.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-279.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-280.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-281.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Open toe\"\n              data-src=\"./images/440x560-282.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis\"\n              data-src=\"./images/440x560-283.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-284.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-285.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-286.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-287.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-288.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-289.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-290.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-291.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-292.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-293.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-294.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-295.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-296.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-297.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-298.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-299.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Francesine\"\n              data-src=\"./images/440x560-300.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-301.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-302.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-303.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-304.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-305.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-306.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-307.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-308.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-309.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-310.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-311.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-312.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Cuissardes\"\n              data-src=\"./images/440x560-313.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-314.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-315.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-316.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-317.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-318.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-319.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-320.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n\n        var ll = new LazyLoad({\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/iframes/i01.html",
    "content": "<h1>iframe 01</h1>\n<p>Hello, I'm in iframe</p>\n<p>Lazily loaded</p>"
  },
  {
    "path": "demos/iframes/i02.html",
    "content": "<h1>iframe 02</h1>\n<p>Hello, I'm in iframe</p>\n<p>Lazily loaded</p>"
  },
  {
    "path": "demos/iframes/i03.html",
    "content": "<h1>iframe 03</h1>\n<p>Hello, I'm in iframe</p>\n<p>Lazily loaded</p>"
  },
  {
    "path": "demos/iframes.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Lazy iframes - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      iframe {\n        width: 600px;\n        height: 300px;\n        display: block;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Lazy iframes demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <p>Scroll down to see lazily loaded iframes</p>\n      <iframe class=\"lazy\" data-src=\"iframes/i01.html\" frameborder=\"0\"></iframe>\n      <iframe class=\"lazy\" data-src=\"iframes/i02.html\" frameborder=\"0\"></iframe>\n      <iframe class=\"lazy\" data-src=\"iframes/i03.html\" frameborder=\"0\"></iframe>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        ll = new LazyLoad({\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/image_basic.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Basic - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      /* Fixes Firefox anomaly during image load */\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Basic demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-04.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-06.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-08.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-09.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-10.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-11.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-12.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-13.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-14.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-15.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-16.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-17.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-18.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-19.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              alt=\"Francesine\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-20.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-21.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-22.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-23.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-24.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-25.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-26.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-27.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-28.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-29.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-30.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-31.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-32.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              alt=\"Cuissardes\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-33.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-34.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-35.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-36.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-37.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-38.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-39.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-40.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src = \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        var ll = new LazyLoad({\n          class_applied: \"lz-applied\",\n          class_loading: \"lz-loading\",\n          class_loaded: \"lz-loaded\",\n          class_error: \"lz-error\",\n          class_entered: \"lz-entered\",\n          class_exited: \"lz-exited\",\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/image_hidden.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Hidden images - Lazyload demos\n    </title>\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      .dnone {\n        display: none;\n      }\n\n      .vhidden {\n        visibility: hidden;\n      }\n\n      .o0 {\n        opacity: 0;\n      }\n\n      /* Fixes Firefox anomaly during image load */\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Hidden images demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <p>1. Visible and eagerly loaded</p>\n          <a href=\"#1\"\n            ><img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <p>2. Visible and eagerly loaded</p>\n          <a href=\"#2\"\n            ><img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <p>3. Visible and lazily loaded</p>\n          <a href=\"#3\"\n            ><img\n              alt=\"Sneakers &amp; Tennis\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <p>4. Hidden with <code>display: none</code> on the image</p>\n          <a href=\"#4\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy dnone\"\n              data-src=\"./images/440x560-04.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <p>5. Hidden with <code>display: none</code> on the link</p>\n          <a href=\"#5\" class=\"dnone\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <p>6. Hidden with <code>visibility: hidden</code> on the image</p>\n          <a href=\"#6\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy vhidden\"\n              data-src=\"./images/440x560-06.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <p>7. Hidden with <code>visibility: hidden</code> on the link</p>\n          <a href=\"#7\" class=\"vhidden\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <p>8. Hidden with <code>opacity: 0</code> on the image</p>\n          <a href=\"#8\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy o0\"\n              data-src=\"./images/440x560-08.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <p>9. Hidden with <code>opacity: 0</code> on the link</p>\n          <a href=\"#9\" class=\"o0\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-09.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <p>10. Visible and lazily loaded, again</p>\n          <a href=\"#10\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-10.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        window.LL = new LazyLoad({\n          threshold: 0,\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/image_no_classes.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Basic - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      /* Fixes Firefox anomaly during image load */\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Basic demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-04.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-06.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-08.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-09.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-10.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-11.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-12.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-13.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-14.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-15.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-16.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-17.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-18.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-19.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              alt=\"Francesine\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-20.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-21.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-22.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-23.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-24.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-25.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-26.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-27.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-28.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-29.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-30.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-31.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-32.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              alt=\"Cuissardes\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-33.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-34.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-35.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-36.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-37.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-38.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-39.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-40.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src = \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        var ll = new LazyLoad({\n          class_applied: \"\",\n          class_loading: \"\",\n          class_loaded: \"\",\n          class_error: \"lz-error\",\n          class_entered: \"\",\n          class_exited: \"\",\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/image_ph_external.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Images with external placeholder - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n        width: 220px;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 100%;\n        height: auto;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      /* Fixes Firefox anomaly during image load */\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Images with external placeholder demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-04.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-06.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-08.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-09.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-10.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-11.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-12.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-13.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-14.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-15.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-16.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-17.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-18.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-19.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              alt=\"Francesine\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-20.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-21.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-22.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-23.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-24.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-25.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-26.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-27.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-28.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-29.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-30.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-31.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-32.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              alt=\"Cuissardes\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-33.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-34.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-35.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-36.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-37.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-38.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-39.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"./placeholders/11-14.svg\"\n              data-src=\"./images/440x560-40.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        var ll = new LazyLoad({\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/image_ph_inline.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Images with inline placeholder - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n        width: 220px;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 100%;\n        height: auto;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      /* Fixes Firefox anomaly during image load */\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Images with inline placeholder demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-04.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-06.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-08.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-09.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-10.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-11.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-12.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-13.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-14.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-15.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-16.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-17.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-18.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-19.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              alt=\"Francesine\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-20.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-21.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-22.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-23.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-24.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-25.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-26.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-27.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-28.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-29.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-30.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-31.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-32.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              alt=\"Cuissardes\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-33.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-34.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-35.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-36.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-37.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-38.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-39.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3C/svg%3E\"\n              data-src=\"./images/440x560-40.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        var ll = new LazyLoad({\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/image_srcset.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Images with srcset without sizes - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      li {\n        min-height: 280px;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]):not([srcset]) {\n        visibility: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <h1>Images with srcset without sizes demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\">\n            <img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              srcset=\"\n                ./images/220x280-01.webp 1x,\n                ./images/440x560-01.webp 2x\n              \"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\">\n            <img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              srcset=\"\n                ./images/220x280-02.webp 1x,\n                ./images/440x560-02.webp 2x\n              \"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-03.webp\"\n              data-srcset=\"./images/220x280-03.webp 1x, ./images/440x560-03.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-04.webp\"\n              data-srcset=\"./images/220x280-04.webp 1x, ./images/440x560-04.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-05.webp\"\n              data-srcset=\"./images/220x280-05.webp 1x, ./images/440x560-05.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-06.webp\"\n              data-srcset=\"./images/220x280-06.webp 1x, ./images/440x560-06.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-07.webp\"\n              data-srcset=\"./images/220x280-07.webp 1x, ./images/440x560-07.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-08.webp\"\n              data-srcset=\"./images/220x280-08.webp 1x, ./images/440x560-08.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\">\n            <img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-09.webp\"\n              data-srcset=\"./images/220x280-09.webp 1x, ./images/440x560-09.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\">\n            <img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-10.webp\"\n              data-srcset=\"./images/220x280-10.webp 1x, ./images/440x560-10.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-11.webp\"\n              data-srcset=\"./images/220x280-11.webp 1x, ./images/440x560-11.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-12.webp\"\n              data-srcset=\"./images/220x280-12.webp 1x, ./images/440x560-12.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\">\n            <img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-13.webp\"\n              data-srcset=\"./images/220x280-13.webp 1x, ./images/440x560-13.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-14.webp\"\n              data-srcset=\"./images/220x280-14.webp 1x, ./images/440x560-14.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-15.webp\"\n              data-srcset=\"./images/220x280-15.webp 1x, ./images/440x560-15.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-16.webp\"\n              data-srcset=\"./images/220x280-16.webp 1x, ./images/440x560-16.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-17.webp\"\n              data-srcset=\"./images/220x280-17.webp 1x, ./images/440x560-17.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-18.webp\"\n              data-srcset=\"./images/220x280-18.webp 1x, ./images/440x560-18.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-19.webp\"\n              data-srcset=\"./images/220x280-19.webp 1x, ./images/440x560-19.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\">\n            <img\n              alt=\"Francesine\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-20.webp\"\n              data-srcset=\"./images/220x280-20.webp 1x, ./images/440x560-20.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-21.webp\"\n              data-srcset=\"./images/220x280-21.webp 1x, ./images/440x560-21.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-22.webp\"\n              data-srcset=\"./images/220x280-22.webp 1x, ./images/440x560-22.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-23.webp\"\n              data-srcset=\"./images/220x280-23.webp 1x, ./images/440x560-23.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-24.webp\"\n              data-srcset=\"./images/220x280-24.webp 1x, ./images/440x560-24.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\">\n            <img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-25.webp\"\n              data-srcset=\"./images/220x280-25.webp 1x, ./images/440x560-25.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-26.webp\"\n              data-srcset=\"./images/220x280-26.webp 1x, ./images/440x560-26.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-27.webp\"\n              data-srcset=\"./images/220x280-27.webp 1x, ./images/440x560-27.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-28.webp\"\n              data-srcset=\"./images/220x280-28.webp 1x, ./images/440x560-28.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-29.webp\"\n              data-srcset=\"./images/220x280-29.webp 1x, ./images/440x560-29.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-30.webp\"\n              data-srcset=\"./images/220x280-30.webp 1x, ./images/440x560-30.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-31.webp\"\n              data-srcset=\"./images/220x280-31.webp 1x, ./images/440x560-31.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-32.webp\"\n              data-srcset=\"./images/220x280-32.webp 1x, ./images/440x560-32.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\">\n            <img\n              alt=\"Cuissardes\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-33.webp\"\n              data-srcset=\"./images/220x280-33.webp 1x, ./images/440x560-33.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-34.webp\"\n              data-srcset=\"./images/220x280-34.webp 1x, ./images/440x560-34.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-35.webp\"\n              data-srcset=\"./images/220x280-35.webp 1x, ./images/440x560-35.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-36.webp\"\n              data-srcset=\"./images/220x280-36.webp 1x, ./images/440x560-36.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-37.webp\"\n              data-srcset=\"./images/220x280-37.webp 1x, ./images/440x560-37.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-38.webp\"\n              data-srcset=\"./images/220x280-38.webp 1x, ./images/440x560-38.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-39.webp\"\n              data-srcset=\"./images/220x280-39.webp 1x, ./images/440x560-39.webp 2x\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-40.webp\"\n              data-srcset=\"./images/220x280-40.webp 1x, ./images/440x560-40.webp 2x\"\n            />\n          </a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        ll = new LazyLoad({\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/image_srcset_lazy_sizes.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Images with srcset and lazy sizes - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      li {\n        min-height: 280px;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]):not([srcset]) {\n        visibility: hidden;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Images with srcset and lazy sizes demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\">\n            <img\n              alt=\"Stivaletti\"\n              src=\"./images/220x280-01.webp\"\n              srcset=\"\n                ./images/220x280-01.webp 220w,\n                ./images/440x560-01.webp 440w\n              \"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\">\n            <img\n              alt=\"Open toe\"\n              src=\"./images/220x280-02.webp\"\n              srcset=\"\n                ./images/220x280-02.webp 220w,\n                ./images/440x560-02.webp 440w\n              \"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-03.webp\"\n              data-srcset=\"./images/220x280-03.webp 220w, ./images/440x560-03.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-04.webp\"\n              data-srcset=\"./images/220x280-04.webp 220w, ./images/440x560-04.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-05.webp\"\n              data-srcset=\"./images/220x280-05.webp 220w, ./images/440x560-05.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-06.webp\"\n              data-srcset=\"./images/220x280-06.webp 220w, ./images/440x560-06.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-07.webp\"\n              data-srcset=\"./images/220x280-07.webp 220w, ./images/440x560-07.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-08.webp\"\n              data-srcset=\"./images/220x280-08.webp 220w, ./images/440x560-08.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\">\n            <img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-09.webp\"\n              data-srcset=\"./images/220x280-09.webp 220w, ./images/440x560-09.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\">\n            <img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-10.webp\"\n              data-srcset=\"./images/220x280-10.webp 220w, ./images/440x560-10.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-11.webp\"\n              data-srcset=\"./images/220x280-11.webp 220w, ./images/440x560-11.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-12.webp\"\n              data-srcset=\"./images/220x280-12.webp 220w, ./images/440x560-12.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\">\n            <img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-13.webp\"\n              data-srcset=\"./images/220x280-13.webp 220w, ./images/440x560-13.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-14.webp\"\n              data-srcset=\"./images/220x280-14.webp 220w, ./images/440x560-14.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-15.webp\"\n              data-srcset=\"./images/220x280-15.webp 220w, ./images/440x560-15.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-16.webp\"\n              data-srcset=\"./images/220x280-16.webp 220w, ./images/440x560-16.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-17.webp\"\n              data-srcset=\"./images/220x280-17.webp 220w, ./images/440x560-17.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-18.webp\"\n              data-srcset=\"./images/220x280-18.webp 220w, ./images/440x560-18.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-19.webp\"\n              data-srcset=\"./images/220x280-19.webp 220w, ./images/440x560-19.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\">\n            <img\n              alt=\"Francesine\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-20.webp\"\n              data-srcset=\"./images/220x280-20.webp 220w, ./images/440x560-20.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-21.webp\"\n              data-srcset=\"./images/220x280-21.webp 220w, ./images/440x560-21.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-22.webp\"\n              data-srcset=\"./images/220x280-22.webp 220w, ./images/440x560-22.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-23.webp\"\n              data-srcset=\"./images/220x280-23.webp 220w, ./images/440x560-23.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-24.webp\"\n              data-srcset=\"./images/220x280-24.webp 220w, ./images/440x560-24.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\">\n            <img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-25.webp\"\n              data-srcset=\"./images/220x280-25.webp 220w, ./images/440x560-25.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-26.webp\"\n              data-srcset=\"./images/220x280-26.webp 220w, ./images/440x560-26.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-27.webp\"\n              data-srcset=\"./images/220x280-27.webp 220w, ./images/440x560-27.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-28.webp\"\n              data-srcset=\"./images/220x280-28.webp 220w, ./images/440x560-28.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-29.webp\"\n              data-srcset=\"./images/220x280-29.webp 220w, ./images/440x560-29.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-30.webp\"\n              data-srcset=\"./images/220x280-30.webp 220w, ./images/440x560-30.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-31.webp\"\n              data-srcset=\"./images/220x280-31.webp 220w, ./images/440x560-31.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-32.webp\"\n              data-srcset=\"./images/220x280-32.webp 220w, ./images/440x560-32.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\">\n            <img\n              alt=\"Cuissardes\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-33.webp\"\n              data-srcset=\"./images/220x280-33.webp 220w, ./images/440x560-33.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-34.webp\"\n              data-srcset=\"./images/220x280-34.webp 220w, ./images/440x560-34.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-35.webp\"\n              data-srcset=\"./images/220x280-35.webp 220w, ./images/440x560-35.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-36.webp\"\n              data-srcset=\"./images/220x280-36.webp 220w, ./images/440x560-36.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-37.webp\"\n              data-srcset=\"./images/220x280-37.webp 220w, ./images/440x560-37.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-38.webp\"\n              data-srcset=\"./images/220x280-38.webp 220w, ./images/440x560-38.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-39.webp\"\n              data-srcset=\"./images/220x280-39.webp 220w, ./images/440x560-39.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/220x280-40.webp\"\n              data-srcset=\"./images/220x280-40.webp 220w, ./images/440x560-40.webp 440w\"\n              data-sizes=\"220px\"\n            />\n          </a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        ll = new LazyLoad({\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/image_srcset_sizes.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Images with srcset and eager sizes - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      li {\n        min-height: 280px;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]):not([srcset]) {\n        visibility: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <h1>Images with srcset and eager sizes demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\">\n            <img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              srcset=\"\n                ./images/220x280-01.webp 220w,\n                ./images/440x560-01.webp 440w\n              \"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\">\n            <img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              srcset=\"\n                ./images/220x280-02.webp 220w,\n                ./images/440x560-02.webp 440w\n              \"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-03.webp\"\n              data-srcset=\"./images/220x280-03.webp 220w, ./images/440x560-03.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-04.webp\"\n              data-srcset=\"./images/220x280-04.webp 220w, ./images/440x560-04.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-05.webp\"\n              data-srcset=\"./images/220x280-05.webp 220w, ./images/440x560-05.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-06.webp\"\n              data-srcset=\"./images/220x280-06.webp 220w, ./images/440x560-06.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-07.webp\"\n              data-srcset=\"./images/220x280-07.webp 220w, ./images/440x560-07.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-08.webp\"\n              data-srcset=\"./images/220x280-08.webp 220w, ./images/440x560-08.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\">\n            <img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-09.webp\"\n              data-srcset=\"./images/220x280-09.webp 220w, ./images/440x560-09.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\">\n            <img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-10.webp\"\n              data-srcset=\"./images/220x280-10.webp 220w, ./images/440x560-10.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-11.webp\"\n              data-srcset=\"./images/220x280-11.webp 220w, ./images/440x560-11.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-12.webp\"\n              data-srcset=\"./images/220x280-12.webp 220w, ./images/440x560-12.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\">\n            <img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-13.webp\"\n              data-srcset=\"./images/220x280-13.webp 220w, ./images/440x560-13.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-14.webp\"\n              data-srcset=\"./images/220x280-14.webp 220w, ./images/440x560-14.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-15.webp\"\n              data-srcset=\"./images/220x280-15.webp 220w, ./images/440x560-15.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-16.webp\"\n              data-srcset=\"./images/220x280-16.webp 220w, ./images/440x560-16.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-17.webp\"\n              data-srcset=\"./images/220x280-17.webp 220w, ./images/440x560-17.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-18.webp\"\n              data-srcset=\"./images/220x280-18.webp 220w, ./images/440x560-18.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-19.webp\"\n              data-srcset=\"./images/220x280-19.webp 220w, ./images/440x560-19.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\">\n            <img\n              alt=\"Francesine\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-20.webp\"\n              data-srcset=\"./images/220x280-20.webp 220w, ./images/440x560-20.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-21.webp\"\n              data-srcset=\"./images/220x280-21.webp 220w, ./images/440x560-21.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-22.webp\"\n              data-srcset=\"./images/220x280-22.webp 220w, ./images/440x560-22.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-23.webp\"\n              data-srcset=\"./images/220x280-23.webp 220w, ./images/440x560-23.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-24.webp\"\n              data-srcset=\"./images/220x280-24.webp 220w, ./images/440x560-24.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\">\n            <img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-25.webp\"\n              data-srcset=\"./images/220x280-25.webp 220w, ./images/440x560-25.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-26.webp\"\n              data-srcset=\"./images/220x280-26.webp 220w, ./images/440x560-26.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-27.webp\"\n              data-srcset=\"./images/220x280-27.webp 220w, ./images/440x560-27.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-28.webp\"\n              data-srcset=\"./images/220x280-28.webp 220w, ./images/440x560-28.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-29.webp\"\n              data-srcset=\"./images/220x280-29.webp 220w, ./images/440x560-29.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-30.webp\"\n              data-srcset=\"./images/220x280-30.webp 220w, ./images/440x560-30.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-31.webp\"\n              data-srcset=\"./images/220x280-31.webp 220w, ./images/440x560-31.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-32.webp\"\n              data-srcset=\"./images/220x280-32.webp 220w, ./images/440x560-32.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\">\n            <img\n              alt=\"Cuissardes\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-33.webp\"\n              data-srcset=\"./images/220x280-33.webp 220w, ./images/440x560-33.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-34.webp\"\n              data-srcset=\"./images/220x280-34.webp 220w, ./images/440x560-34.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-35.webp\"\n              data-srcset=\"./images/220x280-35.webp 220w, ./images/440x560-35.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-36.webp\"\n              data-srcset=\"./images/220x280-36.webp 220w, ./images/440x560-36.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-37.webp\"\n              data-srcset=\"./images/220x280-37.webp 220w, ./images/440x560-37.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-38.webp\"\n              data-srcset=\"./images/220x280-38.webp 220w, ./images/440x560-38.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-39.webp\"\n              data-srcset=\"./images/220x280-39.webp 220w, ./images/440x560-39.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-40.webp\"\n              data-srcset=\"./images/220x280-40.webp 220w, ./images/440x560-40.webp 440w\"\n              sizes=\"220px\"\n            />\n          </a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        ll = new LazyLoad({\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/lazily_load_lazyLoad.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Lazyly load lazyload - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      html {\n        box-sizing: border-box;\n      }\n\n      *,\n      *:before,\n      *:after {\n        box-sizing: inherit;\n      }\n\n      .horizContainer {\n        max-width: 100%;\n        overflow: auto;\n        display: flex;\n      }\n\n      .item {\n        min-width: 220px;\n      }\n\n      .item > img {\n        width: 220px;\n        height: 280px;\n      }\n\n      figure {\n        margin: 10px;\n      }\n\n      img {\n        display: block;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <h1>Lazyly load lazyload demo</h1>\n    <div class=\"horizContainer\">\n      <figure class=\"item\">\n        <img\n          alt=\"Row 01, col 01\"\n          src=\"./images/440x560-01.webp\"\n        />\n        <figcaption>Lorem ipsum 01</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 01, col 02\"\n          src=\"./images/440x560-02.webp\"\n        />\n        <figcaption>Lorem ipsum 02</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 01, col 03\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-03.webp\"\n        />\n        <figcaption>Lorem ipsum 03</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 01, col 04\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-04.webp\"\n        />\n        <figcaption>Lorem ipsum 04</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 01, col 05\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-05.webp\"\n        />\n        <figcaption>Lorem ipsum 05</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 01, col 06\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-06.webp\"\n        />\n        <figcaption>Lorem ipsum 06</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 01, col 07\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-07.webp\"\n        />\n        <figcaption>Lorem ipsum 07</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 01, col 08\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-08.webp\"\n        />\n        <figcaption>Lorem ipsum 08</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 01, col 09\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-09.webp\"\n        />\n        <figcaption>Lorem ipsum 09</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 01, col 10\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-10.webp\"\n        />\n        <figcaption>Lorem ipsum 10</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 01, col 11\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-11.webp\"\n        />\n        <figcaption>Lorem ipsum 11</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 01, col 12\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-12.webp\"\n        />\n        <figcaption>Lorem ipsum 12</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 01, col 13\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-13.webp\"\n        />\n        <figcaption>Lorem ipsum 13</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 01, col 14\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-14.webp\"\n        />\n        <figcaption>Lorem ipsum 14</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 01, col 15\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-15.webp\"\n        />\n        <figcaption>Lorem ipsum 15</figcaption>\n      </figure>\n    </div>\n    <div class=\"horizContainer\">\n      <figure class=\"item\">\n        <img\n          alt=\"Row 02, col 01\"\n          src=\"./images/440x560-01.webp\"\n        />\n        <figcaption>Lorem ipsum 01</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 02, col 02\"\n          src=\"./images/440x560-02.webp\"\n        />\n        <figcaption>Lorem ipsum 02</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 02, col 03\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-03.webp\"\n        />\n        <figcaption>Lorem ipsum 03</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 02, col 04\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-04.webp\"\n        />\n        <figcaption>Lorem ipsum 04</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 02, col 05\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-05.webp\"\n        />\n        <figcaption>Lorem ipsum 05</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 02, col 06\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-06.webp\"\n        />\n        <figcaption>Lorem ipsum 06</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 02, col 07\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-07.webp\"\n        />\n        <figcaption>Lorem ipsum 07</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 02, col 08\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-08.webp\"\n        />\n        <figcaption>Lorem ipsum 08</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 02, col 09\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-09.webp\"\n        />\n        <figcaption>Lorem ipsum 09</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 02, col 10\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-10.webp\"\n        />\n        <figcaption>Lorem ipsum 10</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 02, col 11\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-11.webp\"\n        />\n        <figcaption>Lorem ipsum 11</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 02, col 12\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-12.webp\"\n        />\n        <figcaption>Lorem ipsum 12</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 02, col 13\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-13.webp\"\n        />\n        <figcaption>Lorem ipsum 13</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 02, col 14\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-14.webp\"\n        />\n        <figcaption>Lorem ipsum 14</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 02, col 15\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-15.webp\"\n        />\n        <figcaption>Lorem ipsum 15</figcaption>\n      </figure>\n    </div>\n    <div class=\"horizContainer\">\n      <figure class=\"item\">\n        <img\n          alt=\"Row 03, col 01\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-01.webp\"\n        />\n        <figcaption>Lorem ipsum 01</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 03, col 02\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-02.webp\"\n        />\n        <figcaption>Lorem ipsum 02</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 03, col 03\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-03.webp\"\n        />\n        <figcaption>Lorem ipsum 03</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 03, col 04\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-04.webp\"\n        />\n        <figcaption>Lorem ipsum 04</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 03, col 05\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-05.webp\"\n        />\n        <figcaption>Lorem ipsum 05</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 03, col 06\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-06.webp\"\n        />\n        <figcaption>Lorem ipsum 06</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 03, col 07\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-07.webp\"\n        />\n        <figcaption>Lorem ipsum 07</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 03, col 08\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-08.webp\"\n        />\n        <figcaption>Lorem ipsum 08</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 03, col 09\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-09.webp\"\n        />\n        <figcaption>Lorem ipsum 09</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 03, col 10\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-10.webp\"\n        />\n        <figcaption>Lorem ipsum 10</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 03, col 11\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-11.webp\"\n        />\n        <figcaption>Lorem ipsum 11</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 03, col 12\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-12.webp\"\n        />\n        <figcaption>Lorem ipsum 12</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 03, col 13\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-13.webp\"\n        />\n        <figcaption>Lorem ipsum 13</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 03, col 14\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-14.webp\"\n        />\n        <figcaption>Lorem ipsum 14</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 03, col 15\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-15.webp\"\n        />\n        <figcaption>Lorem ipsum 15</figcaption>\n      </figure>\n    </div>\n    <div class=\"horizContainer\">\n      <figure class=\"item\">\n        <img\n          alt=\"Row 04, col 01\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-01.webp\"\n        />\n        <figcaption>Lorem ipsum 01</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 04, col 02\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-02.webp\"\n        />\n        <figcaption>Lorem ipsum 02</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 04, col 03\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-03.webp\"\n        />\n        <figcaption>Lorem ipsum 03</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 04, col 04\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-04.webp\"\n        />\n        <figcaption>Lorem ipsum 04</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 04, col 05\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-05.webp\"\n        />\n        <figcaption>Lorem ipsum 05</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 04, col 06\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-06.webp\"\n        />\n        <figcaption>Lorem ipsum 06</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 04, col 07\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-07.webp\"\n        />\n        <figcaption>Lorem ipsum 07</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 04, col 08\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-08.webp\"\n        />\n        <figcaption>Lorem ipsum 08</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 04, col 09\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-09.webp\"\n        />\n        <figcaption>Lorem ipsum 09</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 04, col 10\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-10.webp\"\n        />\n        <figcaption>Lorem ipsum 10</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 04, col 11\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-11.webp\"\n        />\n        <figcaption>Lorem ipsum 11</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 04, col 12\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-12.webp\"\n        />\n        <figcaption>Lorem ipsum 12</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 04, col 13\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-13.webp\"\n        />\n        <figcaption>Lorem ipsum 13</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 04, col 14\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-14.webp\"\n        />\n        <figcaption>Lorem ipsum 14</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 04, col 15\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-15.webp\"\n        />\n        <figcaption>Lorem ipsum 15</figcaption>\n      </figure>\n    </div>\n    <div class=\"horizContainer\">\n      <figure class=\"item\">\n        <img\n          alt=\"Row 05, col 01\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-01.webp\"\n        />\n        <figcaption>Lorem ipsum 01</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 05, col 02\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-02.webp\"\n        />\n        <figcaption>Lorem ipsum 02</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 05, col 03\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-03.webp\"\n        />\n        <figcaption>Lorem ipsum 03</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 05, col 04\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-04.webp\"\n        />\n        <figcaption>Lorem ipsum 04</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 05, col 05\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-05.webp\"\n        />\n        <figcaption>Lorem ipsum 05</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 05, col 06\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-06.webp\"\n        />\n        <figcaption>Lorem ipsum 06</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 05, col 07\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-07.webp\"\n        />\n        <figcaption>Lorem ipsum 07</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 05, col 08\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-08.webp\"\n        />\n        <figcaption>Lorem ipsum 08</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 05, col 09\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-09.webp\"\n        />\n        <figcaption>Lorem ipsum 09</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 05, col 10\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-10.webp\"\n        />\n        <figcaption>Lorem ipsum 10</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 05, col 11\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-11.webp\"\n        />\n        <figcaption>Lorem ipsum 11</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 05, col 12\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-12.webp\"\n        />\n        <figcaption>Lorem ipsum 12</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 05, col 13\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-13.webp\"\n        />\n        <figcaption>Lorem ipsum 13</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 05, col 14\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-14.webp\"\n        />\n        <figcaption>Lorem ipsum 14</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 05, col 15\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-15.webp\"\n        />\n        <figcaption>Lorem ipsum 15</figcaption>\n      </figure>\n    </div>\n    <div class=\"horizContainer\">\n      <figure class=\"item\">\n        <img\n          alt=\"Row 06, col 01\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-01.webp\"\n        />\n        <figcaption>Lorem ipsum 01</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 06, col 02\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-02.webp\"\n        />\n        <figcaption>Lorem ipsum 02</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 06, col 03\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-03.webp\"\n        />\n        <figcaption>Lorem ipsum 03</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 06, col 04\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-04.webp\"\n        />\n        <figcaption>Lorem ipsum 04</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 06, col 05\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-05.webp\"\n        />\n        <figcaption>Lorem ipsum 05</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 06, col 06\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-06.webp\"\n        />\n        <figcaption>Lorem ipsum 06</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 06, col 07\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-07.webp\"\n        />\n        <figcaption>Lorem ipsum 07</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 06, col 08\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-08.webp\"\n        />\n        <figcaption>Lorem ipsum 08</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 06, col 09\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-09.webp\"\n        />\n        <figcaption>Lorem ipsum 09</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 06, col 10\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-10.webp\"\n        />\n        <figcaption>Lorem ipsum 10</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 06, col 11\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-11.webp\"\n        />\n        <figcaption>Lorem ipsum 11</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 06, col 12\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-12.webp\"\n        />\n        <figcaption>Lorem ipsum 12</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 06, col 13\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-13.webp\"\n        />\n        <figcaption>Lorem ipsum 13</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 06, col 14\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-14.webp\"\n        />\n        <figcaption>Lorem ipsum 14</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 06, col 15\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-15.webp\"\n        />\n        <figcaption>Lorem ipsum 15</figcaption>\n      </figure>\n    </div>\n    <div class=\"horizContainer\">\n      <figure class=\"item\">\n        <img\n          alt=\"Row 07, col 01\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-01.webp\"\n        />\n        <figcaption>Lorem ipsum 01</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 07, col 02\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-02.webp\"\n        />\n        <figcaption>Lorem ipsum 02</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 07, col 03\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-03.webp\"\n        />\n        <figcaption>Lorem ipsum 03</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 07, col 04\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-04.webp\"\n        />\n        <figcaption>Lorem ipsum 04</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 07, col 05\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-05.webp\"\n        />\n        <figcaption>Lorem ipsum 05</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 07, col 06\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-06.webp\"\n        />\n        <figcaption>Lorem ipsum 06</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 07, col 07\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-07.webp\"\n        />\n        <figcaption>Lorem ipsum 07</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 07, col 08\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-08.webp\"\n        />\n        <figcaption>Lorem ipsum 08</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 07, col 09\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-09.webp\"\n        />\n        <figcaption>Lorem ipsum 09</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 07, col 10\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-10.webp\"\n        />\n        <figcaption>Lorem ipsum 10</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 07, col 11\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-11.webp\"\n        />\n        <figcaption>Lorem ipsum 11</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 07, col 12\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-12.webp\"\n        />\n        <figcaption>Lorem ipsum 12</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 07, col 13\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-13.webp\"\n        />\n        <figcaption>Lorem ipsum 13</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 07, col 14\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-14.webp\"\n        />\n        <figcaption>Lorem ipsum 14</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 07, col 15\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-15.webp\"\n        />\n        <figcaption>Lorem ipsum 15</figcaption>\n      </figure>\n    </div>\n    <div class=\"horizContainer\">\n      <figure class=\"item\">\n        <img\n          alt=\"Row 08, col 01\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-01.webp\"\n        />\n        <figcaption>Lorem ipsum 01</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 08, col 02\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-02.webp\"\n        />\n        <figcaption>Lorem ipsum 02</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 08, col 03\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-03.webp\"\n        />\n        <figcaption>Lorem ipsum 03</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 08, col 04\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-04.webp\"\n        />\n        <figcaption>Lorem ipsum 04</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 08, col 05\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-05.webp\"\n        />\n        <figcaption>Lorem ipsum 05</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 08, col 06\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-06.webp\"\n        />\n        <figcaption>Lorem ipsum 06</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 08, col 07\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-07.webp\"\n        />\n        <figcaption>Lorem ipsum 07</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 08, col 08\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-08.webp\"\n        />\n        <figcaption>Lorem ipsum 08</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 08, col 09\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-09.webp\"\n        />\n        <figcaption>Lorem ipsum 09</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 08, col 10\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-10.webp\"\n        />\n        <figcaption>Lorem ipsum 10</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 08, col 11\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-11.webp\"\n        />\n        <figcaption>Lorem ipsum 11</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 08, col 12\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-12.webp\"\n        />\n        <figcaption>Lorem ipsum 12</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 08, col 13\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-13.webp\"\n        />\n        <figcaption>Lorem ipsum 13</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 08, col 14\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-14.webp\"\n        />\n        <figcaption>Lorem ipsum 14</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 08, col 15\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-15.webp\"\n        />\n        <figcaption>Lorem ipsum 15</figcaption>\n      </figure>\n    </div>\n    <div class=\"horizContainer\">\n      <figure class=\"item\">\n        <img\n          alt=\"Row 09, col 01\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-01.webp\"\n        />\n        <figcaption>Lorem ipsum 01</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 09, col 02\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-02.webp\"\n        />\n        <figcaption>Lorem ipsum 02</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 09, col 03\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-03.webp\"\n        />\n        <figcaption>Lorem ipsum 03</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 09, col 04\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-04.webp\"\n        />\n        <figcaption>Lorem ipsum 04</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 09, col 05\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-05.webp\"\n        />\n        <figcaption>Lorem ipsum 05</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 09, col 06\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-06.webp\"\n        />\n        <figcaption>Lorem ipsum 06</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 09, col 07\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-07.webp\"\n        />\n        <figcaption>Lorem ipsum 07</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 09, col 08\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-08.webp\"\n        />\n        <figcaption>Lorem ipsum 08</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 09, col 09\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-09.webp\"\n        />\n        <figcaption>Lorem ipsum 09</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 09, col 10\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-10.webp\"\n        />\n        <figcaption>Lorem ipsum 10</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 09, col 11\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-11.webp\"\n        />\n        <figcaption>Lorem ipsum 11</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 09, col 12\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-12.webp\"\n        />\n        <figcaption>Lorem ipsum 12</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 09, col 13\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-13.webp\"\n        />\n        <figcaption>Lorem ipsum 13</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 09, col 14\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-14.webp\"\n        />\n        <figcaption>Lorem ipsum 14</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 09, col 15\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-15.webp\"\n        />\n        <figcaption>Lorem ipsum 15</figcaption>\n      </figure>\n    </div>\n    <div class=\"horizContainer\">\n      <figure class=\"item\">\n        <img\n          alt=\"Row 10, col 01\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-01.webp\"\n        />\n        <figcaption>Lorem ipsum 01</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 10, col 02\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-02.webp\"\n        />\n        <figcaption>Lorem ipsum 02</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 10, col 03\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-03.webp\"\n        />\n        <figcaption>Lorem ipsum 03</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 10, col 04\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-04.webp\"\n        />\n        <figcaption>Lorem ipsum 04</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 10, col 05\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-05.webp\"\n        />\n        <figcaption>Lorem ipsum 05</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 10, col 06\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-06.webp\"\n        />\n        <figcaption>Lorem ipsum 06</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 10, col 07\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-07.webp\"\n        />\n        <figcaption>Lorem ipsum 07</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 10, col 08\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-08.webp\"\n        />\n        <figcaption>Lorem ipsum 08</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 10, col 10\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-10.webp\"\n        />\n        <figcaption>Lorem ipsum 09</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 10, col 10\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-10.webp\"\n        />\n        <figcaption>Lorem ipsum 10</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 10, col 11\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-11.webp\"\n        />\n        <figcaption>Lorem ipsum 11</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 10, col 12\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-12.webp\"\n        />\n        <figcaption>Lorem ipsum 12</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 10, col 13\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-13.webp\"\n        />\n        <figcaption>Lorem ipsum 13</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 10, col 14\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-14.webp\"\n        />\n        <figcaption>Lorem ipsum 14</figcaption>\n      </figure>\n      <figure class=\"item\">\n        <img\n          alt=\"Row 10, col 15\"\n          class=\"lazy\"\n          data-src=\"./images/440x560-15.webp\"\n        />\n        <figcaption>Lorem ipsum 15</figcaption>\n      </figure>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        var lazyLoadInstances = [];\n\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          // Instantiate a new LazyLoad on the element that entered\n          var oneLL = new LazyLoad({\n            container: element\n          });\n          // Optionally push it in the lazyLoadInstances\n          // array to keep track of the instances\n          lazyLoadInstances.push(oneLL);\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        // The \"lazyLazy\" instance of lazyload is used\n        // to check when the .horizContainer divs enter the viewport\n        var lazyLazy = new LazyLoad({\n          elements_selector: \".horizContainer\",\n          unobserve_entered: true, // <- To avoid executing the script multiple times\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/lazy_functions.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Lazy functions - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      .boo {\n        font-size: 160px;\n      }\n\n      /* Fixes Firefox anomaly during image load */\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Lazy functions demo</h1>\n    <p>\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quisquam\n      laboriosam soluta veniam! Beatae tempora dicta voluptate consequuntur,\n      nesciunt sequi alias quidem blanditiis obcaecati praesentium aut sint\n      nobis aliquid ullam!\n    </p>\n    <p>\n      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum cum unde\n      aliquid ad quidem hic temporibus obcaecati quas sunt! Eius nisi ex ipsa\n      suscipit aliquid velit sequi exercitationem itaque fuga!\n    </p>\n    <p>\n      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio, quo,\n      aliquid adipisci rerum, in quas ratione cupiditate sapiente iure aliquam\n      molestiae provident maiores qui odit. Aut placeat deserunt libero quod?\n    </p>\n    <p>\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum deleniti\n      dolorem hic autem at rem error non quos pariatur fugit. Distinctio est\n      accusamus exercitationem nesciunt. Molestias blanditiis temporibus\n      asperiores impedit!\n    </p>\n    <p>\n      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti, aut\n      ea. Perferendis facere tempore nemo eos illo consequatur! Ad quibusdam\n      quis porro ipsam praesentium tenetur totam? Eum exercitationem laudantium\n      praesentium!\n    </p>\n    <p>\n      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum, alias\n      omnis eveniet maxime rem nulla sed modi et, fugit eius ut praesentium\n      exercitationem incidunt accusamus excepturi a laudantium fugiat id.\n    </p>\n    <p>\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, fuga\n      dignissimos. Nihil provident est quasi harum id sint enim officiis maxime\n      facere incidunt quibusdam ab, magni iusto veritatis doloremque expedita.\n    </p>\n    <p>\n      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum\n      numquam ipsam harum voluptates? Excepturi laboriosam quasi saepe. Quia\n      officiis odit minus cumque, corporis, incidunt harum quod fuga placeat\n      optio deserunt?\n    </p>\n    <p>\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto\n      exercitationem, dolorum quibusdam nihil nisi vitae veritatis recusandae\n      nostrum cum enim iste unde fugiat esse voluptatum, voluptatem magnam,\n      repudiandae veniam. Doloribus.\n    </p>\n    <p>\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat similique\n      necessitatibus minima atque sed debitis, sunt quasi esse consequatur qui,\n      facilis temporibus voluptate eaque labore. Distinctio et accusantium\n      doloremque officia.\n    </p>\n    <div class=\"lazy\" data-lazy-function=\"foo\">Script execution here</div>\n    <p>\n      Cumque explicabo iusto voluptates nostrum dolor tempore et sequi\n      doloremque aspernatur id cum soluta rerum debitis mollitia numquam,\n      officiis molestias optio? Placeat tempora porro odit expedita a ipsam\n      provident atque!\n    </p>\n    <p>\n      Id, alias reiciendis animi incidunt quibusdam beatae neque ipsum illum\n      inventore commodi, sunt similique labore at hic tempora. Sed est\n      necessitatibus ea! Repellendus, nemo fugit pariatur soluta omnis modi\n      explicabo!\n    </p>\n    <p>\n      Quas quia illo harum qui distinctio earum ullam. Est incidunt temporibus,\n      repellendus rem fugiat dolor sit inventore! Soluta illum, minus totam\n      autem fugiat recusandae eveniet sed ipsam officia ullam modi.\n    </p>\n    <p>\n      Minima eveniet quisquam quaerat natus nam voluptatibus eum fuga, aliquid\n      doloribus reiciendis vero culpa eaque eligendi omnis delectus, dolores\n      commodi tenetur optio eos temporibus sapiente accusantium. Maxime\n      similique odit iusto!\n    </p>\n    <p>\n      Quae quas explicabo mollitia neque at error molestiae debitis nisi, iusto\n      eum repellat doloribus sequi voluptatibus numquam quisquam quidem alias\n      quibusdam enim? Id illo veritatis inventore quo recusandae esse vero.\n    </p>\n    <p>\n      Cum suscipit quae, rem dolor corrupti commodi placeat atque numquam?\n      Perferendis, modi? Explicabo ad quisquam in id corporis labore. Reiciendis\n      dolore magni voluptas ex, iste officia eius accusamus facilis cumque.\n    </p>\n    <p>\n      Hic dignissimos voluptate fugit officia atque reiciendis cumque explicabo\n      impedit esse aperiam nesciunt beatae quibusdam illum unde facere, repellat\n      ipsa optio nostrum distinctio consectetur numquam. Eos delectus quaerat\n      fugiat laboriosam!\n    </p>\n    <p>\n      Temporibus, corrupti fuga. Suscipit, quaerat laborum quod quos nisi quam\n      quia earum cupiditate cumque sed facilis, rerum modi soluta, ex placeat\n      doloribus! Tempora voluptates consequuntur distinctio eius modi amet qui!\n    </p>\n    <p>\n      Consectetur esse illo excepturi numquam voluptas temporibus voluptatem\n      distinctio ipsa nisi molestiae sint aliquam cumque quod sunt officiis,\n      quibusdam a, beatae eum, suscipit obcaecati? Ut non beatae corporis a quo.\n    </p>\n    <p>\n      Facere blanditiis minus laudantium alias explicabo assumenda tempora?\n      Rerum eos, quo in animi cupiditate eaque, vel corporis aut beatae\n      distinctio labore dignissimos, adipisci deserunt esse voluptatibus. Facere\n      nemo sit fugiat.\n    </p>\n    <div class=\"lazy\" data-lazy-function=\"bar\">Script execution here</div>\n    <p>\n      Quo at deserunt hic molestiae. Veritatis vero labore consequatur, est,\n      eaque nostrum nesciunt velit, praesentium corporis obcaecati\n      exercitationem voluptatem tempore. Quae quod mollitia fugit iusto saepe\n      veritatis qui ipsum magni?\n    </p>\n    <p>\n      Modi tenetur aperiam laudantium eveniet rem, soluta in fugit earum vero\n      unde ipsam cupiditate ducimus fuga hic velit libero temporibus maiores\n      voluptatem adipisci. Inventore ducimus expedita numquam ea ex deserunt!\n    </p>\n    <p>\n      Quisquam quam molestiae nemo veniam mollitia doloremque modi rerum tempore\n      voluptate at consequatur praesentium rem consequuntur eos provident\n      tenetur quibusdam, et iste similique. Delectus deleniti et, eaque illum\n      itaque hic!\n    </p>\n    <p>\n      Quos, voluptates esse recusandae consequuntur omnis eaque explicabo\n      expedita voluptate ea perferendis, porro hic soluta nulla dolore.\n      Excepturi accusamus reprehenderit temporibus explicabo quo sint sed, nobis\n      dolores, velit alias nostrum.\n    </p>\n    <p>\n      Culpa hic quasi modi similique voluptatum cumque beatae nulla autem esse\n      mollitia natus nihil aspernatur sed magnam, expedita est recusandae\n      quisquam. Cumque accusamus ad porro necessitatibus in adipisci nihil\n      doloribus.\n    </p>\n    <p>\n      Atque modi possimus aliquid eum consequuntur. Pariatur, blanditiis autem?\n      Placeat repudiandae eius dolorum vero iusto ad fugit doloremque molestiae\n      eum qui necessitatibus deserunt blanditiis illum, ea, expedita corporis\n      odit vel.\n    </p>\n    <p>\n      Vero obcaecati explicabo iure aperiam aut modi architecto consectetur\n      voluptatibus eos. Deleniti, temporibus! Aliquid dignissimos a, pariatur,\n      voluptates hic dolores cupiditate atque ratione aliquam voluptatum\n      accusantium corrupti tempora, doloribus incidunt!\n    </p>\n    <p>\n      Nostrum hic deleniti tempora sunt laudantium ullam deserunt ut et vero\n      recusandae! Nam at, voluptatibus unde eveniet sunt reprehenderit tempore\n      ut consequuntur eum dolores harum, earum assumenda, eos eius mollitia!\n    </p>\n    <p>\n      Labore explicabo voluptas assumenda ratione? Amet sunt deleniti nulla\n      minima ipsam vel odit reprehenderit soluta et iste adipisci, minus illo,\n      ea enim error debitis quidem consequuntur quia! Tenetur, dolorem modi.\n    </p>\n    <p>\n      Voluptates eligendi tempore nostrum, quasi veritatis similique quibusdam\n      consectetur voluptatibus adipisci aliquid laborum dignissimos tempora\n      excepturi soluta atque harum recusandae eum iste enim maiores. Nesciunt\n      tenetur error quisquam voluptatem amet?\n    </p>\n    <div class=\"lazy\" data-lazy-function=\"buzz\">Script execution here</div>\n    <p>\n      Eligendi aspernatur itaque esse nisi! Illo consequatur repellat, eius,\n      laborum hic corporis ad voluptates nesciunt quo maiores aut itaque animi\n      odit ipsum deserunt minima architecto maxime at quas repellendus debitis.\n    </p>\n    <p>\n      Sapiente, ipsum incidunt doloremque ipsam ullam laborum distinctio nemo\n      facere voluptatum saepe reiciendis iure tenetur voluptatibus modi\n      adipisci! Pariatur possimus dolores labore itaque autem dolore,\n      accusantium omnis saepe incidunt veritatis?\n    </p>\n    <p>\n      Natus impedit eaque similique sint maiores? Cum dolores, non molestiae\n      vitae expedita inventore harum corporis porro iusto possimus ullam dolor,\n      autem fugit earum deserunt eum in quos commodi a sunt.\n    </p>\n    <p>\n      Architecto repellat nemo veritatis natus modi quod laudantium nulla quidem\n      ipsa, inventore, vitae reiciendis excepturi! Excepturi, esse ullam atque\n      unde facilis doloremque ipsum et aperiam ipsa facere! Esse, quibusdam\n      odit!\n    </p>\n    <p>\n      Eveniet facere, sit dolorem natus maxime quasi voluptate possimus,\n      temporibus maiores doloribus laborum minus neque nam itaque voluptatibus.\n      Eum nihil aperiam eos voluptatem sunt natus quos cum expedita sapiente ea!\n    </p>\n    <p>\n      Voluptate nobis, dicta commodi ut id iure! Consequatur blanditiis aut ut\n      quasi amet magni tempore, natus repellat dolorem repudiandae, recusandae\n      voluptates eveniet vitae, officia non aspernatur ratione tempora\n      distinctio porro?\n    </p>\n    <p>\n      Cum consectetur voluptatem natus odit alias, a dolore dicta fugit sunt\n      amet dolores repudiandae eaque facilis iure quae minima, voluptas\n      praesentium ipsam! Praesentium iusto soluta alias dolore amet minus odio?\n    </p>\n    <p>\n      Hic labore assumenda officiis ducimus iure aperiam at maiores natus quas\n      quia nostrum, enim eaque soluta, repellat dolore est quidem ab adipisci\n      suscipit nesciunt doloremque! Et expedita quis veniam dolore.\n    </p>\n    <p>\n      Harum, aliquid? Repellat, necessitatibus? Pariatur veniam atque vel\n      dolorem fugiat ad reiciendis, voluptate quia provident laborum incidunt\n      minus dolorum nemo necessitatibus earum, omnis ullam consequatur!\n      Accusantium fuga animi incidunt nesciunt.\n    </p>\n    <p>\n      Quisquam a nulla veniam labore, quasi ipsa numquam saepe sint ratione ea.\n      Doloribus quos molestias vitae earum repellat corrupti ad corporis at, nam\n      nobis officia dolores magni illo fugiat a.\n    </p>\n    <div class=\"lazy\" data-lazy-function=\"booya\">Script execution here</div>\n    <script src=\"../dist/lazyload.js\"></script>\n    <script>\n      window.lazyFunctions = {\n        foo: function (element) {\n          element.style.color = \"red\";\n          console.log(\"foo\");\n        },\n        bar: function (element) {\n          element.remove(element);\n          console.log(\"bar\");\n        },\n        buzz: function (element) {\n          var span = document.createElement(\"span\");\n          span.innerText = \" - buzz!\";\n          element.appendChild(span);\n          console.log(\"buzz\");\n        },\n        booya: function (element) {\n          element.classList.add(\"boo\");\n          console.log(\"booya\");\n        }\n      };\n    </script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        function executeLazyScript(element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n          var lazyFunctionName = element.getAttribute(\"data-lazy-function\");\n          var lazyFunction = lazyFunctions[lazyFunctionName];\n          if (!lazyFunction) return;\n          lazyFunction(element);\n        }\n\n        var ll = new LazyLoad({\n          unobserve_entered: true, // <- To avoid executing the script multiple times\n          callback_enter: executeLazyScript, // Assigning the function defined above\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/load.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <title>Static load method - LazyLoad demos</title>\n    <style>\n      html {\n        box-sizing: border-box;\n      }\n\n      *,\n      *::before,\n      *::after {\n        box-sizing: inherit;\n      }\n\n      html {\n        background: grey;\n      }\n\n      body {\n        max-width: 1280px;\n        margin: 0 auto;\n        background: white;\n      }\n\n      .products {\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n        -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n        justify-content: space-between;\n      }\n\n      .product {\n        display: block;\n        position: relative;\n        text-align: center;\n        text-decoration: none;\n        width: 220px;\n      }\n\n      .product img {\n        display: block;\n        width: 220px;\n        height: 280px;\n      }\n\n      .product:hover .product-image__b.loaded {\n        opacity: 1;\n      }\n\n      .product-image__a {\n        margin: 0 auto;\n      }\n\n      .product-image__b {\n        opacity: 0;\n        transition: opacity 0.5s;\n        position: absolute;\n        top: 0;\n        left: calc(50% - 220px / 2);\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Static load method demo</h1>\n    <div class=\"products\">\n      <!-- Eagerly loading 8 -->\n      <a href=\"#\" class=\"product\">\n        <img\n          alt=\"01a\"\n          class=\"product-image__a\"\n          src=\"./images/220x280-01.webp\"\n          srcset=\"\n            ./images/220x280-01.webp 1x,\n            ./images/440x560-01.webp 2x\n          \"\n        />\n        <img\n          alt=\"01b\"\n          class=\"lazy-hover product-image__b\"\n          data-src=\"./images/220x280-L-01.webp\"\n          data-srcset=\"./images/220x280-L-01.webp 1x, ./images/440x560-L-01.webp 2x\"\n        />\n        <p>Product 01</p>\n      </a>\n      <a href=\"#\" class=\"product\">\n        <img\n          alt=\"02a\"\n          class=\"product-image__a\"\n          src=\"./images/220x280-02.webp\"\n          srcset=\"\n            ./images/220x280-02.webp 1x,\n            ./images/440x560-02.webp 2x\n          \"\n        />\n        <img\n          alt=\"02b\"\n          class=\"lazy-hover product-image__b\"\n          data-src=\"./images/220x280-L-02.webp\"\n          data-srcset=\"./images/220x280-L-02.webp 1x, ./images/440x560-L-02.webp 2x\"\n        />\n        <p>Product 02</p>\n      </a>\n      <a href=\"#\" class=\"product\">\n        <img\n          alt=\"03a\"\n          class=\"product-image__a\"\n          src=\"./images/220x280-03.webp\"\n          srcset=\"\n            ./images/220x280-03.webp 1x,\n            ./images/440x560-03.webp 2x\n          \"\n        />\n        <img\n          alt=\"03b\"\n          class=\"lazy-hover product-image__b\"\n          data-src=\"./images/220x280-L-03.webp\"\n          data-srcset=\"./images/220x280-L-03.webp 1x, ./images/440x560-L-03.webp 2x\"\n        />\n        <p>Product 03</p>\n      </a>\n      <a href=\"#\" class=\"product\">\n        <img\n          alt=\"04a\"\n          class=\"product-image__a\"\n          src=\"./images/220x280-04.webp\"\n          srcset=\"\n            ./images/220x280-04.webp 1x,\n            ./images/440x560-04.webp 2x\n          \"\n        />\n        <img\n          alt=\"04b\"\n          class=\"lazy-hover product-image__b\"\n          data-src=\"./images/220x280-L-04.webp\"\n          data-srcset=\"./images/220x280-L-04.webp 1x, ./images/440x560-L-04.webp 2x\"\n        />\n        <p>Product 04</p>\n      </a>\n      <a href=\"#\" class=\"product\">\n        <img\n          alt=\"05a\"\n          class=\"product-image__a\"\n          src=\"./images/220x280-05.webp\"\n          srcset=\"\n            ./images/220x280-05.webp 1x,\n            ./images/440x560-05.webp 2x\n          \"\n        />\n        <img\n          alt=\"05b\"\n          class=\"lazy-hover product-image__b\"\n          data-src=\"./images/220x280-L-05.webp\"\n          data-srcset=\"./images/220x280-L-05.webp 1x, ./images/440x560-L-05.webp 2x\"\n        />\n        <p>Product 05</p>\n      </a>\n      <a href=\"#\" class=\"product\">\n        <img\n          alt=\"06a\"\n          class=\"product-image__a\"\n          src=\"./images/220x280-06.webp\"\n          srcset=\"\n            ./images/220x280-06.webp 1x,\n            ./images/440x560-06.webp 2x\n          \"\n        />\n        <img\n          alt=\"06b\"\n          class=\"lazy-hover product-image__b\"\n          data-src=\"./images/220x280-L-06.webp\"\n          data-srcset=\"./images/220x280-L-06.webp 1x, ./images/440x560-L-06.webp 2x\"\n        />\n        <p>Product 06</p>\n      </a>\n      <a href=\"#\" class=\"product\">\n        <img\n          alt=\"07a\"\n          class=\"product-image__a\"\n          src=\"./images/220x280-07.webp\"\n          srcset=\"\n            ./images/220x280-07.webp 1x,\n            ./images/440x560-07.webp 2x\n          \"\n        />\n        <img\n          alt=\"07b\"\n          class=\"lazy-hover product-image__b\"\n          data-src=\"./images/220x280-L-07.webp\"\n          data-srcset=\"./images/220x280-L-07.webp 1x, ./images/440x560-L-07.webp 2x\"\n        />\n        <p>Product 07</p>\n      </a>\n      <a href=\"#\" class=\"product\">\n        <img\n          alt=\"08a\"\n          class=\"product-image__a\"\n          src=\"./images/220x280-08.webp\"\n          srcset=\"\n            ./images/220x280-08.webp 1x,\n            ./images/440x560-08.webp 2x\n          \"\n        />\n        <img\n          alt=\"08b\"\n          class=\"lazy-hover product-image__b\"\n          data-src=\"./images/220x280-L-08.webp\"\n          data-srcset=\"./images/220x280-L-08.webp 1x, ./images/440x560-L-08.webp 2x\"\n        />\n        <p>Product 08</p>\n      </a>\n      <!-- 8 more! -->\n      <a href=\"#\" class=\"product\">\n        <img\n          alt=\"09a\"\n          class=\"lazy product-image__a\"\n          data-src=\"./images/220x280-09.webp\"\n          data-srcset=\"./images/220x280-09.webp 1x, ./images/440x560-09.webp 2x\"\n        />\n        <img\n          alt=\"09b\"\n          class=\"lazy-hover product-image__b\"\n          data-src=\"./images/220x280-L-09.webp\"\n          data-srcset=\"./images/220x280-L-09.webp 1x, ./images/440x560-L-09.webp 2x\"\n        />\n        <p>Product 09</p>\n      </a>\n      <a href=\"#\" class=\"product\">\n        <img\n          alt=\"10a\"\n          class=\"lazy product-image__a\"\n          data-src=\"./images/220x280-10.webp\"\n          data-srcset=\"./images/220x280-10.webp 1x, ./images/440x560-10.webp 2x\"\n        />\n        <img\n          alt=\"10b\"\n          class=\"lazy-hover product-image__b\"\n          data-src=\"./images/220x280-L-10.webp\"\n          data-srcset=\"./images/220x280-L-10.webp 1x, ./images/440x560-L-10.webp 2x\"\n        />\n        <p>Product 10</p>\n      </a>\n      <a href=\"#\" class=\"product\">\n        <img\n          alt=\"11a\"\n          class=\"lazy product-image__a\"\n          data-src=\"./images/220x280-11.webp\"\n          data-srcset=\"./images/220x280-11.webp 1x, ./images/440x560-11.webp 2x\"\n        />\n        <img\n          alt=\"11b\"\n          class=\"lazy-hover product-image__b\"\n          data-src=\"./images/220x280-L-11.webp\"\n          data-srcset=\"./images/220x280-L-11.webp 1x, ./images/440x560-L-11.webp 2x\"\n        />\n        <p>Product 11</p>\n      </a>\n      <a href=\"#\" class=\"product\">\n        <img\n          alt=\"12a\"\n          class=\"lazy product-image__a\"\n          data-src=\"./images/220x280-12.webp\"\n          data-srcset=\"./images/220x280-12.webp 1x, ./images/440x560-12.webp 2x\"\n        />\n        <img\n          alt=\"12b\"\n          class=\"lazy-hover product-image__b\"\n          data-src=\"./images/220x280-L-12.webp\"\n          data-srcset=\"./images/220x280-L-12.webp 1x, ./images/440x560-L-12.webp 2x\"\n        />\n        <p>Product 12</p>\n      </a>\n      <a href=\"#\" class=\"product\">\n        <img\n          alt=\"13a\"\n          class=\"lazy product-image__a\"\n          data-src=\"./images/220x280-13.webp\"\n          data-srcset=\"./images/220x280-13.webp 1x, ./images/440x560-13.webp 2x\"\n        />\n        <img\n          alt=\"13b\"\n          class=\"lazy-hover product-image__b\"\n          data-src=\"./images/220x280-L-13.webp\"\n          data-srcset=\"./images/220x280-L-13.webp 1x, ./images/440x560-L-13.webp 2x\"\n        />\n        <p>Product 13</p>\n      </a>\n      <a href=\"#\" class=\"product\">\n        <img\n          alt=\"14a\"\n          class=\"lazy product-image__a\"\n          data-src=\"./images/220x280-14.webp\"\n          data-srcset=\"./images/220x280-14.webp 1x, ./images/440x560-14.webp 2x\"\n        />\n        <img\n          alt=\"14b\"\n          class=\"lazy-hover product-image__b\"\n          data-src=\"./images/220x280-L-14.webp\"\n          data-srcset=\"./images/220x280-L-14.webp 1x, ./images/440x560-L-14.webp 2x\"\n        />\n        <p>Product 14</p>\n      </a>\n      <a href=\"#\" class=\"product\">\n        <img\n          alt=\"15a\"\n          class=\"lazy product-image__a\"\n          data-src=\"./images/220x280-15.webp\"\n          data-srcset=\"./images/220x280-15.webp 1x, ./images/440x560-15.webp 2x\"\n        />\n        <img\n          alt=\"15b\"\n          class=\"lazy-hover product-image__b\"\n          data-src=\"./images/220x280-L-15.webp\"\n          data-srcset=\"./images/220x280-L-15.webp 1x, ./images/440x560-L-15.webp 2x\"\n        />\n        <p>Product 15</p>\n      </a>\n      <a href=\"#\" class=\"product\">\n        <img\n          alt=\"16a\"\n          class=\"lazy product-image__a\"\n          data-src=\"./images/220x280-16.webp\"\n          data-srcset=\"./images/220x280-16.webp 1x, ./images/440x560-16.webp 2x\"\n        />\n        <img\n          alt=\"16b\"\n          class=\"lazy-hover product-image__b\"\n          data-src=\"./images/220x280-L-16.webp\"\n          data-srcset=\"./images/220x280-L-16.webp 1x, ./images/440x560-L-16.webp 2x\"\n        />\n        <p>Product 16</p>\n      </a>\n    </div>\n  </body>\n\n  <script src=\"../dist/lazyload.min.js\"></script>\n  <script>\n    (function (w, d) {\n      function logElementEvent(eventName, element) {\n        console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n      }\n\n      var callback_enter = function (element) {\n        logElementEvent(\"🔑 ENTERED\", element);\n      };\n      var callback_exit = function (element) {\n        logElementEvent(\"🚪 EXITED\", element);\n      };\n      var callback_loading = function (element) {\n        logElementEvent(\"⌚ LOADING\", element);\n      };\n      var callback_loaded = function (element) {\n        logElementEvent(\"👍 LOADED\", element);\n      };\n      var callback_error = function (element) {\n        logElementEvent(\"💀 ERROR\", element);\n        element.src =\n          \"./images/440x560-Error.webp\";\n      };\n      var callback_finish = function () {\n        logElementEvent(\"✔️ FINISHED\", document.documentElement);\n      };\n      var callback_cancel = function (element) {\n        logElementEvent(\"🔥 CANCEL\", element);\n      };\n\n      var options = {\n        // Assign the callbacks defined above\n        callback_enter: callback_enter,\n        callback_exit: callback_exit,\n        callback_cancel: callback_cancel,\n        callback_loading: callback_loading,\n        callback_loaded: callback_loaded,\n        callback_error: callback_error,\n        callback_finish: callback_finish\n      };\n\n      var page_ll = new LazyLoad(options);\n\n      function mouseoverHandler(event) {\n        var product = event.currentTarget;\n        var lazyImg = product.querySelector(\".lazy-hover\");\n        if (!!lazyImg.getAttribute(\"data-ll-status\")) {\n          return;\n        }\n        // page_ll.load(lazyImg); STILL WORKS, BUT DEPRECATED\n        LazyLoad.load(lazyImg, options);\n      }\n\n      function nodeSetToArray(nodeSet) {\n        return Array.prototype.slice.call(nodeSet);\n      }\n\n      function initializeMouseBehaviour() {\n        const products = document.querySelectorAll(\".product\");\n        nodeSetToArray(products).forEach(function (product) {\n          product.addEventListener(\"mouseover\", mouseoverHandler, true);\n        });\n      }\n\n      initializeMouseBehaviour();\n    })(window, document);\n  </script>\n</html>\n"
  },
  {
    "path": "demos/load_all.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Load all - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      .hidden {\n        border: 1px dotted gray;\n      }\n\n      .hidden::before {\n        content: \"Hidden image\";\n      }\n\n      .hidden > img {\n        display: none;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      /* Fixes Firefox anomaly during image load */\n\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n\n      button {\n        position: fixed;\n        bottom: 10px;\n        width: 10em;\n        height: 3em;\n        left: 50%;\n        margin-left: -5em;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Load all demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\">\n            <img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\">\n            <img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis\"\n              data-src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-04.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-06.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-08.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-09.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-10.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-11.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-12.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-13.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-14.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-15.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a class=\"hidden\" href=\"#/it/donna/mocassini_cod44721744sl.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-16.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-17.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-18.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-19.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Francesine\"\n              data-src=\"./images/440x560-20.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-21.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-22.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-23.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-24.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a class=\"hidden\" href=\"#/it/donna/stivali_cod44724026qs.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-25.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-26.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-27.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-28.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-29.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-30.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-31.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-32.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Cuissardes\"\n              data-src=\"./images/440x560-33.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a class=\"hidden\" href=\"#/it/donna/decollete_cod44725388jv.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-34.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-35.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-36.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-37.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-38.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-39.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\">\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-40.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n      </ul>\n    </div>\n    <button type=\"button\" id=\"loadAll\">\n      LOAD ALL\n    </button>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        var ll = new LazyLoad({\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n\n        var loadAllButton = document.getElementById(\"loadAll\");\n\n        loadAllButton.addEventListener(\"click\", function () {\n          ll.loadAll();\n          loadAllButton.disabled = true;\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/native_lazyload.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>Native lazy loading - Lazyload demos</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      img,\n      .results a {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      .warning {\n        padding: 1em;\n        color: black;\n        background: lightyellow;\n        border-radius: 1em;\n        border: 1px solid gray;\n      }\n\n      /* Fixes Firefox anomaly during image load */\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Native lazy loading demo</h1>\n    <p class=\"warning\">\n      You can use this page to test browsers' implementations of\n      <strong>native lazy loading</strong>.<br />\n      Please note that not even one line of JavaScript code is involved here.\n    </p>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img alt=\"Stivaletti\" src=./images/440x560-01.webp width=\"220\" height=\"280\"\n            loading=\"eager\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img alt=\"Open toe\" src=./images/440x560-02.webp width=\"220\" height=\"280\"\n            loading=\"eager\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img alt=\"Sneakers &amp; Tennis\" class=\"lazy\" src=./images/440x560-03.webp width=\"220\"\n            height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img alt=\"Sneakers &amp; Tennis shoes basse\" class=\"lazy\" src=./images/440x560-04.webp\n            width=\"220\" height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img alt=\"Sneakers &amp; Tennis shoes alte\" class=\"lazy\" src=./images/440x560-05.webp\n            width=\"220\" height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img alt=\"Sneakers &amp; Tennis shoes alte\" class=\"lazy\" src=./images/440x560-06.webp\n            width=\"220\" height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img alt=\"Sneakers &amp; Tennis shoes basse\" class=\"lazy\" src=./images/440x560-07.webp\n            width=\"220\" height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img alt=\"Stivali\" class=\"lazy\" src=./images/440x560-08.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img alt=\"Stivali\" class=\"lazy\" src=./images/440x560-09.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img alt=\"Stivaletti\" class=\"lazy\" src=./images/440x560-10.webp width=\"220\"\n            height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img alt=\"Stivaletti\" class=\"lazy\" src=./images/440x560-11.webp width=\"220\"\n            height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img alt=\"Stivali\" class=\"lazy\" src=./images/440x560-12.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img alt=\"Stivaletti\" class=\"lazy\" src=./images/440x560-13.webp width=\"220\"\n            height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img alt=\"Décolleté\" class=\"lazy\" src=./images/440x560-14.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img alt=\"Mocassini\" class=\"lazy\" src=./images/440x560-15.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img alt=\"Stivaletti\" class=\"lazy\" src=./images/440x560-16.webp width=\"220\"\n            height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img alt=\"Décolleté\" class=\"lazy\" src=./images/440x560-17.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img alt=\"Décolleté\" class=\"lazy\" src=./images/440x560-18.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img alt=\"Francesine\" class=\"lazy\" src=./images/440x560-19.webp width=\"220\"\n            height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img alt=\"Stivaletti\" class=\"lazy\" src=./images/440x560-20.webp width=\"220\"\n            height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img alt=\"Décolleté\" class=\"lazy\" src=./images/440x560-21.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img alt=\"Mocassini\" class=\"lazy\" src=./images/440x560-22.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img alt=\"Mocassini\" class=\"lazy\" src=./images/440x560-23.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img alt=\"Stivali\" class=\"lazy\" src=./images/440x560-24.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img alt=\"Stivaletti\" class=\"lazy\" src=./images/440x560-25.webp width=\"220\"\n            height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img alt=\"Stivaletti\" class=\"lazy\" src=./images/440x560-26.webp width=\"220\"\n            height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img alt=\"Mocassini\" class=\"lazy\" src=./images/440x560-27.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img alt=\"Stivaletti\" class=\"lazy\" src=./images/440x560-28.webp width=\"220\"\n            height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img alt=\"Stivaletti\" class=\"lazy\" src=./images/440x560-29.webp width=\"220\"\n            height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img alt=\"Stivaletti\" class=\"lazy\" src=./images/440x560-30.webp width=\"220\"\n            height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img alt=\"Stivaletti\" class=\"lazy\" src=./images/440x560-31.webp width=\"220\"\n            height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img alt=\"Cuissardes\" class=\"lazy\" src=./images/440x560-32.webp width=\"220\"\n            height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img alt=\"Décolleté\" class=\"lazy\" src=./images/440x560-33.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img alt=\"Stivaletti\" class=\"lazy\" src=./images/440x560-34.webp width=\"220\"\n            height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img alt=\"Sneakers &amp; Tennis shoes basse\" class=\"lazy\" src=./images/440x560-35.webp\n            width=\"220\" height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img alt=\"Mocassini\" class=\"lazy\" src=./images/440x560-36.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img alt=\"Sneakers &amp; Tennis shoes basse\" class=\"lazy\" src=./images/440x560-37.webp\n            width=\"220\" height=\"280\" loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img alt=\"Mocassini\" class=\"lazy\" src=./images/440x560-38.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img alt=\"Mocassini\" class=\"lazy\" src=./images/440x560-39.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img alt=\"Mocassini\" class=\"lazy\" src=./images/440x560-40.webp width=\"220\" height=\"280\"\n            loading=\"lazy\" /></a\n          >\n        </li>\n      </ul>\n    </div>\n    <iframe loading=\"lazy\" src=\"iframes/i01.html\" frameborder=\"0\"></iframe>\n    <iframe loading=\"lazy\" src=\"iframes/i02.html\" frameborder=\"0\"></iframe>\n    <iframe loading=\"lazy\" src=\"iframes/i03.html\" frameborder=\"0\"></iframe>\n    <script>\n      console.log(\"Look ma! No javascript here!\");\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/native_lazyload_conditional.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>Conditional native lazy loading - Lazyload demos</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      .warning {\n        padding: 1em;\n        color: black;\n        background: lightyellow;\n        border-radius: 1em;\n        border: 1px solid gray;\n      }\n\n      /* Fixes Firefox anomaly during image load */\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Conditional native lazy loading demo</h1>\n    <h2>Images</h2>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img alt=\"Stivaletti\" loading=\"eager\" src=./images/440x560-01.webp width=\"220\"\n            height=\"280\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img alt=\"Open toe\" loading=\"eager\" src=./images/440x560-02.webp width=\"220\"\n            height=\"280\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img alt=\"Sneakers &amp; Tennis\" class=\"lazy\" data-src=./images/440x560-03.webp\n            width=\"220\" height=\"280\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img alt=\"Sneakers &amp; Tennis shoes basse\" class=\"lazy\"\n            data-src=./images/440x560-04.webp width=\"220\" height=\"280\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img alt=\"Sneakers &amp; Tennis shoes alte\" class=\"lazy\"\n            data-src=./images/440x560-05.webp width=\"220\" height=\"280\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img alt=\"Sneakers &amp; Tennis shoes alte\" class=\"lazy\"\n            data-src=./images/440x560-06.webp width=\"220\" height=\"280\" /></a\n          >\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img alt=\"Sneakers &amp; Tennis shoes basse\" class=\"lazy\"\n            data-src=./images/440x560-07.webp width=\"220\" height=\"280\" /></a\n          >\n        </li>\n      </ul>\n    </div>\n\n    <h2>Iframes</h2>\n    <iframe class=\"lazy\" data-src=\"./iframes/i01.html\" frameborder=\"0\"></iframe>\n    <iframe class=\"lazy\" data-src=\"./iframes/i02.html\" frameborder=\"0\"></iframe>\n    <iframe class=\"lazy\" data-src=\"./iframes/i03.html\" frameborder=\"0\"></iframe>\n\n    <h2>Preload = none</h2>\n    <video\n      class=\"lazy\"\n      controls\n      preload=\"none\"\n      width=\"620\"\n      data-src=\"./videos/1920x1080-01.mp4\"\n      data-poster=\"./videos/1920x1080-01.webp\"\n    >\n      <source type=\"video/mp4\" data-src=\"./videos/1920x1080-01.mp4\" />\n      <source type=\"video/ogg\" data-src=\"./videos/1920x1080-01.ogv\" />\n      <source type=\"video/avi\" data-src=\"./videos/1920x1080-01.avi\" />\n    </video>\n\n    <h2>Preload = metadata</h2>\n    <video\n      class=\"lazy\"\n      preload=\"metadata\"\n      controls\n      width=\"620\"\n      data-src=\"./videos/1920x1080-02.mp4\"\n      data-poster=\"./videos/1920x1080-02.webp\"\n    >\n      <source type=\"video/mp4\" data-src=\"./videos/1920x1080-02.mp4\" />\n      <source type=\"video/ogg\" data-src=\"./videos/1920x1080-02.ogv\" />\n      <source type=\"video/avi\" data-src=\"./videos/1920x1080-02.avi\" />\n    </video>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src = 'url(\"./images/440x560-Error.webp\")';\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        function supportsNativeLazyVideo() {\n          return \"loading\" in HTMLVideoElement.prototype;\n        }\n\n        // Single instance using native lazy loading on images, videos and iframes\n        function createSingleInstance() {\n          var lazyAll = new LazyLoad({\n            use_native: true,\n            // NOTICE: they won't be called since the loading will be native\n            callback_enter: callback_enter,\n            callback_exit: callback_exit,\n            callback_cancel: callback_cancel,\n            callback_loading: callback_loading,\n            callback_loaded: callback_loaded,\n            callback_error: callback_error,\n            callback_finish: callback_finish\n          });\n        }\n\n        // Double instance using native lazy loading on images and iframes,\n        // and JS driven lazy loading on videos\n        function createDoubleInstance() {\n          var lazyImgsIframes = new LazyLoad({\n            elements_selector: \"img.lazy, iframe.lazy\",\n            use_native: true,\n            // Assign the callbacks defined above\n            // NOTICE: they won't all called since the loading will be native\n            callback_enter: callback_enter,\n            callback_exit: callback_exit,\n            callback_cancel: callback_cancel,\n            callback_loading: callback_loading,\n            callback_loaded: callback_loaded,\n            callback_error: callback_error,\n            callback_finish: callback_finish\n          });\n          var lazyVideos = new LazyLoad({\n            elements_selector: \"video.lazy\",\n            // Assign the callbacks defined above\n            callback_enter: callback_enter,\n            callback_exit: callback_exit,\n            callback_cancel: callback_cancel,\n            callback_loading: callback_loading,\n            callback_loaded: callback_loaded,\n            callback_error: callback_error,\n            callback_finish: callback_finish\n          });\n        }\n\n        if (supportsNativeLazyVideo()) {\n          createSingleInstance();\n        } else {\n          createDoubleInstance();\n        }\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/object.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Lazy object - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      object {\n        width: 100%;\n        height: 400px;\n        display: block;\n        margin: 1rem 0;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Lazy objects demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <p>Scroll down to see lazily loaded objects</p>\n      <object type=\"image/svg+xml\" class=\"lazy\" data-src=\"objects/svg01.svg\" title=\"Vecta.io demo image representing an application\"></object>\n      <object type=\"application/pdf\" class=\"lazy\" data-src=\"objects/pdf01.pdf\" title=\"A simple demonstration PDF file\"></object>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        ll = new LazyLoad({\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/picture_media.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>Picture with media attribute in source tags - Lazyload demos</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      li {\n        min-height: 280px;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      @media (min-width: 500px) {\n        img {\n          width: 330px;\n          height: 420px;\n        }\n      }\n\n      img:not([src]):not([srcset]) {\n        visibility: hidden;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Picture with media attribute in source tags demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              srcset=\"./images/330x420-01.webp 1x, ./images/660x840-01.webp 2x\"\n            />\n            <img\n              alt=\"Stivaletti\"\n              src=\"./images/220x280-01.webp\"\n              srcset=\"./images/220x280-01.webp 1x, ./images/440x560-01.webp 2x\"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              srcset=\"./images/330x420-02.webp 1x, ./images/660x840-02.webp 2x\"\n            />\n            <img\n              alt=\"Open toe\"\n              src=\"./images/220x280-02.webp\"\n              srcset=\"./images/220x280-02.webp 1x, ./images/440x560-02.webp 2x\"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              srcset=\"./images/330x420-03.webp 1x, ./images/660x840-03.webp 2x\"\n            />\n            <img\n              alt=\"Sneakers &amp; Tennis\"\n              src=\"./images/220x280-03.webp\"\n              srcset=\"./images/220x280-03.webp 1x, ./images/440x560-03.webp 2x\"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              srcset=\"./images/330x420-04.webp 1x, ./images/660x840-04.webp 2x\"\n            />\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              src=\"./images/220x280-04.webp\"\n              srcset=\"./images/220x280-04.webp 1x, ./images/440x560-04.webp 2x\"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-05.webp 1x,\n                ./images/660x840-05.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/220x280-05.webp\"\n              data-srcset=\"\n                ./images/220x280-05.webp 1x,\n                ./images/440x560-05.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-06.webp 1x,\n                ./images/660x840-06.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/220x280-06.webp\"\n              data-srcset=\"\n                ./images/220x280-06.webp 1x,\n                ./images/440x560-06.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-07.webp 1x,\n                ./images/660x840-07.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/220x280-07.webp\"\n              data-srcset=\"\n                ./images/220x280-07.webp 1x,\n                ./images/440x560-07.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-08.webp 1x,\n                ./images/660x840-08.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/220x280-08.webp\"\n              data-srcset=\"\n                ./images/220x280-08.webp 1x,\n                ./images/440x560-08.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-09.webp 1x,\n                ./images/660x840-09.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/220x280-09.webp\"\n              data-srcset=\"\n                ./images/220x280-09.webp 1x,\n                ./images/440x560-09.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-10.webp 1x,\n                ./images/660x840-10.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/220x280-10.webp\"\n              data-srcset=\"\n                ./images/220x280-10.webp 1x,\n                ./images/440x560-10.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-11.webp 1x,\n                ./images/660x840-11.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/220x280-11.webp\"\n              data-srcset=\"\n                ./images/220x280-11.webp 1x,\n                ./images/440x560-11.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-12.webp 1x,\n                ./images/660x840-12.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/220x280-12.webp\"\n              data-srcset=\"\n                ./images/220x280-12.webp 1x,\n                ./images/440x560-12.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-13.webp 1x,\n                ./images/660x840-13.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/220x280-13.webp\"\n              data-srcset=\"\n                ./images/220x280-13.webp 1x,\n                ./images/440x560-13.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-14.webp 1x,\n                ./images/660x840-14.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/220x280-14.webp\"\n              data-srcset=\"\n                ./images/220x280-14.webp 1x,\n                ./images/440x560-14.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-15.webp 1x,\n                ./images/660x840-15.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/220x280-15.webp\"\n              data-srcset=\"\n                ./images/220x280-15.webp 1x,\n                ./images/440x560-15.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-16.webp 1x,\n                ./images/660x840-16.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/220x280-16.webp\"\n              data-srcset=\"\n                ./images/220x280-16.webp 1x,\n                ./images/440x560-16.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-17.webp 1x,\n                ./images/660x840-17.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/220x280-17.webp\"\n              data-srcset=\"\n                ./images/220x280-17.webp 1x,\n                ./images/440x560-17.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-18.webp 1x,\n                ./images/660x840-18.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/220x280-18.webp\"\n              data-srcset=\"\n                ./images/220x280-18.webp 1x,\n                ./images/440x560-18.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-19.webp 1x,\n                ./images/660x840-19.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/220x280-19.webp\"\n              data-srcset=\"\n                ./images/220x280-19.webp 1x,\n                ./images/440x560-19.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-20.webp 1x,\n                ./images/660x840-20.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Francesine\"\n              data-src=\"./images/220x280-20.webp\"\n              data-srcset=\"\n                ./images/220x280-20.webp 1x,\n                ./images/440x560-20.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-21.webp 1x,\n                ./images/660x840-21.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/220x280-21.webp\"\n              data-srcset=\"\n                ./images/220x280-21.webp 1x,\n                ./images/440x560-21.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-22.webp 1x,\n                ./images/660x840-22.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/220x280-22.webp\"\n              data-srcset=\"\n                ./images/220x280-22.webp 1x,\n                ./images/440x560-22.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-23.webp 1x,\n                ./images/660x840-23.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/220x280-23.webp\"\n              data-srcset=\"\n                ./images/220x280-23.webp 1x,\n                ./images/440x560-23.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-24.webp 1x,\n                ./images/660x840-24.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/220x280-24.webp\"\n              data-srcset=\"\n                ./images/220x280-24.webp 1x,\n                ./images/440x560-24.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-25.webp 1x,\n                ./images/660x840-25.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/220x280-25.webp\"\n              data-srcset=\"\n                ./images/220x280-25.webp 1x,\n                ./images/440x560-25.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-26.webp 1x,\n                ./images/660x840-26.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/220x280-26.webp\"\n              data-srcset=\"\n                ./images/220x280-26.webp 1x,\n                ./images/440x560-26.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-27.webp 1x,\n                ./images/660x840-27.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/220x280-27.webp\"\n              data-srcset=\"\n                ./images/220x280-27.webp 1x,\n                ./images/440x560-27.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-28.webp 1x,\n                ./images/660x840-28.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/220x280-28.webp\"\n              data-srcset=\"\n                ./images/220x280-28.webp 1x,\n                ./images/440x560-28.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-29.webp 1x,\n                ./images/660x840-29.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/220x280-29.webp\"\n              data-srcset=\"\n                ./images/220x280-29.webp 1x,\n                ./images/440x560-29.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-30.webp 1x,\n                ./images/660x840-30.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/220x280-30.webp\"\n              data-srcset=\"\n                ./images/220x280-30.webp 1x,\n                ./images/440x560-30.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-31.webp 1x,\n                ./images/660x840-31.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/220x280-31.webp\"\n              data-srcset=\"\n                ./images/220x280-31.webp 1x,\n                ./images/440x560-31.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-32.webp 1x,\n                ./images/660x840-32.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/220x280-32.webp\"\n              data-srcset=\"\n                ./images/220x280-32.webp 1x,\n                ./images/440x560-32.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-33.webp 1x,\n                ./images/660x840-33.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Cuissardes\"\n              data-src=\"./images/220x280-33.webp\"\n              data-srcset=\"\n                ./images/220x280-33.webp 1x,\n                ./images/440x560-33.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-34.webp 1x,\n                ./images/660x840-34.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/220x280-34.webp\"\n              data-srcset=\"\n                ./images/220x280-34.webp 1x,\n                ./images/440x560-34.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-35.webp 1x,\n                ./images/660x840-35.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/220x280-35.webp\"\n              data-srcset=\"\n                ./images/220x280-35.webp 1x,\n                ./images/440x560-35.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-36.webp 1x,\n                ./images/660x840-36.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/220x280-36.webp\"\n              data-srcset=\"\n                ./images/220x280-36.webp 1x,\n                ./images/440x560-36.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-37.webp 1x,\n                ./images/660x840-37.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/220x280-37.webp\"\n              data-srcset=\"\n                ./images/220x280-37.webp 1x,\n                ./images/440x560-37.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-38.webp 1x,\n                ./images/660x840-38.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/220x280-38.webp\"\n              data-srcset=\"\n                ./images/220x280-38.webp 1x,\n                ./images/440x560-38.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-39.webp 1x,\n                ./images/660x840-39.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/220x280-39.webp\"\n              data-srcset=\"\n                ./images/220x280-39.webp 1x,\n                ./images/440x560-39.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              media=\"(min-width: 500px)\"\n              data-srcset=\"\n                ./images/330x420-40.webp 1x,\n                ./images/660x840-40.webp 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/220x280-40.webp\"\n              data-srcset=\"\n                ./images/220x280-40.webp 1x,\n\t\t\t\t\t\t\t  ./images/440x560-40.webp 2x\n\t\t\t\t\t\t\t\"\n            />\n          </picture>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src = \"./images/440x560-Error.webp\";\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n\n        ll = new LazyLoad({\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/picture_type_avif.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Picture with type attribute in source to conditionally load AVIF - Lazyload demos</title>\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      /* Fixes Firefox anomaly during image load */\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Picture with type attribute in source to conditionally load AVIF demo</h1>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              srcset=\"./images/220x280-01.avif 1x, ./images/440x560-01.avif 2x\"\n            />\n            <img\n              alt=\"Stivaletti\"\n              width=\"220\"\n              height=\"280\"\n              src=\"./images/220x280-01.webp\"\n              srcset=\"./images/220x280-01.webp 1x, ./images/440x560-01.webp 2x\"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              srcset=\"./images/220x280-02.avif 1x, ./images/440x560-02.avif 2x\"\n            />\n            <img\n              alt=\"Open toe\"\n              width=\"220\"\n              height=\"280\"\n              src=\"./images/220x280-02.webp\"\n              srcset=\"./images/220x280-02.webp 1x, ./images/440x560-02.webp 2x\"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              srcset=\"./images/220x280-03.avif 1x, ./images/440x560-03.avif 2x\"\n            />\n            <img\n              alt=\"Sneakers &amp; Tennis\"\n              width=\"220\"\n              height=\"280\"\n              src=\"./images/220x280-03.webp\"\n              srcset=\"./images/220x280-03.webp 1x, ./images/440x560-03.webp 2x\"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              srcset=\"./images/220x280-04.avif 1x, ./images/440x560-04.avif 2x\"\n            />\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              width=\"220\"\n              height=\"280\"\n              src=\"./images/220x280-04.webp\"\n              srcset=\"./images/220x280-04.webp 1x, ./images/440x560-04.webp 2x\"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-05.avif 1x,\n                ./images/440x560-05.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-05.webp\"\n              data-srcset=\"\n                ./images/220x280-05.webp 1x,\n                ./images/440x560-05.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-06.avif 1x,\n                ./images/440x560-06.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-06.webp\"\n              data-srcset=\"\n                ./images/220x280-06.webp 1x,\n                ./images/440x560-06.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-07.avif 1x,\n                ./images/440x560-07.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-07.webp\"\n              data-srcset=\"\n                ./images/220x280-07.webp 1x,\n                ./images/440x560-07.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-08.avif 1x,\n                ./images/440x560-08.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-08.webp\"\n              data-srcset=\"\n                ./images/220x280-08.webp 1x,\n                ./images/440x560-08.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-09.avif 1x,\n                ./images/440x560-09.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-09.webp\"\n              data-srcset=\"\n                ./images/220x280-09.webp 1x,\n                ./images/440x560-09.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-10.avif 1x,\n                ./images/440x560-10.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-10.webp\"\n              data-srcset=\"\n                ./images/220x280-10.webp 1x,\n                ./images/440x560-10.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-11.avif 1x,\n                ./images/440x560-11.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-11.webp\"\n              data-srcset=\"\n                ./images/220x280-11.webp 1x,\n                ./images/440x560-11.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-12.avif 1x,\n                ./images/440x560-12.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-12.webp\"\n              data-srcset=\"\n                ./images/220x280-12.webp 1x,\n                ./images/440x560-12.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-13.avif 1x,\n                ./images/440x560-13.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-13.webp\"\n              data-srcset=\"\n                ./images/220x280-13.webp 1x,\n                ./images/440x560-13.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-14.avif 1x,\n                ./images/440x560-14.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-14.webp\"\n              data-srcset=\"\n                ./images/220x280-14.webp 1x,\n                ./images/440x560-14.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-15.avif 1x,\n                ./images/440x560-15.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-15.webp\"\n              data-srcset=\"\n                ./images/220x280-15.webp 1x,\n                ./images/440x560-15.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-16.avif 1x,\n                ./images/440x560-16.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-16.webp\"\n              data-srcset=\"\n                ./images/220x280-16.webp 1x,\n                ./images/440x560-16.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-17.avif 1x,\n                ./images/440x560-17.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-17.webp\"\n              data-srcset=\"\n                ./images/220x280-17.webp 1x,\n                ./images/440x560-17.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-18.avif 1x,\n                ./images/440x560-18.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-18.webp\"\n              data-srcset=\"\n                ./images/220x280-18.webp 1x,\n                ./images/440x560-18.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-19.avif 1x,\n                ./images/440x560-19.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-19.webp\"\n              data-srcset=\"\n                ./images/220x280-19.webp 1x,\n                ./images/440x560-19.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-20.avif 1x,\n                ./images/440x560-20.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Francesine\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-20.webp\"\n              data-srcset=\"\n                ./images/220x280-20.webp 1x,\n                ./images/440x560-20.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-21.avif 1x,\n                ./images/440x560-21.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-21.webp\"\n              data-srcset=\"\n                ./images/220x280-21.webp 1x,\n                ./images/440x560-21.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-22.avif 1x,\n                ./images/440x560-22.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-22.webp\"\n              data-srcset=\"\n                ./images/220x280-22.webp 1x,\n                ./images/440x560-22.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-23.avif 1x,\n                ./images/440x560-23.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-23.webp\"\n              data-srcset=\"\n                ./images/220x280-23.webp 1x,\n                ./images/440x560-23.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-24.avif 1x,\n                ./images/440x560-24.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-24.webp\"\n              data-srcset=\"\n                ./images/220x280-24.webp 1x,\n                ./images/440x560-24.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-25.avif 1x,\n                ./images/440x560-25.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-25.webp\"\n              data-srcset=\"\n                ./images/220x280-25.webp 1x,\n                ./images/440x560-25.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-26.avif 1x,\n                ./images/440x560-26.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-26.webp\"\n              data-srcset=\"\n                ./images/220x280-26.webp 1x,\n                ./images/440x560-26.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-27.avif 1x,\n                ./images/440x560-27.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-27.webp\"\n              data-srcset=\"\n                ./images/220x280-27.webp 1x,\n                ./images/440x560-27.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-28.avif 1x,\n                ./images/440x560-28.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-28.webp\"\n              data-srcset=\"\n                ./images/220x280-28.webp 1x,\n                ./images/440x560-28.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-29.avif 1x,\n                ./images/440x560-29.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-29.webp\"\n              data-srcset=\"\n                ./images/220x280-29.webp 1x,\n                ./images/440x560-29.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-30.avif 1x,\n                ./images/440x560-30.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-30.webp\"\n              data-srcset=\"\n                ./images/220x280-30.webp 1x,\n                ./images/440x560-30.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-31.avif 1x,\n                ./images/440x560-31.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-31.webp\"\n              data-srcset=\"\n                ./images/220x280-31.webp 1x,\n                ./images/440x560-31.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-32.avif 1x,\n                ./images/440x560-32.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-32.webp\"\n              data-srcset=\"\n                ./images/220x280-32.webp 1x,\n                ./images/440x560-32.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-33.avif 1x,\n                ./images/440x560-33.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Cuissardes\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-33.webp\"\n              data-srcset=\"\n                ./images/220x280-33.webp 1x,\n                ./images/440x560-33.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-34.avif 1x,\n                ./images/440x560-34.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-34.webp\"\n              data-srcset=\"\n                ./images/220x280-34.webp 1x,\n                ./images/440x560-34.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-35.avif 1x,\n                ./images/440x560-35.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-35.webp\"\n              data-srcset=\"\n                ./images/220x280-35.webp 1x,\n                ./images/440x560-35.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-36.avif 1x,\n                ./images/440x560-36.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-36.webp\"\n              data-srcset=\"\n                ./images/220x280-36.webp 1x,\n                ./images/440x560-36.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-37.avif 1x,\n                ./images/440x560-37.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-37.webp\"\n              data-srcset=\"\n                ./images/220x280-37.webp 1x,\n                ./images/440x560-37.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-38.avif 1x,\n                ./images/440x560-38.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-38.webp\"\n              data-srcset=\"\n                ./images/220x280-38.webp 1x,\n                ./images/440x560-38.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-39.avif 1x,\n                ./images/440x560-39.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-39.webp\"\n              data-srcset=\"\n                ./images/220x280-39.webp 1x,\n                ./images/440x560-39.webp 2x\n              \"\n            />\n          </picture>\n        </li>\n        <li>\n          <picture>\n            <source\n              type=\"image/avif\"\n              data-srcset=\"\n                ./images/220x280-40.avif 1x,\n                ./images/440x560-40.avif 2x\n              \"\n            />\n            <img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              width=\"220\"\n              height=\"280\"\n              data-src=\"./images/220x280-40.webp\"\n              data-srcset=\"\n                ./images/220x280-40.webp 1x,\n\t\t\t\t\t\t\t  ./images/440x560-40.webp 2x\n\t\t\t\t\t\t\t\"\n            />\n          </picture>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src = \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        ll = new LazyLoad({\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/popup_layer.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Popup layer - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      @import url(https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css);\n\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      .results-popup {\n        background-color: #fff;\n        max-width: 600px;\n        margin: 0 auto;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Popup layer demo</h1>\n    <button id=\"openMagnific\">Open magnific popup</button>\n    <div id=\"results1\" class=\"results-popup mfp-hide\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-04.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-06.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-08.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-09.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-10.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-11.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-12.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-13.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-14.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-15.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-16.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-17.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-18.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-19.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              alt=\"Francesine\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-20.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-21.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-22.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-23.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-24.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-25.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-26.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-27.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-28.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-29.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-30.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-31.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-32.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              alt=\"Cuissardes\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-33.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-34.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-35.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-36.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-37.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-38.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-39.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-40.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js\"></script>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js\"></script>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      function logElementEvent(eventName, element) {\n        console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n      }\n\n      var callback_enter = function (element) {\n        logElementEvent(\"🔑 ENTERED\", element);\n      };\n      var callback_exit = function (element) {\n        logElementEvent(\"🚪 EXITED\", element);\n      };\n      var callback_loading = function (element) {\n        logElementEvent(\"⌚ LOADING\", element);\n      };\n      var callback_loaded = function (element) {\n        logElementEvent(\"👍 LOADED\", element);\n      };\n      var callback_error = function (element) {\n        logElementEvent(\"💀 ERROR\", element);\n        element.src =\n          \"./images/440x560-Error.webp\";\n      };\n      var callback_finish = function () {\n        logElementEvent(\"✔️ FINISHED\", document.documentElement);\n      };\n      var callback_cancel = function (element) {\n        logElementEvent(\"🔥 CANCEL\", element);\n      };\n\n      $(\"#openMagnific\").magnificPopup({\n        items: {\n          src: \"#results1\",\n          type: \"inline\"\n        },\n        callbacks: {\n          open: function () {\n            $(\"#results1\").show();\n            new LazyLoad({\n              // Assign the callbacks defined above\n              callback_enter: callback_enter,\n              callback_exit: callback_exit,\n              callback_cancel: callback_cancel,\n              callback_loading: callback_loading,\n              callback_loaded: callback_loaded,\n              callback_error: callback_error,\n              callback_finish: callback_finish\n            });\n          }\n        }\n      });\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/print.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Print - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      body {\n        margin: 0;\n      }\n\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      .topBar {\n        position: fixed;\n        padding: 10px;\n        background-image: linear-gradient(to top, #fff3, #ffff);\n        top: 0;\n        right: 0;\n        left: 0;\n      }\n\n      .topBar button {\n        background-color: rgb(0, 157, 255);\n        background-image: linear-gradient(to bottom, #0000, #0003);\n        color: white;\n        padding: 10px;\n        font-size: 16px;\n        width: 100%;\n        max-width: 400px;\n        display: block;\n        min-height: 48px;\n        box-sizing: border-box;\n      }\n\n      .topBar button:disabled {\n        opacity: 0.5;\n      }\n\n      @media print {\n        .topBar {\n          display: none;\n        }\n      }\n\n      /* Fixes Firefox anomaly during image load */\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Print demo</h1>\n    <div class=\"topBar\">\n      <button class=\"print\">🖨️ ️Print</button>\n    </div>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\">\n            <img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\">\n            <img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis\"\n              src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-04.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-06.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-08.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\">\n            <img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-09.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\">\n            <img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-10.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-11.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-12.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\">\n            <img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-13.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-14.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-15.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-16.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-17.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-18.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-19.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\">\n            <img\n              alt=\"Francesine\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-20.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-21.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-22.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-23.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-24.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\">\n            <img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-25.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-26.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-27.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-28.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-29.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-30.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-31.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-32.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\">\n            <img\n              alt=\"Cuissardes\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-33.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\">\n            <img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-34.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\">\n            <img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-35.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-36.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-37.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\">\n            <img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-38.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-39.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\">\n            <img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              data-src=\"./images/440x560-40.webp\"\n              width=\"220\"\n              height=\"280\"\n            />\n          </a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      /*\n\t\t\tCALLBACKS DEFINITION\n\t\t\t--------------------\n\t\t\tOne definition to rule all demos */\n\n      function logElementEvent(eventName, element) {\n        console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n      }\n\n      var callback_enter = function (element) {\n        logElementEvent(\"🔑 ENTERED\", element);\n      };\n      var callback_exit = function (element) {\n        logElementEvent(\"🚪 EXITED\", element);\n      };\n      var callback_loading = function (element) {\n        logElementEvent(\"⌚ LOADING\", element);\n      };\n      var callback_loaded = function (element) {\n        logElementEvent(\"👍 LOADED\", element);\n      };\n      var callback_error = function (element) {\n        logElementEvent(\"💀 ERROR\", element);\n        element.src =\n          \"./images/440x560-Error.webp\";\n      };\n      var callback_cancel = function (element) {\n        logElementEvent(\"🔥 CANCEL\", element);\n      };\n      var callback_finish = function () {\n        logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        // Open print dialog here!\n        allLoaded = true;\n        if (printRequested) {\n          openPrintDialog();\n        }\n      };\n\n      /*\n        CUSTOM PRINT BUTTON MANAGEMENT \n        ------------------------------\n        The best way to print it is to provide a custom button which \n        first download all the remaining images, then open the print dialog */\n\n      var printRequested = false;\n      var allLoaded = false;\n\n      function printButtonHandler(event) {\n        printButton.innerHTML = \"Preparing...\";\n        printButton.disabled = true;\n        if (allLoaded) {\n          openPrintDialog();\n        } else {\n          printRequested = true;\n          wLazyLoad.loadAll();\n        }\n      }\n\n      function openPrintDialog() {\n        printButton.innerHTML = printButtonContent;\n        printButton.disabled = false;\n        window.print();\n      }\n\n      var printButton = document.querySelector(\".print\");\n      printButtonContent = printButton.innerHTML;\n      printButton.addEventListener(\"click\", printButtonHandler);\n\n      /*\n        LAZYLOAD DEFINITION\n        -------------------\n        Global instance of LazyLoad in wLazyLoad,\n        used to call the loadAll method in different points\t*/\n\n      var wLazyLoad = new LazyLoad({\n        // Assign the callbacks defined above\n        callback_enter: callback_enter,\n        callback_exit: callback_exit,\n        callback_cancel: callback_cancel,\n        callback_loading: callback_loading,\n        callback_loaded: callback_loaded,\n        callback_error: callback_error,\n        callback_finish: callback_finish\n      });\n\n      /* \n\t\t\tBROWSER'S NATIVE PRINT EVENTS LISTENERS\n\t\t\t--------------------------------------- \n\t\t\tIn order to make browsers load all the images before printing\n\t\t\teven if the user doesn't press the custom print button. \n\t\t\tNOTE that this works only partially in some browsers! */\n\n      var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n      if (!isSafari) {\n        window.onbeforeprint = function () {\n          wLazyLoad.loadAll();\n        };\n      } else {\n        // Safari doesn't support the onbeforeprint event\n        var mediaQueryList = window.matchMedia(\"print\");\n        mediaQueryList.addListener(function (mql) {\n          if (mql.matches) {\n            wLazyLoad.loadAll();\n          }\n        });\n      }\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/restore_destroy.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>Restore and Destroy - Lazyload demos</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      .buttons {\n        position: fixed;\n        bottom: 10px;\n        left: 50%;\n        margin-left: -10em;\n      }\n      .buttons button {\n        height: 3em;\n        width: 10em;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Restore and Destroy demo</h1>\n    <div class=\"buttons\">\n      <button id=\"restore\">Restore</button>\n      <button id=\"destroy\">Destroy</button>\n    </div>\n    <div id=\"results1\" class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              alt=\"Stivaletti\"\n              src=\"./images/440x560-01.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              alt=\"Open toe\"\n              src=\"./images/440x560-02.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis\"\n              data-src=\"./images/440x560-03.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-04.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-05.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              data-src=\"./images/440x560-06.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-07.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-08.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-09.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-10.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-11.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-12.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-13.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-14.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-15.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-16.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-17.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-18.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-19.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Francesine\"\n              data-src=\"./images/440x560-20.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-21.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-22.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-23.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-24.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivali\"\n              data-src=\"./images/440x560-25.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-26.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-27.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-28.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-29.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-30.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-31.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-32.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Cuissardes\"\n              data-src=\"./images/440x560-33.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Décolleté\"\n              data-src=\"./images/440x560-34.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Stivaletti\"\n              data-src=\"./images/440x560-35.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-36.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-37.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              data-src=\"./images/440x560-38.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-39.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              class=\"lazy\"\n              alt=\"Mocassini\"\n              data-src=\"./images/440x560-40.webp\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n      </ul>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src = \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        ll = new LazyLoad({\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish\n        });\n\n        var destroyButton = document.getElementById(\"destroy\");\n\n        destroyButton.addEventListener(\"click\", function () {\n          destroyButton.disabled = true;\n          destroyButton.innerText = \"Waiting...\";\n          var destroyInterval = setInterval(function () {\n            if (ll.loadingCount > 0) return; // EXIT CONDITION\n            clearInterval(destroyInterval);\n            ll.destroy();\n            ll = null;\n            destroyButton.innerText = \"Destroyed\";\n          }, 250);\n        });\n\n        var restoreButton = document.getElementById(\"restore\");\n        restoreButton.addEventListener(\"click\", function () {\n          restoreButton.disabled = true;\n          restoreButton.innerText = \"Waiting...\";\n          var restoreInterval = setInterval(function () {\n            if (ll.loadingCount > 0) return; // EXIT CONDITION\n            clearInterval(restoreInterval);\n            ll.restoreAll();\n            restoreButton.disabled = false;\n            restoreButton.innerText = \"Restore\";\n          }, 250);\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/sliders_css_only.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>Swipey CSS only - Lazyload demos</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      .slider {\n        width: 100%;\n        height: 280px;\n        margin-bottom: 40px;\n      }\n\n      .slider-wrapper {\n        overflow-x: scroll;\n        scroll-snap-type: x mandatory;\n        scroll-snap-align: start;\n        display: flex;\n        gap: 20px;\n      }\n\n      .slider-slide {\n        width: 220px;\n      }\n\n      .slider-slide img {\n        display: block;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Swipey, CSS only</h1>\n    <p>First slider</p>\n    <div class=\"slider\">\n      <div class=\"slider-wrapper\">\n        <div class=\"slider-slide\">\n          <img\n            alt=\"Stivaletti\"\n            src=\"./images/220x280-01.webp\"\n            srcset=\"./images/440x560-01.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide\">\n          <img\n            alt=\"Stivaletti\"\n            src=\"./images/220x280-02.webp\"\n            srcset=\"./images/440x560-02.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-03.webp\"\n            data-srcset=\"./images/440x560-03.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-04.webp\"\n            data-srcset=\"./images/440x560-04.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-05.webp\"\n            data-srcset=\"./images/440x560-05.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <p>Second slider</p>\n    <div class=\"slider\">\n      <div class=\"slider-wrapper\">\n        <div class=\"slider-slide\">\n          <img\n            alt=\"Stivaletti\"\n            src=\"./images/220x280-01.webp\"\n            srcset=\"./images/440x560-01.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide\">\n          <img\n            alt=\"Stivaletti\"\n            src=\"./images/220x280-02.webp\"\n            srcset=\"./images/440x560-02.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-03.webp\"\n            data-srcset=\"./images/440x560-03.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-04.webp\"\n            data-srcset=\"./images/440x560-04.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-05.webp\"\n            data-srcset=\"./images/440x560-05.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <p>Another slider</p>\n    <div class=\"slider\">\n      <div class=\"slider-wrapper\">\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-01.webp\"\n            data-srcset=\"./images/440x560-01.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-02.webp\"\n            data-srcset=\"./images/440x560-02.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-03.webp\"\n            data-srcset=\"./images/440x560-03.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-04.webp\"\n            data-srcset=\"./images/440x560-04.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-05.webp\"\n            data-srcset=\"./images/440x560-05.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <p>Yet another slider</p>\n    <div class=\"slider\">\n      <div class=\"slider-wrapper\">\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-01.webp\"\n            data-srcset=\"./images/440x560-01.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-02.webp\"\n            data-srcset=\"./images/440x560-02.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-03.webp\"\n            data-srcset=\"./images/440x560-03.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-04.webp\"\n            data-srcset=\"./images/440x560-04.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-05.webp\"\n            data-srcset=\"./images/440x560-05.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <p>And yet another yet another slider</p>\n    <div class=\"slider\">\n      <div class=\"slider-wrapper\">\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-01.webp\"\n            data-srcset=\"./images/440x560-01.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-02.webp\"\n            data-srcset=\"./images/440x560-02.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-03.webp\"\n            data-srcset=\"./images/440x560-03.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-04.webp\"\n            data-srcset=\"./images/440x560-04.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"slider-slide slider-slide--lazy\">\n          <img\n            alt=\"Stivaletti\"\n            data-src=\"./images/220x280-05.webp\"\n            data-srcset=\"./images/440x560-05.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n      </div>\n    </div>\n\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      const lazysliders = new LazyLoad({\n        elements_selector: \".slider-slide--lazy img\"\n      });\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/swiper.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>Swiper lazily initialized - Lazyload demos</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <link rel=\"stylesheet\" href=\"https://unpkg.com/swiper@7/swiper-bundle.min.css\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      .swiper {\n        width: 100%;\n        height: 280px;\n      }\n\n      .swiper-slide {\n        width: 220px;\n        margin-right: 20px;\n      }\n\n      .swiper-slide img {\n        display: block;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Swiper lazily initialized</h1>\n    <p>This is an eagerly loaded swiper</p>\n    <div class=\"swiper swiper--eager\">\n      <div class=\"swiper-wrapper\">\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            src=\"./images/220x280-01.webp\"\n            srcset=\"./images/440x560-01.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            src=\"./images/220x280-02.webp\"\n            srcset=\"./images/440x560-02.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-03.webp\"\n            data-srcset=\"./images/440x560-03.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-04.webp\"\n            data-srcset=\"./images/440x560-04.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-05.webp\"\n            data-srcset=\"./images/440x560-05.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n      </div>\n      <div class=\"swiper-button-prev\"></div>\n      <div class=\"swiper-button-next\"></div>\n    </div>\n\n    <p>Following, more lazily loaded swipers</p>\n    <div class=\"swiper swiper--lazy\" id=\"swiperLazy1\">\n      <div class=\"swiper-wrapper\">\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-01.webp\"\n            data-srcset=\"./images/440x560-01.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-02.webp\"\n            data-srcset=\"./images/440x560-02.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-03.webp\"\n            data-srcset=\"./images/440x560-03.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-04.webp\"\n            data-srcset=\"./images/440x560-04.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-05.webp\"\n            data-srcset=\"./images/440x560-05.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n      </div>\n      <div class=\"swiper-button-prev\"></div>\n      <div class=\"swiper-button-next\"></div>\n    </div>\n\n    <p>Another lazy swiper</p>\n    <div class=\"swiper swiper--lazy\" id=\"swiperLazy2\">\n      <div class=\"swiper-wrapper\">\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-01.webp\"\n            data-srcset=\"./images/440x560-01.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-02.webp\"\n            data-srcset=\"./images/440x560-02.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-03.webp\"\n            data-srcset=\"./images/440x560-03.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-04.webp\"\n            data-srcset=\"./images/440x560-04.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-05.webp\"\n            data-srcset=\"./images/440x560-05.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n      </div>\n      <div class=\"swiper-button-prev\"></div>\n      <div class=\"swiper-button-next\"></div>\n    </div>\n\n    <p>Yet another lazy swiper</p>\n    <div class=\"swiper swiper--lazy\" id=\"swiperLazy3\">\n      <div class=\"swiper-wrapper\">\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-01.webp\"\n            data-srcset=\"./images/440x560-01.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-02.webp\"\n            data-srcset=\"./images/440x560-02.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-03.webp\"\n            data-srcset=\"./images/440x560-03.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-04.webp\"\n            data-srcset=\"./images/440x560-04.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-05.webp\"\n            data-srcset=\"./images/440x560-05.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n      </div>\n      <div class=\"swiper-button-prev\"></div>\n      <div class=\"swiper-button-next\"></div>\n    </div>\n\n    <p>And yet another yet another lazy swiper</p>\n    <div class=\"swiper swiper--lazy\" id=\"swiperLazy4\">\n      <div class=\"swiper-wrapper\">\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-01.webp\"\n            data-srcset=\"./images/440x560-01.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-02.webp\"\n            data-srcset=\"./images/440x560-02.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-03.webp\"\n            data-srcset=\"./images/440x560-03.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-04.webp\"\n            data-srcset=\"./images/440x560-04.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n        <div class=\"swiper-slide\">\n          <img\n            alt=\"Stivaletti\"\n            class=\"lazy\"\n            data-src=\"./images/220x280-05.webp\"\n            data-srcset=\"./images/440x560-05.webp 2x\"\n            width=\"220\"\n            height=\"280\"\n          />\n        </div>\n      </div>\n      <div class=\"swiper-button-prev\"></div>\n      <div class=\"swiper-button-next\"></div>\n    </div>\n\n    <script src=\"https://unpkg.com/swiper@7/swiper-bundle.min.js\"></script>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      const swiperOptions = {\n        loop: true,\n        slidesPerView: \"auto\",\n        navigation: {\n          nextEl: \".swiper-button-next\",\n          prevEl: \".swiper-button-prev\"\n        },\n        on: {\n          // LazyLoad swiper images after swiper initialization\n          afterInit: (swiper) => {\n            new LazyLoad({\n              container: swiper.el,\n              cancel_on_exit: false\n            });\n          }\n        }\n      };\n\n      // Initialize the first swiper right away\n      const eagerSwiper = new Swiper(\".swiper--eager\", swiperOptions);\n\n      // Initialize all other swipers as they enter the viewport\n      new LazyLoad({\n        elements_selector: \".swiper--lazy\",\n        unobserve_entered: true,\n        callback_enter: function (swiperElement) {\n          new Swiper(\"#\" + swiperElement.id, swiperOptions);\n        }\n      });\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/thresholds.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>\n      Threshold and thresholds - Lazyload demos\n    </title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style type=\"text/css\">\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      .columns {\n        display: flex;\n      }\n\n      .columns > div {\n        flex-grow: 1;\n      }\n\n      .results {\n        height: 564px;\n        overflow: scroll;\n        border: 1px dotted #f00;\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Threshold and thresholds demo</h1>\n    <div class=\"columns\">\n      <div>\n        <button class=\"loadBtn\" onclick=\"ll1()\">Start LL1</button>\n        <div id=\"results1\" class=\"results\">\n          <ul>\n            <li>\n              <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n                ><img\n                  alt=\"Stivaletti\"\n                  src=\"./images/440x560-01.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n                ><img\n                  alt=\"Open toe\"\n                  src=\"./images/440x560-02.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a\n                href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n                ><img\n                  alt=\"Sneakers &amp; Tennis\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-03.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a\n                href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n                ><img\n                  alt=\"Sneakers &amp; Tennis shoes basse\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-04.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n                ><img\n                  alt=\"Sneakers &amp; Tennis shoes alte\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-05.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n                ><img\n                  alt=\"Sneakers &amp; Tennis shoes alte\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-06.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a\n                href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n                ><img\n                  alt=\"Sneakers &amp; Tennis shoes basse\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-07.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a\n                href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n                ><img\n                  alt=\"Sneakers &amp; Tennis shoes basse\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-08.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n                ><img\n                  alt=\"Stivali\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-09.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n                ><img\n                  alt=\"Stivali\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-10.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n                ><img\n                  alt=\"Stivaletti\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-11.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n                ><img\n                  alt=\"Stivaletti\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-12.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div>\n        <button class=\"loadBtn\" onclick=\"ll2()\">Start LL2</button>\n        <div id=\"results2\" class=\"results\">\n          <ul>\n            <li>\n              <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n                ><img\n                  alt=\"Francesine\"\n                  src=\"./images/440x560-13.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n                ><img\n                  alt=\"Stivaletti\"\n                  src=\"./images/440x560-14.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n                ><img\n                  alt=\"Décolleté\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-15.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n                ><img\n                  alt=\"Mocassini\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-16.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n                ><img\n                  alt=\"Mocassini\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-17.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n                ><img\n                  alt=\"Stivali\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-18.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n                ><img\n                  alt=\"Stivaletti\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-19.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n                ><img\n                  alt=\"Stivaletti\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-20.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n                ><img\n                  alt=\"Mocassini\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-21.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n                ><img\n                  alt=\"Stivaletti\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-22.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n                ><img\n                  alt=\"Stivaletti\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-23.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n                ><img\n                  alt=\"Stivaletti\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-24.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n                ><img\n                  alt=\"Stivaletti\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-25.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n                ><img\n                  alt=\"Cuissardes\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-26.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n          </ul>\n        </div>\n      </div>\n      <div>\n        <button class=\"loadBtn\" onclick=\"ll3()\">Start LL3</button>\n        <div id=\"results3\" class=\"results\">\n          <ul>\n            <li>\n              <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n                ><img\n                  alt=\"Décolleté\"\n                  src=\"./images/440x560-27.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n                ><img\n                  alt=\"Stivaletti\"\n                  src=\"./images/440x560-28.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a\n                href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n                ><img\n                  alt=\"Sneakers &amp; Tennis shoes basse\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-29.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n                ><img\n                  alt=\"Mocassini\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-30.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a\n                href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n                ><img\n                  alt=\"Sneakers &amp; Tennis shoes basse\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-31.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n                ><img\n                  alt=\"Mocassini\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-32.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n                ><img\n                  alt=\"Mocassini\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-33.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/stivali_cod44719480km.html\"\n                ><img\n                  alt=\"Stivali\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-34.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n                ><img\n                  alt=\"Stivaletti\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-35.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n                ><img\n                  alt=\"Décolleté\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-36.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n                ><img\n                  alt=\"Mocassini\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-37.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n                ><img\n                  alt=\"Stivaletti\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-38.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n                ><img\n                  alt=\"Décolleté\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-39.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n            <li>\n              <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n                ><img\n                  alt=\"Décolleté\"\n                  class=\"lazy\"\n                  data-src=\"./images/440x560-40.webp\"\n                  width=\"220\"\n                  height=\"280\"\n              /></a>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src =\n            \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        window.ll1 = function () {\n          new LazyLoad({\n            container: document.getElementById(\"results1\"),\n            thresholds: \"200% 0px\",\n            // Assign the callbacks defined above\n            callback_enter: callback_enter,\n            callback_exit: callback_exit,\n            callback_cancel: callback_cancel,\n            callback_loading: callback_loading,\n            callback_loaded: callback_loaded,\n            callback_error: callback_error,\n            callback_finish: callback_finish\n          });\n        };\n        window.ll2 = function () {\n          new LazyLoad({\n            container: document.getElementById(\"results2\"),\n            thresholds: \"0px\",\n            // Assign the callbacks defined above\n            callback_enter: callback_enter,\n            callback_exit: callback_exit,\n            callback_cancel: callback_cancel,\n            callback_loading: callback_loading,\n            callback_loaded: callback_loaded,\n            callback_error: callback_error,\n            callback_finish: callback_finish\n          });\n        };\n        window.ll3 = function () {\n          new LazyLoad({\n            container: document.getElementById(\"results3\"),\n            threshold: 200,\n            // Assign the callbacks defined above\n            callback_enter: callback_enter,\n            callback_exit: callback_exit,\n            callback_cancel: callback_cancel,\n            callback_loading: callback_loading,\n            callback_loaded: callback_loaded,\n            callback_error: callback_error,\n            callback_finish: callback_finish\n          });\n        };\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/video.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>Lazy video - Lazyload demos</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n      .viewport-height {\n        min-height: calc(100vh + 300px);\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Lazy video demo - NO autoplay</h1>\n    <p>👇🏼 Scroll down to see the lazy videos 👇🏼</p>\n    <div class=\"viewport-height\"></div>\n\n    <h2>Preload = none</h2>\n    <video\n      class=\"lazy\"\n      controls\n      preload=\"none\"\n      width=\"620\"\n      data-src=\"./videos/1920x1080-01.mp4\"\n      data-poster=\"./videos/1920x1080-01.webp\"\n    >\n      <source type=\"video/mp4\" data-src=\"./videos/1920x1080-01.mp4\" />\n      <source type=\"video/ogg\" data-src=\"./videos/1920x1080-01.ogv\" />\n      <source type=\"video/avi\" data-src=\"./videos/1920x1080-01.avi\" />\n    </video>\n\n    <h2>Preload = metadata</h2>\n    <video\n      class=\"lazy\"\n      preload=\"metadata\"\n      controls\n      width=\"620\"\n      data-src=\"./videos/1920x1080-02.mp4\"\n      data-poster=\"./videos/1920x1080-02.webp\"\n    >\n      <source type=\"video/mp4\" data-src=\"./videos/1920x1080-02.mp4\" />\n      <source type=\"video/ogg\" data-src=\"./videos/1920x1080-02.ogv\" />\n      <source type=\"video/avi\" data-src=\"./videos/1920x1080-02.avi\" />\n    </video>\n\n    <h2>Preload = auto</h2>\n    <video\n      class=\"lazy\"\n      preload=\"auto\"\n      controls\n      width=\"620\"\n      data-src=\"./videos/1920x1080-03.mp4\"\n      data-poster=\"./videos/1920x1080-03.webp\"\n    >\n      <source type=\"video/mp4\" data-src=\"./videos/1920x1080-03.mp4\" />\n      <source type=\"video/ogg\" data-src=\"./videos/1920x1080-03.ogv\" />\n      <source type=\"video/avi\" data-src=\"./videos/1920x1080-03.avi\" />\n    </video>\n\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src = \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        ll = new LazyLoad({\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish,\n          // For debugging purposes\n          threshold: 0\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "demos/video_autoplay.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>Lazy autoplay video - Lazyload demos</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n      .viewport-height {\n        min-height: calc(100vh + 300px);\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Lazy video demo, with autoplay</h1>\n    <p>👇🏼 Scroll down to see the lazy videos 👇🏼</p>\n    <div class=\"viewport-height\"></div>\n\n    <h2>Preload = none</h2>\n    <video\n      class=\"lazy\"\n      controls\n      autoplay\n      preload=\"none\"\n      width=\"620\"\n      data-src=\"./videos/1920x1080-01.mp4\"\n      data-poster=\"./videos/1920x1080-01.webp\"\n    >\n      <source type=\"video/mp4\" data-src=\"./videos/1920x1080-01.mp4\" />\n      <source type=\"video/ogg\" data-src=\"./videos/1920x1080-01.ogv\" />\n      <source type=\"video/avi\" data-src=\"./videos/1920x1080-01.avi\" />\n    </video>\n\n    <h2>Preload = metadata</h2>\n    <video\n      class=\"lazy\"\n      preload=\"metadata\"\n      controls\n      autoplay\n      width=\"620\"\n      data-src=\"./videos/1920x1080-02.mp4\"\n      data-poster=\"./videos/1920x1080-02.webp\"\n    >\n      <source type=\"video/mp4\" data-src=\"./videos/1920x1080-02.mp4\" />\n      <source type=\"video/ogg\" data-src=\"./videos/1920x1080-02.ogv\" />\n      <source type=\"video/avi\" data-src=\"./videos/1920x1080-02.avi\" />\n    </video>\n\n    <h2>Preload = auto</h2>\n    <video\n      class=\"lazy\"\n      preload=\"auto\"\n      controls\n      autoplay\n      width=\"620\"\n      data-src=\"./videos/1920x1080-03.mp4\"\n      data-poster=\"./videos/1920x1080-03.webp\"\n    >\n      <source type=\"video/mp4\" data-src=\"./videos/1920x1080-03.mp4\" />\n      <source type=\"video/ogg\" data-src=\"./videos/1920x1080-03.ogv\" />\n      <source type=\"video/avi\" data-src=\"./videos/1920x1080-03.avi\" />\n    </video>\n\n    <script src=\"../dist/lazyload.min.js\"></script>\n    <script>\n      (function () {\n        function logElementEvent(eventName, element) {\n          console.log(Date.now(), eventName, element.getAttribute(\"data-src\"));\n        }\n\n        var callback_enter = function (element) {\n          logElementEvent(\"🔑 ENTERED\", element);\n        };\n        var callback_exit = function (element) {\n          logElementEvent(\"🚪 EXITED\", element);\n        };\n        var callback_loading = function (element) {\n          logElementEvent(\"⌚ LOADING\", element);\n        };\n        var callback_loaded = function (element) {\n          logElementEvent(\"👍 LOADED\", element);\n        };\n        var callback_error = function (element) {\n          logElementEvent(\"💀 ERROR\", element);\n          element.src = \"./images/440x560-Error.webp\";\n        };\n        var callback_finish = function () {\n          logElementEvent(\"✔️ FINISHED\", document.documentElement);\n        };\n        var callback_cancel = function (element) {\n          logElementEvent(\"🔥 CANCEL\", element);\n        };\n\n        ll = new LazyLoad({\n          // Assign the callbacks defined above\n          callback_enter: callback_enter,\n          callback_exit: callback_exit,\n          callback_cancel: callback_cancel,\n          callback_loading: callback_loading,\n          callback_loaded: callback_loaded,\n          callback_error: callback_error,\n          callback_finish: callback_finish,\n          // For debugging purposes\n          threshold: 0\n        });\n      })();\n    </script>\n  </body>\n</html>\n"
  },
  {
    "path": "dist/esm/autoInitialize.js",
    "content": "const t=function(t,e){let n;const i=\"LazyLoad::Initialized\",o=new t(e);try{n=new CustomEvent(i,{detail:{instance:o}})}catch(t){n=document.createEvent(\"CustomEvent\"),n.initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(n)},e=(e,n)=>{if(n)if(n.length)for(let i,o=0;i=n[o];o+=1)t(e,i);else t(e,n)};export{e as autoInitialize};\n"
  },
  {
    "path": "dist/esm/callback.js",
    "content": "const o=(o,t,i,n)=>{o&&\"function\"==typeof o&&(void 0===n?void 0===i?o(t):o(t,i):o(t,i,n))};export{o as safeCallback};\n"
  },
  {
    "path": "dist/esm/cancelOnExit.js",
    "content": "import{removeEventListeners as o}from\"./event.js\";import{resetSourcesImg as r}from\"./reset.js\";import{restoreImg as t}from\"./restore.js\";import{safeCallback as m}from\"./callback.js\";import{removeClass as s}from\"./class.js\";import{updateLoadingCount as a}from\"./counters.js\";import{hasStatusLoading as c,resetStatus as e}from\"./data.js\";const i=(i,l,p,f)=>{p.cancel_on_exit&&c(i)&&\"IMG\"===i.tagName&&(o(i),r(i),t(i),s(i,p.class_loading),a(f,-1),e(i),m(p.callback_cancel,i,l,f))};export{i as cancelLoading};\n"
  },
  {
    "path": "dist/esm/class.js",
    "content": "import{runningOnBrowser as s}from\"./environment.js\";const o=(o,t)=>{s&&\"\"!==t&&o.classList.add(t)},t=(o,t)=>{s&&\"\"!==t&&o.classList.remove(t)};export{o as addClass,t as removeClass};\n"
  },
  {
    "path": "dist/esm/constants.js",
    "content": "const s=\"src\",t=\"srcset\",r=\"sizes\",e=\"poster\",a=\"llOriginalAttrs\",c=\"data\";export{c as DATA,a as ORIGINALS,e as POSTER,r as SIZES,s as SRC,t as SRCSET};\n"
  },
  {
    "path": "dist/esm/counters.js",
    "content": "const o=(o,t)=>{o&&(o.loadingCount+=t)},t=o=>{o&&(o.toLoadCount-=1)},n=(o,t)=>{o&&(o.toLoadCount=t)},a=o=>o.loadingCount>0,d=o=>o.toLoadCount>0;export{t as decreaseToLoadCount,d as haveElementsToLoad,a as isSomethingLoading,n as setToLoadCount,o as updateLoadingCount};\n"
  },
  {
    "path": "dist/esm/data.js",
    "content": "import{statusNative as t,statusLoading as e,statusError as l,statusLoaded as u,statusApplied as n}from\"./elementStatus.js\";const r=\"data-\",s=\"ll-status\",o=(t,e)=>t.getAttribute(r+e),i=(t,e,l)=>{const u=r+e;null!==l?t.setAttribute(u,l):t.removeAttribute(u)},a=t=>o(t,s),m=(t,e)=>i(t,s,e),b=t=>m(t,null),A=t=>null===a(t),c=t=>a(t)===e,d=t=>a(t)===l,f=e=>a(e)===t,p=[e,u,n,l],x=t=>p.indexOf(a(t))>=0;export{o as getData,a as getStatus,x as hadStartedLoading,A as hasEmptyStatus,d as hasStatusError,c as hasStatusLoading,f as hasStatusNative,b as resetStatus,i as setData,m as setStatus};\n"
  },
  {
    "path": "dist/esm/defaults.js",
    "content": "import{isBot as l,runningOnBrowser as e}from\"./environment.js\";const a={elements_selector:\".lazy\",container:l||e?document:null,threshold:300,thresholds:null,data_src:\"src\",data_srcset:\"srcset\",data_sizes:\"sizes\",data_bg:\"bg\",data_bg_hidpi:\"bg-hidpi\",data_bg_multi:\"bg-multi\",data_bg_multi_hidpi:\"bg-multi-hidpi\",data_bg_set:\"bg-set\",data_poster:\"poster\",class_applied:\"applied\",class_loading:\"loading\",class_loaded:\"loaded\",class_error:\"error\",class_entered:\"entered\",class_exited:\"exited\",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1,restore_on_error:!1},t=l=>Object.assign({},a,l);export{t as getExtendedSettings};\n"
  },
  {
    "path": "dist/esm/dom.js",
    "content": "import{hasEmptyStatus as e,hasStatusError as r}from\"./data.js\";const t=e=>Array.prototype.slice.call(e),l=e=>e.container.querySelectorAll(e.elements_selector),o=r=>t(r).filter(e),c=e=>r(e),a=e=>t(e).filter(c),i=(e,r)=>o(e||l(r));export{o as excludeManagedElements,a as filterErrorElements,i as getElementsToLoad,c as hasError,l as queryElements,t as toArray};\n"
  },
  {
    "path": "dist/esm/elementStatus.js",
    "content": "const e=\"loading\",d=\"loaded\",o=\"applied\",r=\"entered\",a=\"error\",n=\"native\";export{o as statusApplied,r as statusEntered,a as statusError,d as statusLoaded,e as statusLoading,n as statusNative};\n"
  },
  {
    "path": "dist/esm/environment.js",
    "content": "const e=\"undefined\"!=typeof window,i=e&&!(\"onscroll\"in window)||\"undefined\"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),n=e&&window.devicePixelRatio>1;export{i as isBot,n as isHiDpi,e as runningOnBrowser};\n"
  },
  {
    "path": "dist/esm/event.js",
    "content": "import{addClass as r,removeClass as o}from\"./class.js\";import{safeCallback as s}from\"./callback.js\";import{hasStatusNative as e,setStatus as t}from\"./data.js\";import{statusLoaded as l,statusError as a}from\"./elementStatus.js\";import{getTempImage as n,deleteTempImage as i}from\"./tempImage.js\";import{unobserve as m}from\"./unobserve.js\";import{isSomethingLoading as c,haveElementsToLoad as d,updateLoadingCount as f,decreaseToLoadCount as p}from\"./counters.js\";import{restoreOriginalAttrs as E,attrsSrcSrcsetSizes as v}from\"./originalAttributes.js\";const _=[\"IMG\",\"IFRAME\",\"VIDEO\",\"OBJECT\"],j=r=>_.indexOf(r.tagName)>-1,b=(r,o)=>{!o||c(o)||d(o)||s(r.callback_finish,o)},L=(r,o,s)=>{r.addEventListener(o,s),r.llEvLisnrs[o]=s},u=(r,o,s)=>{r.removeEventListener(o,s)},g=r=>!!r.llEvLisnrs,I=(r,o,s)=>{g(r)||(r.llEvLisnrs={});const e=\"VIDEO\"===r.tagName?\"loadeddata\":\"load\";L(r,e,o),L(r,\"error\",s)},k=r=>{if(!g(r))return;const o=r.llEvLisnrs;for(let s in o){const e=o[s];u(r,s,e)}delete r.llEvLisnrs},O=(r,s,e)=>{i(r),f(e,-1),p(e),o(r,s.class_loading),s.unobserve_completed&&m(r,e)},x=(o,a,n,i)=>{const m=e(a);O(a,n,i),r(a,n.class_loaded),t(a,l),s(n.callback_loaded,a,i),m||b(n,i)},A=(o,l,n,i)=>{const m=e(l);O(l,n,i),r(l,n.class_error),t(l,a),s(n.callback_error,l,i),n.restore_on_error&&E(l,v),m||b(n,i)},D=(r,o,s)=>{const e=n(r)||r;g(e)||I(e,(t=>{x(0,r,o,s),k(e)}),(t=>{A(0,r,o,s),k(e)}))};export{L as addEventListener,I as addEventListeners,D as addOneShotEventListeners,b as checkFinish,O as doneHandler,A as errorHandler,g as hasEventListeners,j as hasLoadEvent,x as loadHandler,u as removeEventListener,k as removeEventListeners};\n"
  },
  {
    "path": "dist/esm/forEachSource.js",
    "content": "const e=e=>{let t=[];for(let r,a=0;r=e.children[a];a+=1)\"SOURCE\"===r.tagName&&t.push(r);return t},t=(t,r)=>{const a=t.parentNode;a&&\"PICTURE\"===a.tagName&&e(a).forEach(r)},r=(t,r)=>{e(t).forEach(r)};export{t as forEachPictureSource,r as forEachVideoSource};\n"
  },
  {
    "path": "dist/esm/intersectionHandlers.js",
    "content": "import{safeCallback as t}from\"./callback.js\";import{load as o}from\"./load.js\";import{hadStartedLoading as s,setStatus as r,hasEmptyStatus as e}from\"./data.js\";import{cancelLoading as a}from\"./cancelOnExit.js\";import{unobserveEntered as m}from\"./unobserve.js\";import{statusEntered as c}from\"./elementStatus.js\";import{addClass as l,removeClass as i}from\"./class.js\";const n=(e,a,n,p)=>{const f=s(e);r(e,c),l(e,n.class_entered),i(e,n.class_exited),m(e,n,p),t(n.callback_enter,e,a,p),f||o(e,n,p)},p=(o,s,r,m)=>{e(o)||(l(o,r.class_exited),a(o,s,r,m),t(r.callback_exit,o,s,m))};export{n as onEnter,p as onExit};\n"
  },
  {
    "path": "dist/esm/intersectionObserver.js",
    "content": "import{onEnter as r,onExit as e}from\"./intersectionHandlers.js\";import{shouldUseNative as o}from\"./native.js\";import{resetObserver as t}from\"./unobserve.js\";const n=r=>r.isIntersecting||r.intersectionRatio>0,s=(r,e)=>{e.forEach((e=>{r.observe(e)}))},i=(r,e)=>{t(r),s(r,e)},a=(t,s)=>{o(t)||(s._observer=new IntersectionObserver((o=>{((o,t,s)=>{o.forEach((o=>n(o)?r(o.target,o,t,s):e(o.target,o,t,s)))})(o,t,s)}),(r=>({root:r.container===document?null:r.container,rootMargin:r.thresholds||r.threshold+\"px\"}))(t)))};export{n as isIntersecting,s as observeElements,a as setObserver,i as updateObserver};\n"
  },
  {
    "path": "dist/esm/lazyload.js",
    "content": "import{getExtendedSettings as t}from\"./defaults.js\";import{autoInitialize as o}from\"./autoInitialize.js\";import{load as s}from\"./load.js\";import{setObserver as i,updateObserver as e}from\"./intersectionObserver.js\";import{runningOnBrowser as r,isBot as n}from\"./environment.js\";import{shouldUseNative as m,loadAllNative as h}from\"./native.js\";import{setOnlineCheck as l,resetOnlineCheck as a}from\"./online.js\";import{getElementsToLoad as d,queryElements as f}from\"./dom.js\";import{resetStatus as p}from\"./data.js\";import{setToLoadCount as c}from\"./counters.js\";import{unobserve as u}from\"./unobserve.js\";import{restore as j}from\"./restore.js\";import{deleteOriginalAttrs as _}from\"./originalAttributes.js\";const g=function(o,s){const e=t(o);this._settings=e,this.loadingCount=0,i(e,this),l(e,this),this.update(s)};g.prototype={update:function(t){const o=this._settings,s=d(t,o);c(this,s.length),n?this.loadAll(s):m(o)?h(s,o,this):e(this._observer,s)},destroy:function(){this._observer&&this._observer.disconnect(),a(this),f(this._settings).forEach((t=>{_(t)})),delete this._observer,delete this._settings,delete this._onlineHandler,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){const o=this._settings;d(t,o).forEach((t=>{u(t,this),s(t,o,this)}))},restoreAll:function(){const t=this._settings;f(t).forEach((o=>{j(o,t)}))}},g.load=(o,i)=>{const e=t(i);s(o,e)},g.resetStatus=t=>{p(t)},r&&o(g,window.lazyLoadOptions);export{g as default};\n"
  },
  {
    "path": "dist/esm/load.js",
    "content": "import{setBackground as t,setMultiBackground as o,setImgsetBackground as r,setSources as m,setSourcesNative as e}from\"./set.js\";import{setStatus as i}from\"./data.js\";import{hasLoadEvent as s,addOneShotEventListeners as p}from\"./event.js\";import{statusNative as a}from\"./elementStatus.js\";import{addTempImage as f}from\"./tempImage.js\";import{saveOriginalBackgroundStyle as j}from\"./originalAttributes.js\";const n=(e,i,a)=>{s(e)?((t,o,r)=>{p(t,o,r),m(t,o,r)})(e,i,a):((m,e,i)=>{f(m),p(m,e,i),j(m),t(m,e,i),o(m,e,i),r(m,e,i)})(e,i,a)},l=(t,o,r)=>{t.setAttribute(\"loading\",\"lazy\"),p(t,o,r),e(t,o),i(t,a)};export{n as load,l as loadNative};\n"
  },
  {
    "path": "dist/esm/native.js",
    "content": "import{loadNative as o}from\"./load.js\";import{setToLoadCount as e}from\"./counters.js\";const t=[\"IMG\",\"IFRAME\",\"VIDEO\"],r=o=>o.use_native&&\"loading\"in HTMLImageElement.prototype,a=(r,a,m)=>{r.forEach((e=>{-1!==t.indexOf(e.tagName)&&o(e,a,m)})),e(m,0)};export{a as loadAllNative,r as shouldUseNative};\n"
  },
  {
    "path": "dist/esm/online.js",
    "content": "import{runningOnBrowser as n}from\"./environment.js\";import{resetStatus as o}from\"./data.js\";import{removeClass as e}from\"./class.js\";import{filterErrorElements as r,queryElements as i}from\"./dom.js\";const t=(n,t)=>{r(i(n)).forEach((r=>{e(r,n.class_error),o(r)})),t.update()},m=(o,e)=>{n&&(e._onlineHandler=()=>{t(o,e)},window.addEventListener(\"online\",e._onlineHandler))},s=o=>{n&&window.removeEventListener(\"online\",o._onlineHandler)};export{s as resetOnlineCheck,t as retryLazyLoad,m as setOnlineCheck};\n"
  },
  {
    "path": "dist/esm/originalAttributes.js",
    "content": "import{ORIGINALS as t,SRC as e,POSTER as r,SRCSET as o,SIZES as n,DATA as a}from\"./constants.js\";const c=[e],s=[e,r],u=[e,o,n],g=[a],b=e=>!!e[t],i=e=>e[t],m=e=>delete e[t],f=(e,r)=>{if(b(e))return;const o={};r.forEach((t=>{o[t]=e.getAttribute(t)})),e[t]=o},d=e=>{b(e)||(e[t]={backgroundImage:e.style.backgroundImage})},k=(t,e)=>{if(!b(t))return;const r=i(t);e.forEach((e=>{((t,e,r)=>{r?t.setAttribute(e,r):t.removeAttribute(e)})(t,e,r[e])}))},I=t=>{if(!b(t))return;const e=i(t);t.style.backgroundImage=e.backgroundImage};export{g as attrsData,c as attrsSrc,s as attrsSrcPoster,u as attrsSrcSrcsetSizes,m as deleteOriginalAttrs,i as getOriginalAttrs,b as hasOriginalAttrs,k as restoreOriginalAttrs,I as restoreOriginalBgImage,d as saveOriginalBackgroundStyle,f as setOriginalsObject};\n"
  },
  {
    "path": "dist/esm/reset.js",
    "content": "import{SRC as t,SRCSET as r,SIZES as o}from\"./constants.js\";import{forEachPictureSource as e}from\"./forEachSource.js\";const m=e=>{e.removeAttribute(t),e.removeAttribute(r),e.removeAttribute(o)},i=t=>{e(t,(t=>{m(t)})),m(t)};export{i as resetSourcesImg};\n"
  },
  {
    "path": "dist/esm/restore.js",
    "content": "import{removeClass as s}from\"./class.js\";import{resetStatus as o,hasEmptyStatus as a,hasStatusNative as r}from\"./data.js\";import{forEachPictureSource as t,forEachVideoSource as e}from\"./forEachSource.js\";import{deleteOriginalAttrs as l,restoreOriginalBgImage as c,restoreOriginalAttrs as i,attrsSrcSrcsetSizes as m,attrsSrc as d,attrsSrcPoster as p,attrsData as _}from\"./originalAttributes.js\";const f=s=>{t(s,(s=>{i(s,m)})),i(s,m)},n=s=>{e(s,(s=>{i(s,d)})),i(s,p),s.load()},j=s=>{i(s,d)},E=s=>{i(s,_)},g={IMG:f,IFRAME:j,VIDEO:n,OBJECT:E},I=(t,e)=>{(s=>{const o=g[s.tagName];o?o(s):c(s)})(t),((o,t)=>{a(o)||r(o)||(s(o,t.class_entered),s(o,t.class_exited),s(o,t.class_applied),s(o,t.class_loading),s(o,t.class_loaded),s(o,t.class_error))})(t,e),o(t),l(t)};export{I as restore,j as restoreIframe,f as restoreImg,E as restoreObject,n as restoreVideo};\n"
  },
  {
    "path": "dist/esm/set.js",
    "content": "import{SRC as t,POSTER as a,DATA as s,SIZES as o,SRCSET as r}from\"./constants.js\";import{getData as e,setStatus as m}from\"./data.js\";import{statusApplied as i,statusLoading as c}from\"./elementStatus.js\";import{safeCallback as d}from\"./callback.js\";import{addClass as l}from\"./class.js\";import{getTempImage as n}from\"./tempImage.js\";import{isHiDpi as p}from\"./environment.js\";import{unobserve as _}from\"./unobserve.js\";import{updateLoadingCount as g}from\"./counters.js\";import{forEachPictureSource as b,forEachVideoSource as u}from\"./forEachSource.js\";import{setOriginalsObject as f,attrsSrcSrcsetSizes as j,attrsSrc as I,attrsSrcPoster as k,attrsData as A}from\"./originalAttributes.js\";const E=(t,a,s)=>{l(t,a.class_applied),m(t,i),s&&(a.unobserve_completed&&_(t,a),d(a.callback_applied,t,s))},h=(t,a,s)=>{l(t,a.class_loading),m(t,c),s&&(g(s,1),d(a.callback_loading,t,s))},v=(t,a,s)=>{s&&t.setAttribute(a,s)},y=(a,s)=>{v(a,o,e(a,s.data_sizes)),v(a,r,e(a,s.data_srcset)),v(a,t,e(a,s.data_src))},M=(t,a)=>{b(t,(t=>{f(t,j),y(t,a)})),f(t,j),y(t,a)},N=(a,s)=>{f(a,I),v(a,t,e(a,s.data_src))},O=(s,o)=>{u(s,(a=>{f(a,I),v(a,t,e(a,o.data_src))})),f(s,k),v(s,a,e(s,o.data_poster)),v(s,t,e(s,o.data_src)),s.load()},S=(t,a)=>{f(t,A),v(t,s,e(t,a.data_src))},$=(a,s,o)=>{const r=e(a,s.data_bg),m=e(a,s.data_bg_hidpi),i=p&&m?m:r;i&&(a.style.backgroundImage=`url(\"${i}\")`,n(a).setAttribute(t,i),h(a,s,o))},x=(t,a,s)=>{const o=e(t,a.data_bg_multi),r=e(t,a.data_bg_multi_hidpi),m=p&&r?r:o;m&&(t.style.backgroundImage=m,E(t,a,s))},z=(t,a,s)=>{const o=e(t,a.data_bg_set);if(!o)return;let r=o.split(\"|\").map((t=>`image-set(${t})`));t.style.backgroundImage=r.join(),E(t,a,s)},B={IMG:M,IFRAME:N,VIDEO:O,OBJECT:S},C=(t,a)=>{const s=B[t.tagName];s&&s(t,a)},D=(t,a,s)=>{const o=B[t.tagName];o&&(o(t,a),h(t,a,s))};export{E as manageApplied,h as manageLoading,v as setAttributeIfValue,$ as setBackground,y as setImageAttributes,z as setImgsetBackground,x as setMultiBackground,D as setSources,N as setSourcesIframe,M as setSourcesImg,C as setSourcesNative,S as setSourcesObject,O as setSourcesVideo};\n"
  },
  {
    "path": "dist/esm/tempImage.js",
    "content": "const e=e=>{e.llTempImage=document.createElement(\"IMG\")},l=e=>{delete e.llTempImage},m=e=>e.llTempImage;export{e as addTempImage,l as deleteTempImage,m as getTempImage};\n"
  },
  {
    "path": "dist/esm/unobserve.js",
    "content": "const e=(e,n)=>{if(!n)return;const r=n._observer;r&&r.unobserve(e)},n=e=>{e.disconnect()},r=(n,r,o)=>{r.unobserve_entered&&e(n,o)};export{n as resetObserver,e as unobserve,r as unobserveEntered};\n"
  },
  {
    "path": "dist/lazyload.iife.js",
    "content": "var LazyLoad = (function () {\n  'use strict';\n\n  const runningOnBrowser = typeof window !== \"undefined\";\n  const isBot = runningOnBrowser && !(\"onscroll\" in window) || typeof navigator !== \"undefined\" && /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);\n  const isHiDpi = runningOnBrowser && window.devicePixelRatio > 1;\n\n  const defaultSettings = {\n    elements_selector: \".lazy\",\n    container: isBot || runningOnBrowser ? document : null,\n    threshold: 300,\n    thresholds: null,\n    data_src: \"src\",\n    data_srcset: \"srcset\",\n    data_sizes: \"sizes\",\n    data_bg: \"bg\",\n    data_bg_hidpi: \"bg-hidpi\",\n    data_bg_multi: \"bg-multi\",\n    data_bg_multi_hidpi: \"bg-multi-hidpi\",\n    data_bg_set: \"bg-set\",\n    data_poster: \"poster\",\n    class_applied: \"applied\",\n    class_loading: \"loading\",\n    class_loaded: \"loaded\",\n    class_error: \"error\",\n    class_entered: \"entered\",\n    class_exited: \"exited\",\n    unobserve_completed: true,\n    unobserve_entered: false,\n    cancel_on_exit: true,\n    callback_enter: null,\n    callback_exit: null,\n    callback_applied: null,\n    callback_loading: null,\n    callback_loaded: null,\n    callback_error: null,\n    callback_finish: null,\n    callback_cancel: null,\n    use_native: false,\n    restore_on_error: false\n  };\n  const getExtendedSettings = customSettings => {\n    return Object.assign({}, defaultSettings, customSettings);\n  };\n\n  /* Creates instance and notifies it through the window element */\n  const createInstance = function (classObj, options) {\n    let event;\n    const eventString = \"LazyLoad::Initialized\";\n    const instance = new classObj(options);\n    try {\n      // Works in modern browsers\n      event = new CustomEvent(eventString, {\n        detail: {\n          instance\n        }\n      });\n    } catch (err) {\n      // Works in Internet Explorer (all versions)\n      event = document.createEvent(\"CustomEvent\");\n      event.initCustomEvent(eventString, false, false, {\n        instance\n      });\n    }\n    window.dispatchEvent(event);\n  };\n\n  /* Auto initialization of one or more instances of LazyLoad, depending on the\n      options passed in (plain object or an array) */\n  const autoInitialize = (classObj, options) => {\n    if (!options) {\n      return;\n    }\n    if (!options.length) {\n      // Plain object\n      createInstance(classObj, options);\n    } else {\n      // Array of objects\n      for (let i = 0, optionsItem; optionsItem = options[i]; i += 1) {\n        createInstance(classObj, optionsItem);\n      }\n    }\n  };\n\n  const SRC = \"src\";\n  const SRCSET = \"srcset\";\n  const SIZES = \"sizes\";\n  const POSTER = \"poster\";\n  const ORIGINALS = \"llOriginalAttrs\";\n  const DATA = \"data\";\n\n  const statusLoading = \"loading\";\n  const statusLoaded = \"loaded\";\n  const statusApplied = \"applied\";\n  const statusEntered = \"entered\";\n  const statusError = \"error\";\n  const statusNative = \"native\";\n\n  const dataPrefix = \"data-\";\n  const statusDataName = \"ll-status\";\n  const getData = (element, attribute) => {\n    return element.getAttribute(dataPrefix + attribute);\n  };\n  const setData = (element, attribute, value) => {\n    const attrName = dataPrefix + attribute;\n    if (value === null) {\n      element.removeAttribute(attrName);\n      return;\n    }\n    element.setAttribute(attrName, value);\n  };\n  const getStatus = element => getData(element, statusDataName);\n  const setStatus = (element, status) => setData(element, statusDataName, status);\n  const resetStatus = element => setStatus(element, null);\n  const hasEmptyStatus = element => getStatus(element) === null;\n  const hasStatusLoading = element => getStatus(element) === statusLoading;\n  const hasStatusError = element => getStatus(element) === statusError;\n  const hasStatusNative = element => getStatus(element) === statusNative;\n  const statusesAfterLoading = [statusLoading, statusLoaded, statusApplied, statusError];\n  const hadStartedLoading = element => statusesAfterLoading.indexOf(getStatus(element)) >= 0;\n\n  const safeCallback = (callback, arg1, arg2, arg3) => {\n    if (!callback || typeof callback !== 'function') {\n      return;\n    }\n    if (arg3 !== undefined) {\n      callback(arg1, arg2, arg3);\n      return;\n    }\n    if (arg2 !== undefined) {\n      callback(arg1, arg2);\n      return;\n    }\n    callback(arg1);\n  };\n\n  const addClass = (element, className) => {\n    if (!runningOnBrowser) {\n      return;\n    }\n    if (className === \"\") {\n      return;\n    }\n    element.classList.add(className);\n  };\n  const removeClass = (element, className) => {\n    if (!runningOnBrowser) {\n      return;\n    }\n    if (className === \"\") {\n      return;\n    }\n    element.classList.remove(className);\n  };\n\n  const addTempImage = element => {\n    element.llTempImage = document.createElement(\"IMG\");\n  };\n  const deleteTempImage = element => {\n    delete element.llTempImage;\n  };\n  const getTempImage = element => element.llTempImage;\n\n  const unobserve = (element, instance) => {\n    if (!instance) return;\n    const observer = instance._observer;\n    if (!observer) return;\n    observer.unobserve(element);\n  };\n  const resetObserver = observer => {\n    observer.disconnect();\n  };\n  const unobserveEntered = (element, settings, instance) => {\n    if (settings.unobserve_entered) unobserve(element, instance);\n  };\n\n  const updateLoadingCount = (instance, delta) => {\n    if (!instance) return;\n    instance.loadingCount += delta;\n  };\n  const decreaseToLoadCount = instance => {\n    if (!instance) return;\n    instance.toLoadCount -= 1;\n  };\n  const setToLoadCount = (instance, value) => {\n    if (!instance) return;\n    instance.toLoadCount = value;\n  };\n  const isSomethingLoading = instance => instance.loadingCount > 0;\n  const haveElementsToLoad = instance => instance.toLoadCount > 0;\n\n  const getSourceTags = parentTag => {\n    let sourceTags = [];\n    for (let i = 0, childTag; childTag = parentTag.children[i]; i += 1) {\n      if (childTag.tagName === \"SOURCE\") {\n        sourceTags.push(childTag);\n      }\n    }\n    return sourceTags;\n  };\n  const forEachPictureSource = (element, fn) => {\n    const parent = element.parentNode;\n    if (!parent || parent.tagName !== \"PICTURE\") {\n      return;\n    }\n    let sourceTags = getSourceTags(parent);\n    sourceTags.forEach(fn);\n  };\n  const forEachVideoSource = (element, fn) => {\n    let sourceTags = getSourceTags(element);\n    sourceTags.forEach(fn);\n  };\n\n  const attrsSrc = [SRC];\n  const attrsSrcPoster = [SRC, POSTER];\n  const attrsSrcSrcsetSizes = [SRC, SRCSET, SIZES];\n  const attrsData = [DATA];\n  const hasOriginalAttrs = element => !!element[ORIGINALS];\n  const getOriginalAttrs = element => element[ORIGINALS];\n  const deleteOriginalAttrs = element => delete element[ORIGINALS];\n\n  // ## SAVE ##\n\n  const setOriginalsObject = (element, attributes) => {\n    if (hasOriginalAttrs(element)) {\n      return;\n    }\n    const originals = {};\n    attributes.forEach(attribute => {\n      originals[attribute] = element.getAttribute(attribute);\n    });\n    element[ORIGINALS] = originals;\n  };\n  const saveOriginalBackgroundStyle = element => {\n    if (hasOriginalAttrs(element)) {\n      return;\n    }\n    element[ORIGINALS] = {\n      backgroundImage: element.style.backgroundImage\n    };\n  };\n\n  // ## RESTORE ##\n\n  const setOrResetAttribute = (element, attrName, value) => {\n    if (!value) {\n      element.removeAttribute(attrName);\n      return;\n    }\n    element.setAttribute(attrName, value);\n  };\n  const restoreOriginalAttrs = (element, attributes) => {\n    if (!hasOriginalAttrs(element)) {\n      return;\n    }\n    const originals = getOriginalAttrs(element);\n    attributes.forEach(attribute => {\n      setOrResetAttribute(element, attribute, originals[attribute]);\n    });\n  };\n  const restoreOriginalBgImage = element => {\n    if (!hasOriginalAttrs(element)) {\n      return;\n    }\n    const originals = getOriginalAttrs(element);\n    element.style.backgroundImage = originals.backgroundImage;\n  };\n\n  const manageApplied = (element, settings, instance) => {\n    addClass(element, settings.class_applied);\n    setStatus(element, statusApplied);\n    // Instance is not provided when loading is called from static class\n    if (!instance) return;\n    if (settings.unobserve_completed) {\n      // Unobserve now because we can't do it on load\n      unobserve(element, settings);\n    }\n    safeCallback(settings.callback_applied, element, instance);\n  };\n  const manageLoading = (element, settings, instance) => {\n    addClass(element, settings.class_loading);\n    setStatus(element, statusLoading);\n    // Instance is not provided when loading is called from static class\n    if (!instance) return;\n    updateLoadingCount(instance, +1);\n    safeCallback(settings.callback_loading, element, instance);\n  };\n  const setAttributeIfValue = (element, attrName, value) => {\n    if (!value) {\n      return;\n    }\n    element.setAttribute(attrName, value);\n  };\n  const setImageAttributes = (element, settings) => {\n    setAttributeIfValue(element, SIZES, getData(element, settings.data_sizes));\n    setAttributeIfValue(element, SRCSET, getData(element, settings.data_srcset));\n    setAttributeIfValue(element, SRC, getData(element, settings.data_src));\n  };\n  const setSourcesImg = (imgEl, settings) => {\n    forEachPictureSource(imgEl, sourceTag => {\n      setOriginalsObject(sourceTag, attrsSrcSrcsetSizes);\n      setImageAttributes(sourceTag, settings);\n    });\n    setOriginalsObject(imgEl, attrsSrcSrcsetSizes);\n    setImageAttributes(imgEl, settings);\n  };\n  const setSourcesIframe = (iframe, settings) => {\n    setOriginalsObject(iframe, attrsSrc);\n    setAttributeIfValue(iframe, SRC, getData(iframe, settings.data_src));\n  };\n  const setSourcesVideo = (videoEl, settings) => {\n    forEachVideoSource(videoEl, sourceEl => {\n      setOriginalsObject(sourceEl, attrsSrc);\n      setAttributeIfValue(sourceEl, SRC, getData(sourceEl, settings.data_src));\n    });\n    setOriginalsObject(videoEl, attrsSrcPoster);\n    setAttributeIfValue(videoEl, POSTER, getData(videoEl, settings.data_poster));\n    setAttributeIfValue(videoEl, SRC, getData(videoEl, settings.data_src));\n    videoEl.load();\n  };\n  const setSourcesObject = (object, settings) => {\n    setOriginalsObject(object, attrsData);\n    setAttributeIfValue(object, DATA, getData(object, settings.data_src));\n  };\n  const setBackground = (element, settings, instance) => {\n    const bg1xValue = getData(element, settings.data_bg);\n    const bgHiDpiValue = getData(element, settings.data_bg_hidpi);\n    const bgDataValue = isHiDpi && bgHiDpiValue ? bgHiDpiValue : bg1xValue;\n    if (!bgDataValue) return;\n    element.style.backgroundImage = `url(\"${bgDataValue}\")`;\n    getTempImage(element).setAttribute(SRC, bgDataValue);\n    manageLoading(element, settings, instance);\n  };\n\n  // NOTE: THE TEMP IMAGE TRICK CANNOT BE DONE WITH data-multi-bg\n  // BECAUSE INSIDE ITS VALUES MUST BE WRAPPED WITH URL() AND ONE OF THEM\n  // COULD BE A GRADIENT BACKGROUND IMAGE\n  const setMultiBackground = (element, settings, instance) => {\n    const bg1xValue = getData(element, settings.data_bg_multi);\n    const bgHiDpiValue = getData(element, settings.data_bg_multi_hidpi);\n    const bgDataValue = isHiDpi && bgHiDpiValue ? bgHiDpiValue : bg1xValue;\n    if (!bgDataValue) {\n      return;\n    }\n    element.style.backgroundImage = bgDataValue;\n    manageApplied(element, settings, instance);\n  };\n  const setImgsetBackground = (element, settings, instance) => {\n    const bgImgSetDataValue = getData(element, settings.data_bg_set);\n    if (!bgImgSetDataValue) {\n      return;\n    }\n    const imgSetValues = bgImgSetDataValue.split(\"|\");\n    let bgImageValues = imgSetValues.map(value => `image-set(${value})`);\n    element.style.backgroundImage = bgImageValues.join();\n    manageApplied(element, settings, instance);\n  };\n  const setSourcesFunctions = {\n    IMG: setSourcesImg,\n    IFRAME: setSourcesIframe,\n    VIDEO: setSourcesVideo,\n    OBJECT: setSourcesObject\n  };\n  const setSourcesNative = (element, settings) => {\n    const setSourcesFunction = setSourcesFunctions[element.tagName];\n    if (!setSourcesFunction) {\n      return;\n    }\n    setSourcesFunction(element, settings);\n  };\n  const setSources = (element, settings, instance) => {\n    const setSourcesFunction = setSourcesFunctions[element.tagName];\n    if (!setSourcesFunction) {\n      return;\n    }\n    setSourcesFunction(element, settings);\n    manageLoading(element, settings, instance);\n  };\n\n  const elementsWithLoadEvent = [\"IMG\", \"IFRAME\", \"VIDEO\", \"OBJECT\"];\n  const hasLoadEvent = element => elementsWithLoadEvent.indexOf(element.tagName) > -1;\n  const checkFinish = (settings, instance) => {\n    if (instance && !isSomethingLoading(instance) && !haveElementsToLoad(instance)) {\n      safeCallback(settings.callback_finish, instance);\n    }\n  };\n  const addEventListener = (element, eventName, handler) => {\n    element.addEventListener(eventName, handler);\n    element.llEvLisnrs[eventName] = handler;\n  };\n  const removeEventListener = (element, eventName, handler) => {\n    element.removeEventListener(eventName, handler);\n  };\n  const hasEventListeners = element => {\n    return !!element.llEvLisnrs;\n  };\n  const addEventListeners = (element, loadHandler, errorHandler) => {\n    if (!hasEventListeners(element)) element.llEvLisnrs = {};\n    const loadEventName = element.tagName === \"VIDEO\" ? \"loadeddata\" : \"load\";\n    addEventListener(element, loadEventName, loadHandler);\n    addEventListener(element, \"error\", errorHandler);\n  };\n  const removeEventListeners = element => {\n    if (!hasEventListeners(element)) {\n      return;\n    }\n    const eventListeners = element.llEvLisnrs;\n    for (let eventName in eventListeners) {\n      const handler = eventListeners[eventName];\n      removeEventListener(element, eventName, handler);\n    }\n    delete element.llEvLisnrs;\n  };\n  const doneHandler = (element, settings, instance) => {\n    deleteTempImage(element);\n    updateLoadingCount(instance, -1);\n    decreaseToLoadCount(instance);\n    removeClass(element, settings.class_loading);\n    if (settings.unobserve_completed) {\n      unobserve(element, instance);\n    }\n  };\n  const loadHandler = (event, element, settings, instance) => {\n    const goingNative = hasStatusNative(element);\n    doneHandler(element, settings, instance);\n    addClass(element, settings.class_loaded);\n    setStatus(element, statusLoaded);\n    safeCallback(settings.callback_loaded, element, instance);\n    if (!goingNative) checkFinish(settings, instance);\n  };\n  const errorHandler = (event, element, settings, instance) => {\n    const goingNative = hasStatusNative(element);\n    doneHandler(element, settings, instance);\n    addClass(element, settings.class_error);\n    setStatus(element, statusError);\n    safeCallback(settings.callback_error, element, instance);\n    if (settings.restore_on_error) restoreOriginalAttrs(element, attrsSrcSrcsetSizes);\n    if (!goingNative) checkFinish(settings, instance);\n  };\n  const addOneShotEventListeners = (element, settings, instance) => {\n    const elementToListenTo = getTempImage(element) || element;\n    if (hasEventListeners(elementToListenTo)) {\n      // This happens when loading is retried twice\n      return;\n    }\n    const _loadHandler = event => {\n      loadHandler(event, element, settings, instance);\n      removeEventListeners(elementToListenTo);\n    };\n    const _errorHandler = event => {\n      errorHandler(event, element, settings, instance);\n      removeEventListeners(elementToListenTo);\n    };\n    addEventListeners(elementToListenTo, _loadHandler, _errorHandler);\n  };\n\n  const loadBackground = (element, settings, instance) => {\n    addTempImage(element);\n    addOneShotEventListeners(element, settings, instance);\n    saveOriginalBackgroundStyle(element);\n    setBackground(element, settings, instance);\n    setMultiBackground(element, settings, instance);\n    setImgsetBackground(element, settings, instance);\n  };\n  const loadRegular = (element, settings, instance) => {\n    addOneShotEventListeners(element, settings, instance);\n    setSources(element, settings, instance);\n  };\n  const load = (element, settings, instance) => {\n    if (hasLoadEvent(element)) {\n      loadRegular(element, settings, instance);\n    } else {\n      loadBackground(element, settings, instance);\n    }\n  };\n  const loadNative = (element, settings, instance) => {\n    element.setAttribute(\"loading\", \"lazy\");\n    addOneShotEventListeners(element, settings, instance);\n    setSourcesNative(element, settings);\n    setStatus(element, statusNative);\n  };\n\n  const removeImageAttributes = element => {\n    element.removeAttribute(SRC);\n    element.removeAttribute(SRCSET);\n    element.removeAttribute(SIZES);\n  };\n  const resetSourcesImg = element => {\n    forEachPictureSource(element, sourceTag => {\n      removeImageAttributes(sourceTag);\n    });\n    removeImageAttributes(element);\n  };\n\n  const restoreImg = imgEl => {\n    forEachPictureSource(imgEl, sourceEl => {\n      restoreOriginalAttrs(sourceEl, attrsSrcSrcsetSizes);\n    });\n    restoreOriginalAttrs(imgEl, attrsSrcSrcsetSizes);\n  };\n  const restoreVideo = videoEl => {\n    forEachVideoSource(videoEl, sourceEl => {\n      restoreOriginalAttrs(sourceEl, attrsSrc);\n    });\n    restoreOriginalAttrs(videoEl, attrsSrcPoster);\n    videoEl.load();\n  };\n  const restoreIframe = iframeEl => {\n    restoreOriginalAttrs(iframeEl, attrsSrc);\n  };\n  const restoreObject = objectEl => {\n    restoreOriginalAttrs(objectEl, attrsData);\n  };\n  const restoreFunctions = {\n    IMG: restoreImg,\n    IFRAME: restoreIframe,\n    VIDEO: restoreVideo,\n    OBJECT: restoreObject\n  };\n  const restoreAttributes = element => {\n    const restoreFunction = restoreFunctions[element.tagName];\n    if (!restoreFunction) {\n      restoreOriginalBgImage(element);\n      return;\n    }\n    restoreFunction(element);\n  };\n  const resetClasses = (element, settings) => {\n    if (hasEmptyStatus(element) || hasStatusNative(element)) {\n      return;\n    }\n    removeClass(element, settings.class_entered);\n    removeClass(element, settings.class_exited);\n    removeClass(element, settings.class_applied);\n    removeClass(element, settings.class_loading);\n    removeClass(element, settings.class_loaded);\n    removeClass(element, settings.class_error);\n  };\n  const restore = (element, settings) => {\n    restoreAttributes(element);\n    resetClasses(element, settings);\n    resetStatus(element);\n    deleteOriginalAttrs(element);\n  };\n\n  const cancelLoading = (element, entry, settings, instance) => {\n    if (!settings.cancel_on_exit) return;\n    if (!hasStatusLoading(element)) return;\n    if (element.tagName !== \"IMG\") return; //Works only on images\n    removeEventListeners(element);\n    resetSourcesImg(element);\n    restoreImg(element);\n    removeClass(element, settings.class_loading);\n    updateLoadingCount(instance, -1);\n    resetStatus(element);\n    safeCallback(settings.callback_cancel, element, entry, instance);\n  };\n\n  const onEnter = (element, entry, settings, instance) => {\n    const dontLoad = hadStartedLoading(element); /* Save status\n                                                 before setting it, to prevent loading it again. Fixes #526. */\n    setStatus(element, statusEntered);\n    addClass(element, settings.class_entered);\n    removeClass(element, settings.class_exited);\n    unobserveEntered(element, settings, instance);\n    safeCallback(settings.callback_enter, element, entry, instance);\n    if (dontLoad) return;\n    load(element, settings, instance);\n  };\n  const onExit = (element, entry, settings, instance) => {\n    if (hasEmptyStatus(element)) return; //Ignore the first pass, at landing\n    addClass(element, settings.class_exited);\n    cancelLoading(element, entry, settings, instance);\n    safeCallback(settings.callback_exit, element, entry, instance);\n  };\n\n  const tagsWithNativeLazy = [\"IMG\", \"IFRAME\", \"VIDEO\"];\n  const shouldUseNative = settings => settings.use_native && \"loading\" in HTMLImageElement.prototype;\n  const loadAllNative = (elements, settings, instance) => {\n    elements.forEach(element => {\n      if (tagsWithNativeLazy.indexOf(element.tagName) === -1) {\n        return;\n      }\n      loadNative(element, settings, instance);\n    });\n    setToLoadCount(instance, 0);\n  };\n\n  const isIntersecting = entry => entry.isIntersecting || entry.intersectionRatio > 0;\n  const getObserverSettings = settings => ({\n    root: settings.container === document ? null : settings.container,\n    rootMargin: settings.thresholds || settings.threshold + \"px\"\n  });\n  const intersectionHandler = (entries, settings, instance) => {\n    entries.forEach(entry => isIntersecting(entry) ? onEnter(entry.target, entry, settings, instance) : onExit(entry.target, entry, settings, instance));\n  };\n  const observeElements = (observer, elements) => {\n    elements.forEach(element => {\n      observer.observe(element);\n    });\n  };\n  const updateObserver = (observer, elementsToObserve) => {\n    resetObserver(observer);\n    observeElements(observer, elementsToObserve);\n  };\n  const setObserver = (settings, instance) => {\n    if (shouldUseNative(settings)) {\n      return;\n    }\n    instance._observer = new IntersectionObserver(entries => {\n      intersectionHandler(entries, settings, instance);\n    }, getObserverSettings(settings));\n  };\n\n  const toArray = nodeSet => Array.prototype.slice.call(nodeSet);\n  const queryElements = settings => settings.container.querySelectorAll(settings.elements_selector);\n  const excludeManagedElements = elements => toArray(elements).filter(hasEmptyStatus);\n  const hasError = element => hasStatusError(element);\n  const filterErrorElements = elements => toArray(elements).filter(hasError);\n  const getElementsToLoad = (elements, settings) => excludeManagedElements(elements || queryElements(settings));\n\n  const retryLazyLoad = (settings, instance) => {\n    const errorElements = filterErrorElements(queryElements(settings));\n    errorElements.forEach(element => {\n      removeClass(element, settings.class_error);\n      resetStatus(element);\n    });\n    instance.update();\n  };\n  const setOnlineCheck = (settings, instance) => {\n    if (!runningOnBrowser) {\n      return;\n    }\n    instance._onlineHandler = () => {\n      retryLazyLoad(settings, instance);\n    };\n    window.addEventListener(\"online\", instance._onlineHandler);\n  };\n  const resetOnlineCheck = instance => {\n    if (!runningOnBrowser) {\n      return;\n    }\n    window.removeEventListener(\"online\", instance._onlineHandler);\n  };\n\n  const LazyLoad = function (customSettings, elements) {\n    const settings = getExtendedSettings(customSettings);\n    this._settings = settings;\n    this.loadingCount = 0;\n    setObserver(settings, this);\n    setOnlineCheck(settings, this);\n    this.update(elements);\n  };\n  LazyLoad.prototype = {\n    update: function (givenNodeset) {\n      const settings = this._settings;\n      const elementsToLoad = getElementsToLoad(givenNodeset, settings);\n      setToLoadCount(this, elementsToLoad.length);\n      if (isBot) {\n        this.loadAll(elementsToLoad);\n        return;\n      }\n      if (shouldUseNative(settings)) {\n        loadAllNative(elementsToLoad, settings, this);\n        return;\n      }\n      updateObserver(this._observer, elementsToLoad);\n    },\n    destroy: function () {\n      // Observer\n      if (this._observer) {\n        this._observer.disconnect();\n      }\n      // Clean handlers\n      resetOnlineCheck(this);\n      // Clean custom attributes on elements\n      queryElements(this._settings).forEach(element => {\n        deleteOriginalAttrs(element);\n      });\n      // Delete all internal props\n      delete this._observer;\n      delete this._settings;\n      delete this._onlineHandler;\n      delete this.loadingCount;\n      delete this.toLoadCount;\n    },\n    loadAll: function (elements) {\n      const settings = this._settings;\n      const elementsToLoad = getElementsToLoad(elements, settings);\n      elementsToLoad.forEach(element => {\n        unobserve(element, this);\n        load(element, settings, this);\n      });\n    },\n    restoreAll: function () {\n      const settings = this._settings;\n      queryElements(settings).forEach(element => {\n        restore(element, settings);\n      });\n    }\n  };\n  LazyLoad.load = (element, customSettings) => {\n    const settings = getExtendedSettings(customSettings);\n    load(element, settings);\n  };\n  LazyLoad.resetStatus = element => {\n    resetStatus(element);\n  };\n\n  // Automatic instances creation if required (useful for async script loading)\n  if (runningOnBrowser) {\n    autoInitialize(LazyLoad, window.lazyLoadOptions);\n  }\n\n  return LazyLoad;\n\n})();\n"
  },
  {
    "path": "dist/lazyload.js",
    "content": "(function (global, factory) {\n  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n  typeof define === 'function' && define.amd ? define(factory) :\n  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.LazyLoad = factory());\n})(this, (function () { 'use strict';\n\n  const runningOnBrowser = typeof window !== \"undefined\";\n  const isBot = runningOnBrowser && !(\"onscroll\" in window) || typeof navigator !== \"undefined\" && /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);\n  const isHiDpi = runningOnBrowser && window.devicePixelRatio > 1;\n\n  const defaultSettings = {\n    elements_selector: \".lazy\",\n    container: isBot || runningOnBrowser ? document : null,\n    threshold: 300,\n    thresholds: null,\n    data_src: \"src\",\n    data_srcset: \"srcset\",\n    data_sizes: \"sizes\",\n    data_bg: \"bg\",\n    data_bg_hidpi: \"bg-hidpi\",\n    data_bg_multi: \"bg-multi\",\n    data_bg_multi_hidpi: \"bg-multi-hidpi\",\n    data_bg_set: \"bg-set\",\n    data_poster: \"poster\",\n    class_applied: \"applied\",\n    class_loading: \"loading\",\n    class_loaded: \"loaded\",\n    class_error: \"error\",\n    class_entered: \"entered\",\n    class_exited: \"exited\",\n    unobserve_completed: true,\n    unobserve_entered: false,\n    cancel_on_exit: true,\n    callback_enter: null,\n    callback_exit: null,\n    callback_applied: null,\n    callback_loading: null,\n    callback_loaded: null,\n    callback_error: null,\n    callback_finish: null,\n    callback_cancel: null,\n    use_native: false,\n    restore_on_error: false\n  };\n  const getExtendedSettings = customSettings => {\n    return Object.assign({}, defaultSettings, customSettings);\n  };\n\n  /* Creates instance and notifies it through the window element */\n  const createInstance = function (classObj, options) {\n    let event;\n    const eventString = \"LazyLoad::Initialized\";\n    const instance = new classObj(options);\n    try {\n      // Works in modern browsers\n      event = new CustomEvent(eventString, {\n        detail: {\n          instance\n        }\n      });\n    } catch (err) {\n      // Works in Internet Explorer (all versions)\n      event = document.createEvent(\"CustomEvent\");\n      event.initCustomEvent(eventString, false, false, {\n        instance\n      });\n    }\n    window.dispatchEvent(event);\n  };\n\n  /* Auto initialization of one or more instances of LazyLoad, depending on the\n      options passed in (plain object or an array) */\n  const autoInitialize = (classObj, options) => {\n    if (!options) {\n      return;\n    }\n    if (!options.length) {\n      // Plain object\n      createInstance(classObj, options);\n    } else {\n      // Array of objects\n      for (let i = 0, optionsItem; optionsItem = options[i]; i += 1) {\n        createInstance(classObj, optionsItem);\n      }\n    }\n  };\n\n  const SRC = \"src\";\n  const SRCSET = \"srcset\";\n  const SIZES = \"sizes\";\n  const POSTER = \"poster\";\n  const ORIGINALS = \"llOriginalAttrs\";\n  const DATA = \"data\";\n\n  const statusLoading = \"loading\";\n  const statusLoaded = \"loaded\";\n  const statusApplied = \"applied\";\n  const statusEntered = \"entered\";\n  const statusError = \"error\";\n  const statusNative = \"native\";\n\n  const dataPrefix = \"data-\";\n  const statusDataName = \"ll-status\";\n  const getData = (element, attribute) => {\n    return element.getAttribute(dataPrefix + attribute);\n  };\n  const setData = (element, attribute, value) => {\n    const attrName = dataPrefix + attribute;\n    if (value === null) {\n      element.removeAttribute(attrName);\n      return;\n    }\n    element.setAttribute(attrName, value);\n  };\n  const getStatus = element => getData(element, statusDataName);\n  const setStatus = (element, status) => setData(element, statusDataName, status);\n  const resetStatus = element => setStatus(element, null);\n  const hasEmptyStatus = element => getStatus(element) === null;\n  const hasStatusLoading = element => getStatus(element) === statusLoading;\n  const hasStatusError = element => getStatus(element) === statusError;\n  const hasStatusNative = element => getStatus(element) === statusNative;\n  const statusesAfterLoading = [statusLoading, statusLoaded, statusApplied, statusError];\n  const hadStartedLoading = element => statusesAfterLoading.indexOf(getStatus(element)) >= 0;\n\n  const safeCallback = (callback, arg1, arg2, arg3) => {\n    if (!callback || typeof callback !== 'function') {\n      return;\n    }\n    if (arg3 !== undefined) {\n      callback(arg1, arg2, arg3);\n      return;\n    }\n    if (arg2 !== undefined) {\n      callback(arg1, arg2);\n      return;\n    }\n    callback(arg1);\n  };\n\n  const addClass = (element, className) => {\n    if (!runningOnBrowser) {\n      return;\n    }\n    if (className === \"\") {\n      return;\n    }\n    element.classList.add(className);\n  };\n  const removeClass = (element, className) => {\n    if (!runningOnBrowser) {\n      return;\n    }\n    if (className === \"\") {\n      return;\n    }\n    element.classList.remove(className);\n  };\n\n  const addTempImage = element => {\n    element.llTempImage = document.createElement(\"IMG\");\n  };\n  const deleteTempImage = element => {\n    delete element.llTempImage;\n  };\n  const getTempImage = element => element.llTempImage;\n\n  const unobserve = (element, instance) => {\n    if (!instance) return;\n    const observer = instance._observer;\n    if (!observer) return;\n    observer.unobserve(element);\n  };\n  const resetObserver = observer => {\n    observer.disconnect();\n  };\n  const unobserveEntered = (element, settings, instance) => {\n    if (settings.unobserve_entered) unobserve(element, instance);\n  };\n\n  const updateLoadingCount = (instance, delta) => {\n    if (!instance) return;\n    instance.loadingCount += delta;\n  };\n  const decreaseToLoadCount = instance => {\n    if (!instance) return;\n    instance.toLoadCount -= 1;\n  };\n  const setToLoadCount = (instance, value) => {\n    if (!instance) return;\n    instance.toLoadCount = value;\n  };\n  const isSomethingLoading = instance => instance.loadingCount > 0;\n  const haveElementsToLoad = instance => instance.toLoadCount > 0;\n\n  const getSourceTags = parentTag => {\n    let sourceTags = [];\n    for (let i = 0, childTag; childTag = parentTag.children[i]; i += 1) {\n      if (childTag.tagName === \"SOURCE\") {\n        sourceTags.push(childTag);\n      }\n    }\n    return sourceTags;\n  };\n  const forEachPictureSource = (element, fn) => {\n    const parent = element.parentNode;\n    if (!parent || parent.tagName !== \"PICTURE\") {\n      return;\n    }\n    let sourceTags = getSourceTags(parent);\n    sourceTags.forEach(fn);\n  };\n  const forEachVideoSource = (element, fn) => {\n    let sourceTags = getSourceTags(element);\n    sourceTags.forEach(fn);\n  };\n\n  const attrsSrc = [SRC];\n  const attrsSrcPoster = [SRC, POSTER];\n  const attrsSrcSrcsetSizes = [SRC, SRCSET, SIZES];\n  const attrsData = [DATA];\n  const hasOriginalAttrs = element => !!element[ORIGINALS];\n  const getOriginalAttrs = element => element[ORIGINALS];\n  const deleteOriginalAttrs = element => delete element[ORIGINALS];\n\n  // ## SAVE ##\n\n  const setOriginalsObject = (element, attributes) => {\n    if (hasOriginalAttrs(element)) {\n      return;\n    }\n    const originals = {};\n    attributes.forEach(attribute => {\n      originals[attribute] = element.getAttribute(attribute);\n    });\n    element[ORIGINALS] = originals;\n  };\n  const saveOriginalBackgroundStyle = element => {\n    if (hasOriginalAttrs(element)) {\n      return;\n    }\n    element[ORIGINALS] = {\n      backgroundImage: element.style.backgroundImage\n    };\n  };\n\n  // ## RESTORE ##\n\n  const setOrResetAttribute = (element, attrName, value) => {\n    if (!value) {\n      element.removeAttribute(attrName);\n      return;\n    }\n    element.setAttribute(attrName, value);\n  };\n  const restoreOriginalAttrs = (element, attributes) => {\n    if (!hasOriginalAttrs(element)) {\n      return;\n    }\n    const originals = getOriginalAttrs(element);\n    attributes.forEach(attribute => {\n      setOrResetAttribute(element, attribute, originals[attribute]);\n    });\n  };\n  const restoreOriginalBgImage = element => {\n    if (!hasOriginalAttrs(element)) {\n      return;\n    }\n    const originals = getOriginalAttrs(element);\n    element.style.backgroundImage = originals.backgroundImage;\n  };\n\n  const manageApplied = (element, settings, instance) => {\n    addClass(element, settings.class_applied);\n    setStatus(element, statusApplied);\n    // Instance is not provided when loading is called from static class\n    if (!instance) return;\n    if (settings.unobserve_completed) {\n      // Unobserve now because we can't do it on load\n      unobserve(element, settings);\n    }\n    safeCallback(settings.callback_applied, element, instance);\n  };\n  const manageLoading = (element, settings, instance) => {\n    addClass(element, settings.class_loading);\n    setStatus(element, statusLoading);\n    // Instance is not provided when loading is called from static class\n    if (!instance) return;\n    updateLoadingCount(instance, +1);\n    safeCallback(settings.callback_loading, element, instance);\n  };\n  const setAttributeIfValue = (element, attrName, value) => {\n    if (!value) {\n      return;\n    }\n    element.setAttribute(attrName, value);\n  };\n  const setImageAttributes = (element, settings) => {\n    setAttributeIfValue(element, SIZES, getData(element, settings.data_sizes));\n    setAttributeIfValue(element, SRCSET, getData(element, settings.data_srcset));\n    setAttributeIfValue(element, SRC, getData(element, settings.data_src));\n  };\n  const setSourcesImg = (imgEl, settings) => {\n    forEachPictureSource(imgEl, sourceTag => {\n      setOriginalsObject(sourceTag, attrsSrcSrcsetSizes);\n      setImageAttributes(sourceTag, settings);\n    });\n    setOriginalsObject(imgEl, attrsSrcSrcsetSizes);\n    setImageAttributes(imgEl, settings);\n  };\n  const setSourcesIframe = (iframe, settings) => {\n    setOriginalsObject(iframe, attrsSrc);\n    setAttributeIfValue(iframe, SRC, getData(iframe, settings.data_src));\n  };\n  const setSourcesVideo = (videoEl, settings) => {\n    forEachVideoSource(videoEl, sourceEl => {\n      setOriginalsObject(sourceEl, attrsSrc);\n      setAttributeIfValue(sourceEl, SRC, getData(sourceEl, settings.data_src));\n    });\n    setOriginalsObject(videoEl, attrsSrcPoster);\n    setAttributeIfValue(videoEl, POSTER, getData(videoEl, settings.data_poster));\n    setAttributeIfValue(videoEl, SRC, getData(videoEl, settings.data_src));\n    videoEl.load();\n  };\n  const setSourcesObject = (object, settings) => {\n    setOriginalsObject(object, attrsData);\n    setAttributeIfValue(object, DATA, getData(object, settings.data_src));\n  };\n  const setBackground = (element, settings, instance) => {\n    const bg1xValue = getData(element, settings.data_bg);\n    const bgHiDpiValue = getData(element, settings.data_bg_hidpi);\n    const bgDataValue = isHiDpi && bgHiDpiValue ? bgHiDpiValue : bg1xValue;\n    if (!bgDataValue) return;\n    element.style.backgroundImage = `url(\"${bgDataValue}\")`;\n    getTempImage(element).setAttribute(SRC, bgDataValue);\n    manageLoading(element, settings, instance);\n  };\n\n  // NOTE: THE TEMP IMAGE TRICK CANNOT BE DONE WITH data-multi-bg\n  // BECAUSE INSIDE ITS VALUES MUST BE WRAPPED WITH URL() AND ONE OF THEM\n  // COULD BE A GRADIENT BACKGROUND IMAGE\n  const setMultiBackground = (element, settings, instance) => {\n    const bg1xValue = getData(element, settings.data_bg_multi);\n    const bgHiDpiValue = getData(element, settings.data_bg_multi_hidpi);\n    const bgDataValue = isHiDpi && bgHiDpiValue ? bgHiDpiValue : bg1xValue;\n    if (!bgDataValue) {\n      return;\n    }\n    element.style.backgroundImage = bgDataValue;\n    manageApplied(element, settings, instance);\n  };\n  const setImgsetBackground = (element, settings, instance) => {\n    const bgImgSetDataValue = getData(element, settings.data_bg_set);\n    if (!bgImgSetDataValue) {\n      return;\n    }\n    const imgSetValues = bgImgSetDataValue.split(\"|\");\n    let bgImageValues = imgSetValues.map(value => `image-set(${value})`);\n    element.style.backgroundImage = bgImageValues.join();\n    manageApplied(element, settings, instance);\n  };\n  const setSourcesFunctions = {\n    IMG: setSourcesImg,\n    IFRAME: setSourcesIframe,\n    VIDEO: setSourcesVideo,\n    OBJECT: setSourcesObject\n  };\n  const setSourcesNative = (element, settings) => {\n    const setSourcesFunction = setSourcesFunctions[element.tagName];\n    if (!setSourcesFunction) {\n      return;\n    }\n    setSourcesFunction(element, settings);\n  };\n  const setSources = (element, settings, instance) => {\n    const setSourcesFunction = setSourcesFunctions[element.tagName];\n    if (!setSourcesFunction) {\n      return;\n    }\n    setSourcesFunction(element, settings);\n    manageLoading(element, settings, instance);\n  };\n\n  const elementsWithLoadEvent = [\"IMG\", \"IFRAME\", \"VIDEO\", \"OBJECT\"];\n  const hasLoadEvent = element => elementsWithLoadEvent.indexOf(element.tagName) > -1;\n  const checkFinish = (settings, instance) => {\n    if (instance && !isSomethingLoading(instance) && !haveElementsToLoad(instance)) {\n      safeCallback(settings.callback_finish, instance);\n    }\n  };\n  const addEventListener = (element, eventName, handler) => {\n    element.addEventListener(eventName, handler);\n    element.llEvLisnrs[eventName] = handler;\n  };\n  const removeEventListener = (element, eventName, handler) => {\n    element.removeEventListener(eventName, handler);\n  };\n  const hasEventListeners = element => {\n    return !!element.llEvLisnrs;\n  };\n  const addEventListeners = (element, loadHandler, errorHandler) => {\n    if (!hasEventListeners(element)) element.llEvLisnrs = {};\n    const loadEventName = element.tagName === \"VIDEO\" ? \"loadeddata\" : \"load\";\n    addEventListener(element, loadEventName, loadHandler);\n    addEventListener(element, \"error\", errorHandler);\n  };\n  const removeEventListeners = element => {\n    if (!hasEventListeners(element)) {\n      return;\n    }\n    const eventListeners = element.llEvLisnrs;\n    for (let eventName in eventListeners) {\n      const handler = eventListeners[eventName];\n      removeEventListener(element, eventName, handler);\n    }\n    delete element.llEvLisnrs;\n  };\n  const doneHandler = (element, settings, instance) => {\n    deleteTempImage(element);\n    updateLoadingCount(instance, -1);\n    decreaseToLoadCount(instance);\n    removeClass(element, settings.class_loading);\n    if (settings.unobserve_completed) {\n      unobserve(element, instance);\n    }\n  };\n  const loadHandler = (event, element, settings, instance) => {\n    const goingNative = hasStatusNative(element);\n    doneHandler(element, settings, instance);\n    addClass(element, settings.class_loaded);\n    setStatus(element, statusLoaded);\n    safeCallback(settings.callback_loaded, element, instance);\n    if (!goingNative) checkFinish(settings, instance);\n  };\n  const errorHandler = (event, element, settings, instance) => {\n    const goingNative = hasStatusNative(element);\n    doneHandler(element, settings, instance);\n    addClass(element, settings.class_error);\n    setStatus(element, statusError);\n    safeCallback(settings.callback_error, element, instance);\n    if (settings.restore_on_error) restoreOriginalAttrs(element, attrsSrcSrcsetSizes);\n    if (!goingNative) checkFinish(settings, instance);\n  };\n  const addOneShotEventListeners = (element, settings, instance) => {\n    const elementToListenTo = getTempImage(element) || element;\n    if (hasEventListeners(elementToListenTo)) {\n      // This happens when loading is retried twice\n      return;\n    }\n    const _loadHandler = event => {\n      loadHandler(event, element, settings, instance);\n      removeEventListeners(elementToListenTo);\n    };\n    const _errorHandler = event => {\n      errorHandler(event, element, settings, instance);\n      removeEventListeners(elementToListenTo);\n    };\n    addEventListeners(elementToListenTo, _loadHandler, _errorHandler);\n  };\n\n  const loadBackground = (element, settings, instance) => {\n    addTempImage(element);\n    addOneShotEventListeners(element, settings, instance);\n    saveOriginalBackgroundStyle(element);\n    setBackground(element, settings, instance);\n    setMultiBackground(element, settings, instance);\n    setImgsetBackground(element, settings, instance);\n  };\n  const loadRegular = (element, settings, instance) => {\n    addOneShotEventListeners(element, settings, instance);\n    setSources(element, settings, instance);\n  };\n  const load = (element, settings, instance) => {\n    if (hasLoadEvent(element)) {\n      loadRegular(element, settings, instance);\n    } else {\n      loadBackground(element, settings, instance);\n    }\n  };\n  const loadNative = (element, settings, instance) => {\n    element.setAttribute(\"loading\", \"lazy\");\n    addOneShotEventListeners(element, settings, instance);\n    setSourcesNative(element, settings);\n    setStatus(element, statusNative);\n  };\n\n  const removeImageAttributes = element => {\n    element.removeAttribute(SRC);\n    element.removeAttribute(SRCSET);\n    element.removeAttribute(SIZES);\n  };\n  const resetSourcesImg = element => {\n    forEachPictureSource(element, sourceTag => {\n      removeImageAttributes(sourceTag);\n    });\n    removeImageAttributes(element);\n  };\n\n  const restoreImg = imgEl => {\n    forEachPictureSource(imgEl, sourceEl => {\n      restoreOriginalAttrs(sourceEl, attrsSrcSrcsetSizes);\n    });\n    restoreOriginalAttrs(imgEl, attrsSrcSrcsetSizes);\n  };\n  const restoreVideo = videoEl => {\n    forEachVideoSource(videoEl, sourceEl => {\n      restoreOriginalAttrs(sourceEl, attrsSrc);\n    });\n    restoreOriginalAttrs(videoEl, attrsSrcPoster);\n    videoEl.load();\n  };\n  const restoreIframe = iframeEl => {\n    restoreOriginalAttrs(iframeEl, attrsSrc);\n  };\n  const restoreObject = objectEl => {\n    restoreOriginalAttrs(objectEl, attrsData);\n  };\n  const restoreFunctions = {\n    IMG: restoreImg,\n    IFRAME: restoreIframe,\n    VIDEO: restoreVideo,\n    OBJECT: restoreObject\n  };\n  const restoreAttributes = element => {\n    const restoreFunction = restoreFunctions[element.tagName];\n    if (!restoreFunction) {\n      restoreOriginalBgImage(element);\n      return;\n    }\n    restoreFunction(element);\n  };\n  const resetClasses = (element, settings) => {\n    if (hasEmptyStatus(element) || hasStatusNative(element)) {\n      return;\n    }\n    removeClass(element, settings.class_entered);\n    removeClass(element, settings.class_exited);\n    removeClass(element, settings.class_applied);\n    removeClass(element, settings.class_loading);\n    removeClass(element, settings.class_loaded);\n    removeClass(element, settings.class_error);\n  };\n  const restore = (element, settings) => {\n    restoreAttributes(element);\n    resetClasses(element, settings);\n    resetStatus(element);\n    deleteOriginalAttrs(element);\n  };\n\n  const cancelLoading = (element, entry, settings, instance) => {\n    if (!settings.cancel_on_exit) return;\n    if (!hasStatusLoading(element)) return;\n    if (element.tagName !== \"IMG\") return; //Works only on images\n    removeEventListeners(element);\n    resetSourcesImg(element);\n    restoreImg(element);\n    removeClass(element, settings.class_loading);\n    updateLoadingCount(instance, -1);\n    resetStatus(element);\n    safeCallback(settings.callback_cancel, element, entry, instance);\n  };\n\n  const onEnter = (element, entry, settings, instance) => {\n    const dontLoad = hadStartedLoading(element); /* Save status\n                                                 before setting it, to prevent loading it again. Fixes #526. */\n    setStatus(element, statusEntered);\n    addClass(element, settings.class_entered);\n    removeClass(element, settings.class_exited);\n    unobserveEntered(element, settings, instance);\n    safeCallback(settings.callback_enter, element, entry, instance);\n    if (dontLoad) return;\n    load(element, settings, instance);\n  };\n  const onExit = (element, entry, settings, instance) => {\n    if (hasEmptyStatus(element)) return; //Ignore the first pass, at landing\n    addClass(element, settings.class_exited);\n    cancelLoading(element, entry, settings, instance);\n    safeCallback(settings.callback_exit, element, entry, instance);\n  };\n\n  const tagsWithNativeLazy = [\"IMG\", \"IFRAME\", \"VIDEO\"];\n  const shouldUseNative = settings => settings.use_native && \"loading\" in HTMLImageElement.prototype;\n  const loadAllNative = (elements, settings, instance) => {\n    elements.forEach(element => {\n      if (tagsWithNativeLazy.indexOf(element.tagName) === -1) {\n        return;\n      }\n      loadNative(element, settings, instance);\n    });\n    setToLoadCount(instance, 0);\n  };\n\n  const isIntersecting = entry => entry.isIntersecting || entry.intersectionRatio > 0;\n  const getObserverSettings = settings => ({\n    root: settings.container === document ? null : settings.container,\n    rootMargin: settings.thresholds || settings.threshold + \"px\"\n  });\n  const intersectionHandler = (entries, settings, instance) => {\n    entries.forEach(entry => isIntersecting(entry) ? onEnter(entry.target, entry, settings, instance) : onExit(entry.target, entry, settings, instance));\n  };\n  const observeElements = (observer, elements) => {\n    elements.forEach(element => {\n      observer.observe(element);\n    });\n  };\n  const updateObserver = (observer, elementsToObserve) => {\n    resetObserver(observer);\n    observeElements(observer, elementsToObserve);\n  };\n  const setObserver = (settings, instance) => {\n    if (shouldUseNative(settings)) {\n      return;\n    }\n    instance._observer = new IntersectionObserver(entries => {\n      intersectionHandler(entries, settings, instance);\n    }, getObserverSettings(settings));\n  };\n\n  const toArray = nodeSet => Array.prototype.slice.call(nodeSet);\n  const queryElements = settings => settings.container.querySelectorAll(settings.elements_selector);\n  const excludeManagedElements = elements => toArray(elements).filter(hasEmptyStatus);\n  const hasError = element => hasStatusError(element);\n  const filterErrorElements = elements => toArray(elements).filter(hasError);\n  const getElementsToLoad = (elements, settings) => excludeManagedElements(elements || queryElements(settings));\n\n  const retryLazyLoad = (settings, instance) => {\n    const errorElements = filterErrorElements(queryElements(settings));\n    errorElements.forEach(element => {\n      removeClass(element, settings.class_error);\n      resetStatus(element);\n    });\n    instance.update();\n  };\n  const setOnlineCheck = (settings, instance) => {\n    if (!runningOnBrowser) {\n      return;\n    }\n    instance._onlineHandler = () => {\n      retryLazyLoad(settings, instance);\n    };\n    window.addEventListener(\"online\", instance._onlineHandler);\n  };\n  const resetOnlineCheck = instance => {\n    if (!runningOnBrowser) {\n      return;\n    }\n    window.removeEventListener(\"online\", instance._onlineHandler);\n  };\n\n  const LazyLoad = function (customSettings, elements) {\n    const settings = getExtendedSettings(customSettings);\n    this._settings = settings;\n    this.loadingCount = 0;\n    setObserver(settings, this);\n    setOnlineCheck(settings, this);\n    this.update(elements);\n  };\n  LazyLoad.prototype = {\n    update: function (givenNodeset) {\n      const settings = this._settings;\n      const elementsToLoad = getElementsToLoad(givenNodeset, settings);\n      setToLoadCount(this, elementsToLoad.length);\n      if (isBot) {\n        this.loadAll(elementsToLoad);\n        return;\n      }\n      if (shouldUseNative(settings)) {\n        loadAllNative(elementsToLoad, settings, this);\n        return;\n      }\n      updateObserver(this._observer, elementsToLoad);\n    },\n    destroy: function () {\n      // Observer\n      if (this._observer) {\n        this._observer.disconnect();\n      }\n      // Clean handlers\n      resetOnlineCheck(this);\n      // Clean custom attributes on elements\n      queryElements(this._settings).forEach(element => {\n        deleteOriginalAttrs(element);\n      });\n      // Delete all internal props\n      delete this._observer;\n      delete this._settings;\n      delete this._onlineHandler;\n      delete this.loadingCount;\n      delete this.toLoadCount;\n    },\n    loadAll: function (elements) {\n      const settings = this._settings;\n      const elementsToLoad = getElementsToLoad(elements, settings);\n      elementsToLoad.forEach(element => {\n        unobserve(element, this);\n        load(element, settings, this);\n      });\n    },\n    restoreAll: function () {\n      const settings = this._settings;\n      queryElements(settings).forEach(element => {\n        restore(element, settings);\n      });\n    }\n  };\n  LazyLoad.load = (element, customSettings) => {\n    const settings = getExtendedSettings(customSettings);\n    load(element, settings);\n  };\n  LazyLoad.resetStatus = element => {\n    resetStatus(element);\n  };\n\n  // Automatic instances creation if required (useful for async script loading)\n  if (runningOnBrowser) {\n    autoInitialize(LazyLoad, window.lazyLoadOptions);\n  }\n\n  return LazyLoad;\n\n}));\n"
  },
  {
    "path": "funding.yml",
    "content": "github: verlok\nko_fi: verlok\ncustom: \"https://www.paypal.me/verlok\""
  },
  {
    "path": "jest.config.cjs",
    "content": "/** @type {import('jest').Config} */\nmodule.exports = {\n  verbose: true,\n  testMatch: [\"<rootDir>/tests/unit/**/*.test.js\"],\n  testEnvironment: 'jsdom',\n  collectCoverage: true,\n  collectCoverageFrom: [\n    'src/**/*.js',\n  ]\n};\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"vanilla-lazyload\",\n  \"version\": \"19.1.3\",\n  \"description\": \"LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, videos and iframes to when they will enter the viewport. It's written in plain \\\"vanilla\\\" JavaScript, it leverages the IntersectionObserver API, it supports responsive images, it optimizes your website for slower connections, and can enable native lazy loading.\",\n  \"main\": \"dist/lazyload.min.js\",\n  \"module\": \"dist/esm/lazyload.js\",\n  \"browser\": \"dist/lazyload.min.js\",\n  \"typings\": \"typings/lazyload.d.ts\",\n  \"sideEffects\": false,\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.24.3\",\n    \"@babel/preset-env\": \"^7.24.3\",\n    \"@jest/globals\": \"^29.7.0\",\n    \"@playwright/test\": \"^1.56.1\",\n    \"@rollup/plugin-babel\": \"^6.0.4\",\n    \"@rollup/plugin-node-resolve\": \"^15.2.3\",\n    \"@rollup/plugin-terser\": \"^0.4.4\",\n    \"@types/node\": \"^20.12.2\",\n    \"jest\": \"^29.7.0\",\n    \"jest-environment-jsdom\": \"^29.7.0\",\n    \"http-server\": \"^14.1.1\",\n    \"rollup\": \"^4.22.4\"\n  },\n  \"scripts\": {\n    \"serve\": \"npx http-server -p 4200\",\n    \"build\": \"rollup -c\",\n    \"dev\": \"rollup -c --watch\",\n    \"test\": \"npm run test:unit && npm run test:e2e\",\n    \"test:unit\": \"jest\",\n    \"watch-test:unit\": \"jest --watch\",\n    \"test:e2e\": \"playwright test\",\n    \"test-watch:e2e\": \"npx playwright test --ui\"\n  },\n  \"files\": [\n    \"dist\",\n    \"typings\",\n    \"CHANGELOG.md\"\n  ],\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com/verlok/vanilla-lazyload\"\n  },\n  \"keywords\": [\n    \"lazyload\",\n    \"vanilla\",\n    \"responsive\",\n    \"images\",\n    \"picture\",\n    \"srcset\",\n    \"sizes\",\n    \"native\",\n    \"SEO\",\n    \"intersectionObserver\",\n    \"progressive\",\n    \"performance\",\n    \"perfmatters\",\n    \"async\",\n    \"no-jquery\"\n  ],\n  \"author\": {\n    \"name\": \"Andrea \\\"verlok\\\" Verlicchi\",\n    \"email\": \"andrea.verlicchi@gmail.com\",\n    \"url\": \"https://www.andreaverlicchi.eu\"\n  },\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/verlok/vanilla-lazyload/issues\"\n  },\n  \"homepage\": \"https://www.andreaverlicchi.eu/vanilla-lazyload\",\n  \"funding\": {\n    \"type\": \"individual\",\n    \"url\": \"https://ko-fi.com/verlok\"\n  },\n  \"browserslist\": [\n    \"defaults\"\n  ]\n}\n"
  },
  {
    "path": "playwright.config.js",
    "content": "// @ts-check\nconst { defineConfig, devices } = require('@playwright/test');\n\n/**\n * Read environment variables from file.\n * https://github.com/motdotla/dotenv\n */\n// require('dotenv').config();\n\n/**\n * @see https://playwright.dev/docs/test-configuration\n */\nmodule.exports = defineConfig({\n  testDir: './tests/e2e',\n  /* Run tests in files in parallel */\n  fullyParallel: true,\n  /* Fail the build on CI if you accidentally left test.only in the source code. */\n  forbidOnly: !!process.env.CI,\n  /* Retry on CI only */\n  retries: process.env.CI ? 2 : 0,\n  /* Opt out of parallel tests on CI. */\n  workers: process.env.CI ? 1 : undefined,\n  /* Reporter to use. See https://playwright.dev/docs/test-reporters */\n  reporter: 'html',\n  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */\n  use: {\n    /* Base URL to use in actions like `await page.goto('/')`. */\n    baseURL: 'http://127.0.0.1:4200/',\n\n    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */\n    trace: 'on-first-retry',\n  },\n\n  /* Configure projects for major browsers */\n  projects: [\n    {\n      name: 'chromium',\n      use: { ...devices['Desktop Chrome'] },\n    },\n\n    {\n      name: 'firefox',\n      use: { ...devices['Desktop Firefox'] },\n    },\n\n    {\n      name: 'webkit',\n      use: { ...devices['Desktop Safari'] },\n    },\n\n    /* Test against mobile viewports. */\n    {\n      name: 'Mobile Chrome',\n      use: { ...devices['Pixel 5'] },\n    },\n    {\n      name: 'Mobile Safari',\n      use: { ...devices['iPhone 12'] },\n    },\n  ],\n\n  /* Run your local dev server before starting the tests */\n  webServer: {\n    command: 'npm run serve',\n    url: 'http://127.0.0.1:4200',\n    reuseExistingServer: !process.env.CI,\n  },\n});\n\n"
  },
  {
    "path": "rollup.config.mjs",
    "content": "import terser from \"@rollup/plugin-terser\";\nimport resolve from \"@rollup/plugin-node-resolve\";\nimport babel from \"@rollup/plugin-babel\";\n\nconst terserOptions = {\n  compress: {\n    passes: 2\n  }\n};\n\nexport default [\n  {\n    input: \"src/lazyload.js\",\n    output: [\n      {\n        file: \"dist/lazyload.iife.js\",\n        name: \"LazyLoad\",\n        format: \"iife\"\n      },\n      {\n        file: \"dist/lazyload.iife.min.js\",\n        name: \"LazyLoad\",\n        format: \"iife\",\n        plugins: [terser(terserOptions)]\n      },\n      {\n        file: \"dist/lazyload.js\",\n        name: \"LazyLoad\",\n        format: \"umd\"\n      },\n      {\n        file: \"dist/lazyload.min.js\",\n        name: \"LazyLoad\",\n        format: \"umd\",\n        plugins: [terser(terserOptions)]\n      }\n    ],\n    plugins: [\n      resolve(),\n      babel({\n        babelHelpers: \"bundled\",\n        exclude: \"node_modules/**\"\n      })\n    ]\n  },\n  {\n    input: \"src/lazyload.js\",\n    output: [\n      {\n        dir: \"dist/esm\",\n        format: \"esm\",\n        preserveModules: true,\n        plugins: [terser(terserOptions)]\n      }\n    ]\n  }\n];\n"
  },
  {
    "path": "src/autoInitialize.js",
    "content": "/* Creates instance and notifies it through the window element */\nconst createInstance = function(classObj, options) {\n  let event;\n  const eventString = \"LazyLoad::Initialized\";\n  const instance = new classObj(options);\n  try {\n    // Works in modern browsers\n    event = new CustomEvent(eventString, { detail: { instance } });\n  } catch (err) {\n    // Works in Internet Explorer (all versions)\n    event = document.createEvent(\"CustomEvent\");\n    event.initCustomEvent(eventString, false, false, { instance });\n  }\n  window.dispatchEvent(event);\n};\n\n/* Auto initialization of one or more instances of LazyLoad, depending on the\n    options passed in (plain object or an array) */\nexport const autoInitialize = (classObj, options) => {\n  if (!options) {\n    return;\n  }\n  if (!options.length) {\n    // Plain object\n    createInstance(classObj, options);\n  } else {\n    // Array of objects\n    for (let i = 0, optionsItem; (optionsItem = options[i]); i += 1) {\n      createInstance(classObj, optionsItem);\n    }\n  }\n};\n"
  },
  {
    "path": "src/callback.js",
    "content": "export const safeCallback = (callback, arg1, arg2, arg3) => {\n  if (!callback || typeof callback !== 'function') {\n    return;\n  }  \n  if (arg3 !== undefined) {\n    callback(arg1, arg2, arg3);\n    return;\n  }\n  if (arg2 !== undefined) {\n    callback(arg1, arg2);\n    return;\n  }\n  callback(arg1);\n};\n"
  },
  {
    "path": "src/cancelOnExit.js",
    "content": "import { removeEventListeners } from \"./event\";\nimport { resetSourcesImg } from \"./reset\";\nimport { restoreImg } from \"./restore\";\nimport { safeCallback } from \"./callback\";\nimport { removeClass } from \"./class\";\nimport { updateLoadingCount } from \"./counters\";\nimport { hasStatusLoading, resetStatus } from \"./data\";\n\nexport const cancelLoading = (element, entry, settings, instance) => {\n  if (!settings.cancel_on_exit) return;\n  if (!hasStatusLoading(element)) return;\n  if (element.tagName !== \"IMG\") return; //Works only on images\n  removeEventListeners(element);\n  resetSourcesImg(element);\n  restoreImg(element);\n  removeClass(element, settings.class_loading);\n  updateLoadingCount(instance, -1);\n  resetStatus(element);\n  safeCallback(settings.callback_cancel, element, entry, instance);\n};\n"
  },
  {
    "path": "src/class.js",
    "content": "import { runningOnBrowser } from \"./environment\";\n\nexport const addClass = (element, className) => {\n  if (!runningOnBrowser) {\n    return;\n  }\n  if (className === \"\") {\n    return;\n  }\n  element.classList.add(className);\n};\n\nexport const removeClass = (element, className) => {\n  if (!runningOnBrowser) {\n    return;\n  }\n  if (className === \"\") {\n    return;\n  }\n  element.classList.remove(className);\n};\n"
  },
  {
    "path": "src/constants.js",
    "content": "export const SRC = \"src\";\nexport const SRCSET = \"srcset\";\nexport const SIZES = \"sizes\";\nexport const POSTER = \"poster\";\nexport const ORIGINALS = \"llOriginalAttrs\";\nexport const DATA = \"data\";"
  },
  {
    "path": "src/counters.js",
    "content": "export const updateLoadingCount = (instance, delta) => {\n  if (!instance) return;\n  instance.loadingCount += delta;\n};\n\nexport const decreaseToLoadCount = (instance) => {\n  if (!instance) return;\n  instance.toLoadCount -= 1;\n};\n\nexport const setToLoadCount = (instance, value) => {\n  if (!instance) return;\n  instance.toLoadCount = value;\n};\n\nexport const isSomethingLoading = (instance) => instance.loadingCount > 0;\n\nexport const haveElementsToLoad = (instance) => instance.toLoadCount > 0;\n"
  },
  {
    "path": "src/data.js",
    "content": "import { statusApplied, statusError, statusLoaded, statusLoading, statusNative } from \"./elementStatus\";\n\nconst dataPrefix = \"data-\";\nconst statusDataName = \"ll-status\";\n\nexport const getData = (element, attribute) => {\n  return element.getAttribute(dataPrefix + attribute);\n};\n\nexport const setData = (element, attribute, value) => {\n  const attrName = dataPrefix + attribute;\n  if (value === null) {\n    element.removeAttribute(attrName);\n    return;\n  }\n  element.setAttribute(attrName, value);\n};\n\nexport const getStatus = (element) => getData(element, statusDataName);\nexport const setStatus = (element, status) => setData(element, statusDataName, status);\nexport const resetStatus = (element) => setStatus(element, null);\n\nexport const hasEmptyStatus = (element) => getStatus(element) === null;\nexport const hasStatusLoading = (element) => getStatus(element) === statusLoading;\nexport const hasStatusError = (element) => getStatus(element) === statusError;\nexport const hasStatusNative = (element) => getStatus(element) === statusNative;\n\nconst statusesAfterLoading = [statusLoading, statusLoaded, statusApplied, statusError];\nexport const hadStartedLoading = (element) => statusesAfterLoading.indexOf(getStatus(element)) >= 0;\n"
  },
  {
    "path": "src/defaults.js",
    "content": "import { isBot, runningOnBrowser } from \"./environment\";\n\nconst defaultSettings = {\n  elements_selector: \".lazy\",\n  container: isBot || runningOnBrowser ? document : null,\n  threshold: 300,\n  thresholds: null,\n  data_src: \"src\",\n  data_srcset: \"srcset\",\n  data_sizes: \"sizes\",\n  data_bg: \"bg\",\n  data_bg_hidpi: \"bg-hidpi\",\n  data_bg_multi: \"bg-multi\",\n  data_bg_multi_hidpi: \"bg-multi-hidpi\",\n  data_bg_set: \"bg-set\",\n  data_poster: \"poster\",\n  class_applied: \"applied\",\n  class_loading: \"loading\",\n  class_loaded: \"loaded\",\n  class_error: \"error\",\n  class_entered: \"entered\",\n  class_exited: \"exited\",\n  unobserve_completed: true,\n  unobserve_entered: false,\n  cancel_on_exit: true,\n  callback_enter: null,\n  callback_exit: null,\n  callback_applied: null,\n  callback_loading: null,\n  callback_loaded: null,\n  callback_error: null,\n  callback_finish: null,\n  callback_cancel: null,\n  use_native: false,\n  restore_on_error: false\n};\n\nexport const getExtendedSettings = (customSettings) => {\n  return Object.assign({}, defaultSettings, customSettings);\n};\n"
  },
  {
    "path": "src/dom.js",
    "content": "import { hasEmptyStatus, hasStatusError } from \"./data\";\n\nexport const toArray = (nodeSet) => Array.prototype.slice.call(nodeSet);\n\nexport const queryElements = (settings) =>\n  settings.container.querySelectorAll(settings.elements_selector);\n\nexport const excludeManagedElements = (elements) => toArray(elements).filter(hasEmptyStatus);\n\nexport const hasError = (element) => hasStatusError(element);\nexport const filterErrorElements = (elements) => toArray(elements).filter(hasError);\n\nexport const getElementsToLoad = (elements, settings) =>\n  excludeManagedElements(elements || queryElements(settings));\n"
  },
  {
    "path": "src/elementStatus.js",
    "content": "export const statusLoading = \"loading\";\nexport const statusLoaded = \"loaded\";\nexport const statusApplied = \"applied\";\nexport const statusEntered = \"entered\";\nexport const statusError = \"error\";\nexport const statusNative = \"native\";\n"
  },
  {
    "path": "src/environment.js",
    "content": "export const runningOnBrowser = typeof window !== \"undefined\";\n\nexport const isBot =\n  (runningOnBrowser && !(\"onscroll\" in window)) ||\n  (typeof navigator !== \"undefined\" && /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent));\n\nexport const isHiDpi = runningOnBrowser && window.devicePixelRatio > 1;\n"
  },
  {
    "path": "src/event.js",
    "content": "import { addClass, removeClass } from \"./class\";\nimport { safeCallback } from \"./callback\";\nimport { hasStatusNative, setStatus } from \"./data\";\nimport { statusError, statusLoaded } from \"./elementStatus\";\nimport { deleteTempImage, getTempImage } from \"./tempImage\";\nimport { unobserve } from \"./unobserve\";\nimport { decreaseToLoadCount, haveElementsToLoad, isSomethingLoading, updateLoadingCount } from \"./counters\";\nimport { attrsSrcSrcsetSizes, restoreOriginalAttrs } from \"./originalAttributes\";\n\nconst elementsWithLoadEvent = [\"IMG\", \"IFRAME\", \"VIDEO\", \"OBJECT\"];\nexport const hasLoadEvent = (element) => elementsWithLoadEvent.indexOf(element.tagName) > -1;\n\nexport const checkFinish = (settings, instance) => {\n  if (instance && !isSomethingLoading(instance) && !haveElementsToLoad(instance)) {\n    safeCallback(settings.callback_finish, instance);\n  }\n};\n\nexport const addEventListener = (element, eventName, handler) => {\n  element.addEventListener(eventName, handler);\n  element.llEvLisnrs[eventName] = handler;\n};\n\nexport const removeEventListener = (element, eventName, handler) => {\n  element.removeEventListener(eventName, handler);\n};\n\nexport const hasEventListeners = (element) => {\n  return !!element.llEvLisnrs;\n};\n\nexport const addEventListeners = (element, loadHandler, errorHandler) => {\n  if (!hasEventListeners(element)) element.llEvLisnrs = {};\n  const loadEventName = element.tagName === \"VIDEO\" ? \"loadeddata\" : \"load\";\n  addEventListener(element, loadEventName, loadHandler);\n  addEventListener(element, \"error\", errorHandler);\n};\n\nexport const removeEventListeners = (element) => {\n  if (!hasEventListeners(element)) {\n    return;\n  }\n  const eventListeners = element.llEvLisnrs;\n  for (let eventName in eventListeners) {\n    const handler = eventListeners[eventName];\n    removeEventListener(element, eventName, handler);\n  }\n  delete element.llEvLisnrs;\n};\n\nexport const doneHandler = (element, settings, instance) => {\n  deleteTempImage(element);\n  updateLoadingCount(instance, -1);\n  decreaseToLoadCount(instance);\n  removeClass(element, settings.class_loading);\n  if (settings.unobserve_completed) {\n    unobserve(element, instance);\n  }\n};\n\nexport const loadHandler = (event, element, settings, instance) => {\n  const goingNative = hasStatusNative(element);\n  doneHandler(element, settings, instance);\n  addClass(element, settings.class_loaded);\n  setStatus(element, statusLoaded);\n  safeCallback(settings.callback_loaded, element, instance);\n  if (!goingNative) checkFinish(settings, instance);\n};\n\nexport const errorHandler = (event, element, settings, instance) => {\n  const goingNative = hasStatusNative(element);\n  doneHandler(element, settings, instance);\n  addClass(element, settings.class_error);\n  setStatus(element, statusError);\n  safeCallback(settings.callback_error, element, instance);\n  if (settings.restore_on_error) restoreOriginalAttrs(element, attrsSrcSrcsetSizes);\n  if (!goingNative) checkFinish(settings, instance);\n};\n\nexport const addOneShotEventListeners = (element, settings, instance) => {\n  const elementToListenTo = getTempImage(element) || element;\n  if (hasEventListeners(elementToListenTo)) {\n    // This happens when loading is retried twice\n    return;\n  }\n  const _loadHandler = (event) => {\n    loadHandler(event, element, settings, instance);\n    removeEventListeners(elementToListenTo);\n  };\n  const _errorHandler = (event) => {\n    errorHandler(event, element, settings, instance);\n    removeEventListeners(elementToListenTo);\n  };\n  addEventListeners(elementToListenTo, _loadHandler, _errorHandler);\n};\n"
  },
  {
    "path": "src/forEachSource.js",
    "content": "const getSourceTags = (parentTag) => {\n  let sourceTags = [];\n  for (let i = 0, childTag; (childTag = parentTag.children[i]); i += 1) {\n    if (childTag.tagName === \"SOURCE\") {\n      sourceTags.push(childTag);\n    }\n  }\n  return sourceTags;\n};\n\nexport const forEachPictureSource = (element, fn) => {\n  const parent = element.parentNode;\n  if (!parent || parent.tagName !== \"PICTURE\") {\n    return;\n  }\n  let sourceTags = getSourceTags(parent);\n  sourceTags.forEach(fn);\n};\n\nexport const forEachVideoSource = (element, fn) => {\n  let sourceTags = getSourceTags(element);\n  sourceTags.forEach(fn);\n};"
  },
  {
    "path": "src/intersectionHandlers.js",
    "content": "import { safeCallback } from \"./callback\";\nimport { load } from \"./load\";\nimport { hadStartedLoading, hasEmptyStatus, setStatus } from \"./data\";\nimport { cancelLoading } from \"./cancelOnExit\";\nimport { unobserveEntered } from \"./unobserve\";\nimport { statusEntered } from \"./elementStatus\";\nimport { addClass, removeClass } from \"./class\";\n\nexport const onEnter = (element, entry, settings, instance) => {\n  const dontLoad = hadStartedLoading(element); /* Save status\n        before setting it, to prevent loading it again. Fixes #526. */\n  setStatus(element, statusEntered);\n  addClass(element, settings.class_entered);\n  removeClass(element, settings.class_exited);\n  unobserveEntered(element, settings, instance);\n  safeCallback(settings.callback_enter, element, entry, instance);\n  if (dontLoad) return;\n  load(element, settings, instance);\n};\n\nexport const onExit = (element, entry, settings, instance) => {\n  if (hasEmptyStatus(element)) return; //Ignore the first pass, at landing\n  addClass(element, settings.class_exited);\n  cancelLoading(element, entry, settings, instance);\n  safeCallback(settings.callback_exit, element, entry, instance);\n};\n"
  },
  {
    "path": "src/intersectionObserver.js",
    "content": "import { onEnter, onExit } from \"./intersectionHandlers\";\nimport { shouldUseNative } from \"./native\";\nimport { resetObserver } from \"./unobserve\";\n\nexport const isIntersecting = (entry) => entry.isIntersecting || entry.intersectionRatio > 0;\n\nconst getObserverSettings = (settings) => ({\n  root: settings.container === document ? null : settings.container,\n  rootMargin: settings.thresholds || settings.threshold + \"px\"\n});\n\nconst intersectionHandler = (entries, settings, instance) => {\n  entries.forEach((entry) =>\n    isIntersecting(entry)\n      ? onEnter(entry.target, entry, settings, instance)\n      : onExit(entry.target, entry, settings, instance)\n  );\n};\n\nexport const observeElements = (observer, elements) => {\n  elements.forEach((element) => {\n    observer.observe(element);\n  });\n};\n\nexport const updateObserver = (observer, elementsToObserve) => {\n  resetObserver(observer);\n  observeElements(observer, elementsToObserve);\n};\n\nexport const setObserver = (settings, instance) => {\n  if (shouldUseNative(settings)) {\n    return;\n  }\n  instance._observer = new IntersectionObserver((entries) => {\n    intersectionHandler(entries, settings, instance);\n  }, getObserverSettings(settings));\n};\n"
  },
  {
    "path": "src/lazyload.js",
    "content": "import { getExtendedSettings } from \"./defaults\";\nimport { autoInitialize } from \"./autoInitialize\";\nimport { load } from \"./load\";\nimport { setObserver, updateObserver } from \"./intersectionObserver\";\nimport { isBot, runningOnBrowser } from \"./environment\";\nimport { loadAllNative, shouldUseNative } from \"./native\";\nimport { resetOnlineCheck, setOnlineCheck } from \"./online\";\nimport { getElementsToLoad, queryElements } from \"./dom\";\nimport { resetStatus } from \"./data\";\nimport { setToLoadCount } from \"./counters\";\nimport { unobserve } from \"./unobserve\";\nimport { restore } from \"./restore\";\nimport { deleteOriginalAttrs } from \"./originalAttributes\";\n\nconst LazyLoad = function(customSettings, elements) {\n  const settings = getExtendedSettings(customSettings);\n  this._settings = settings;\n  this.loadingCount = 0;\n  setObserver(settings, this);\n  setOnlineCheck(settings, this);\n  this.update(elements);\n};\n\nLazyLoad.prototype = {\n  update: function(givenNodeset) {\n    const settings = this._settings;\n    const elementsToLoad = getElementsToLoad(givenNodeset, settings);\n    setToLoadCount(this, elementsToLoad.length);\n\n    if (isBot) {\n      this.loadAll(elementsToLoad);\n      return;\n    }\n    if (shouldUseNative(settings)) {\n      loadAllNative(elementsToLoad, settings, this);\n      return;\n    }\n\n    updateObserver(this._observer, elementsToLoad);\n  },\n\n  destroy: function() {\n    // Observer\n    if (this._observer) {\n      this._observer.disconnect();\n    }\n    // Clean handlers\n    resetOnlineCheck(this);\n    // Clean custom attributes on elements\n    queryElements(this._settings).forEach((element) => {\n      deleteOriginalAttrs(element);\n    });\n    // Delete all internal props\n    delete this._observer;\n    delete this._settings;\n    delete this._onlineHandler;\n    delete this.loadingCount;\n    delete this.toLoadCount;\n  },\n\n  loadAll: function(elements) {\n    const settings = this._settings;\n    const elementsToLoad = getElementsToLoad(elements, settings);\n    elementsToLoad.forEach((element) => {\n      unobserve(element, this);\n      load(element, settings, this);\n    });\n  },\n\n  restoreAll: function() {\n    const settings = this._settings;\n    queryElements(settings).forEach((element) => {\n      restore(element, settings);\n    });\n  }\n};\n\nLazyLoad.load = (element, customSettings) => {\n  const settings = getExtendedSettings(customSettings);\n  load(element, settings);\n};\n\nLazyLoad.resetStatus = (element) => {\n  resetStatus(element);\n};\n\n// Automatic instances creation if required (useful for async script loading)\nif (runningOnBrowser) {\n  autoInitialize(LazyLoad, window.lazyLoadOptions);\n}\n\nexport default LazyLoad;\n"
  },
  {
    "path": "src/load.js",
    "content": "import { setBackground, setImgsetBackground, setMultiBackground, setSources, setSourcesNative } from \"./set\";\nimport { setStatus } from \"./data\";\nimport { addOneShotEventListeners, hasLoadEvent } from \"./event\";\nimport { statusNative } from \"./elementStatus\";\nimport { addTempImage } from \"./tempImage\";\nimport { saveOriginalBackgroundStyle } from \"./originalAttributes\";\n\nconst loadBackground = (element, settings, instance) => {\n  addTempImage(element);\n  addOneShotEventListeners(element, settings, instance);\n  saveOriginalBackgroundStyle(element);\n  setBackground(element, settings, instance);\n  setMultiBackground(element, settings, instance);\n  setImgsetBackground(element, settings, instance);\n};\n\nconst loadRegular = (element, settings, instance) => {\n  addOneShotEventListeners(element, settings, instance);\n  setSources(element, settings, instance);\n};\n\nexport const load = (element, settings, instance) => {\n  if (hasLoadEvent(element)) {\n    loadRegular(element, settings, instance);\n  } else {\n    loadBackground(element, settings, instance);\n  }\n};\n\nexport const loadNative = (element, settings, instance) => {\n  element.setAttribute(\"loading\", \"lazy\");\n  addOneShotEventListeners(element, settings, instance);\n  setSourcesNative(element, settings);\n  setStatus(element, statusNative);\n};\n"
  },
  {
    "path": "src/native.js",
    "content": "import { loadNative } from \"./load\";\nimport { setToLoadCount } from \"./counters\";\n\nconst tagsWithNativeLazy = [\"IMG\", \"IFRAME\", \"VIDEO\"];\n\nexport const shouldUseNative = (settings) =>\n  settings.use_native && \"loading\" in HTMLImageElement.prototype;\n\nexport const loadAllNative = (elements, settings, instance) => {\n  elements.forEach((element) => {\n    if (tagsWithNativeLazy.indexOf(element.tagName) === -1) {\n      return;\n    }\n    loadNative(element, settings, instance);\n  });\n  setToLoadCount(instance, 0);\n};\n"
  },
  {
    "path": "src/online.js",
    "content": "import { runningOnBrowser } from \"./environment\";\nimport { resetStatus } from \"./data\";\nimport { removeClass } from \"./class\";\nimport { filterErrorElements, queryElements } from \"./dom\";\n\nexport const retryLazyLoad = (settings, instance) => {\n  const errorElements = filterErrorElements(queryElements(settings));\n  errorElements.forEach((element) => {\n    removeClass(element, settings.class_error);\n    resetStatus(element);\n  });\n  instance.update();\n};\n\nexport const setOnlineCheck = (settings, instance) => {\n  if (!runningOnBrowser) {\n    return;\n  }\n  instance._onlineHandler = () => {\n    retryLazyLoad(settings, instance);\n  };\n  window.addEventListener(\"online\", instance._onlineHandler);\n};\n\nexport const resetOnlineCheck = (instance) => {\n  if (!runningOnBrowser) {\n    return;\n  }\n  window.removeEventListener(\"online\", instance._onlineHandler);\n};"
  },
  {
    "path": "src/originalAttributes.js",
    "content": "import { DATA, ORIGINALS, POSTER, SIZES, SRC, SRCSET } from \"./constants.js\";\n\nexport const attrsSrc = [SRC];\nexport const attrsSrcPoster = [SRC, POSTER];\nexport const attrsSrcSrcsetSizes = [SRC, SRCSET, SIZES];\nexport const attrsData = [DATA];\n\nexport const hasOriginalAttrs = (element) => !!element[ORIGINALS];\nexport const getOriginalAttrs = (element) => element[ORIGINALS];\nexport const deleteOriginalAttrs = (element) => delete element[ORIGINALS];\n\n// ## SAVE ##\n\nexport const setOriginalsObject = (element, attributes) => {\n  if (hasOriginalAttrs(element)) {\n    return;\n  }\n  const originals = {};\n  attributes.forEach((attribute) => {\n    originals[attribute] = element.getAttribute(attribute);\n  });\n  element[ORIGINALS] = originals;\n};\n\nexport const saveOriginalBackgroundStyle = (element) => {\n  if (hasOriginalAttrs(element)) {\n    return;\n  }\n  element[ORIGINALS] = { backgroundImage: element.style.backgroundImage };\n};\n\n// ## RESTORE ##\n\nconst setOrResetAttribute = (element, attrName, value) => {\n  if (!value) {\n    element.removeAttribute(attrName);\n    return;\n  }\n  element.setAttribute(attrName, value);\n};\n\nexport const restoreOriginalAttrs = (element, attributes) => {\n  if (!hasOriginalAttrs(element)) {\n    return;\n  }\n  const originals = getOriginalAttrs(element);\n  attributes.forEach((attribute) => {\n    setOrResetAttribute(element, attribute, originals[attribute]);\n  });\n};\n\nexport const restoreOriginalBgImage = (element) => {\n  if (!hasOriginalAttrs(element)) {\n    return;\n  }\n  const originals = getOriginalAttrs(element);\n  element.style.backgroundImage = originals.backgroundImage;\n};\n"
  },
  {
    "path": "src/reset.js",
    "content": "import { SIZES, SRC, SRCSET } from \"./constants.js\";\nimport { forEachPictureSource } from \"./forEachSource\";\n\nconst removeImageAttributes = (element) => {\n  element.removeAttribute(SRC);\n  element.removeAttribute(SRCSET);\n  element.removeAttribute(SIZES);\n};\n\nexport const resetSourcesImg = (element) => {\n  forEachPictureSource(element, (sourceTag) => {\n    removeImageAttributes(sourceTag);\n  });\n  removeImageAttributes(element);\n};"
  },
  {
    "path": "src/restore.js",
    "content": "import { removeClass } from \"./class\";\n\nimport { hasEmptyStatus, hasStatusNative, resetStatus } from \"./data\";\nimport { forEachPictureSource, forEachVideoSource } from \"./forEachSource\";\nimport {\n  attrsData,\n  attrsSrc,\n  attrsSrcPoster,\n  attrsSrcSrcsetSizes,\n  deleteOriginalAttrs,\n  restoreOriginalAttrs,\n  restoreOriginalBgImage\n} from \"./originalAttributes\";\n\nexport const restoreImg = (imgEl) => {\n  forEachPictureSource(imgEl, (sourceEl) => {\n    restoreOriginalAttrs(sourceEl, attrsSrcSrcsetSizes);\n  });\n  restoreOriginalAttrs(imgEl, attrsSrcSrcsetSizes);\n};\n\nexport const restoreVideo = (videoEl) => {\n  forEachVideoSource(videoEl, (sourceEl) => {\n    restoreOriginalAttrs(sourceEl, attrsSrc);\n  });\n  restoreOriginalAttrs(videoEl, attrsSrcPoster);\n  videoEl.load();\n};\n\nexport const restoreIframe = (iframeEl) => {\n  restoreOriginalAttrs(iframeEl, attrsSrc);\n};\n\nexport const restoreObject = (objectEl) => {\n  restoreOriginalAttrs(objectEl, attrsData);\n};\n\nconst restoreFunctions = {\n  IMG: restoreImg,\n  IFRAME: restoreIframe,\n  VIDEO: restoreVideo,\n  OBJECT: restoreObject\n};\n\nconst restoreAttributes = (element) => {\n  const restoreFunction = restoreFunctions[element.tagName];\n  if (!restoreFunction) {\n    restoreOriginalBgImage(element);\n    return;\n  }\n  restoreFunction(element);\n};\n\nconst resetClasses = (element, settings) => {\n  if (hasEmptyStatus(element) || hasStatusNative(element)) {\n    return;\n  }\n  removeClass(element, settings.class_entered);\n  removeClass(element, settings.class_exited);\n  removeClass(element, settings.class_applied);\n  removeClass(element, settings.class_loading);\n  removeClass(element, settings.class_loaded);\n  removeClass(element, settings.class_error);\n};\n\nexport const restore = (element, settings) => {\n  restoreAttributes(element);\n  resetClasses(element, settings);\n  resetStatus(element);\n  deleteOriginalAttrs(element);\n};\n"
  },
  {
    "path": "src/set.js",
    "content": "import { DATA, POSTER, SIZES, SRC, SRCSET } from \"./constants.js\";\nimport { getData, setStatus } from \"./data\";\nimport { statusApplied, statusLoading } from \"./elementStatus\";\nimport { safeCallback } from \"./callback\";\nimport { addClass } from \"./class\";\nimport { getTempImage } from \"./tempImage\";\nimport { isHiDpi } from \"./environment\";\nimport { unobserve } from \"./unobserve\";\nimport { updateLoadingCount } from \"./counters\";\nimport { forEachPictureSource, forEachVideoSource } from \"./forEachSource\";\nimport { attrsData, attrsSrc, attrsSrcPoster, attrsSrcSrcsetSizes, setOriginalsObject } from \"./originalAttributes\";\n\nexport const manageApplied = (element, settings, instance) => {\n  addClass(element, settings.class_applied);\n  setStatus(element, statusApplied);\n  // Instance is not provided when loading is called from static class\n  if (!instance) return;\n  if (settings.unobserve_completed) {\n    // Unobserve now because we can't do it on load\n    unobserve(element, settings, instance);\n  }\n  safeCallback(settings.callback_applied, element, instance);\n};\n\nexport const manageLoading = (element, settings, instance) => {\n  addClass(element, settings.class_loading);\n  setStatus(element, statusLoading);\n  // Instance is not provided when loading is called from static class\n  if (!instance) return;\n  updateLoadingCount(instance, +1);\n  safeCallback(settings.callback_loading, element, instance);\n};\n\nexport const setAttributeIfValue = (element, attrName, value) => {\n  if (!value) {\n    return;\n  }\n  element.setAttribute(attrName, value);\n};\n\nexport const setImageAttributes = (element, settings) => {\n  setAttributeIfValue(element, SIZES, getData(element, settings.data_sizes));\n  setAttributeIfValue(element, SRCSET, getData(element, settings.data_srcset));\n  setAttributeIfValue(element, SRC, getData(element, settings.data_src));\n};\n\nexport const setSourcesImg = (imgEl, settings) => {\n  forEachPictureSource(imgEl, (sourceTag) => {\n    setOriginalsObject(sourceTag, attrsSrcSrcsetSizes);\n    setImageAttributes(sourceTag, settings);\n  });\n  setOriginalsObject(imgEl, attrsSrcSrcsetSizes);\n  setImageAttributes(imgEl, settings);\n};\n\nexport const setSourcesIframe = (iframe, settings) => {\n  setOriginalsObject(iframe, attrsSrc);\n  setAttributeIfValue(iframe, SRC, getData(iframe, settings.data_src));\n};\n\nexport const setSourcesVideo = (videoEl, settings) => {\n  forEachVideoSource(videoEl, (sourceEl) => {\n    setOriginalsObject(sourceEl, attrsSrc);\n    setAttributeIfValue(sourceEl, SRC, getData(sourceEl, settings.data_src));\n  });\n  setOriginalsObject(videoEl, attrsSrcPoster);\n\n  setAttributeIfValue(videoEl, POSTER, getData(videoEl, settings.data_poster));\n  setAttributeIfValue(videoEl, SRC, getData(videoEl, settings.data_src));\n  videoEl.load();\n};\n\nexport const setSourcesObject = (object, settings) => {\n  setOriginalsObject(object, attrsData);\n  setAttributeIfValue(object, DATA, getData(object, settings.data_src));\n};\n\nexport const setBackground = (element, settings, instance) => {\n  const bg1xValue = getData(element, settings.data_bg);\n  const bgHiDpiValue = getData(element, settings.data_bg_hidpi);\n  const bgDataValue = isHiDpi && bgHiDpiValue ? bgHiDpiValue : bg1xValue;\n  if (!bgDataValue) return;\n  element.style.backgroundImage = `url(\"${bgDataValue}\")`;\n  getTempImage(element).setAttribute(SRC, bgDataValue);\n  manageLoading(element, settings, instance);\n};\n\n// NOTE: THE TEMP IMAGE TRICK CANNOT BE DONE WITH data-multi-bg\n// BECAUSE INSIDE ITS VALUES MUST BE WRAPPED WITH URL() AND ONE OF THEM\n// COULD BE A GRADIENT BACKGROUND IMAGE\nexport const setMultiBackground = (element, settings, instance) => {\n  const bg1xValue = getData(element, settings.data_bg_multi);\n  const bgHiDpiValue = getData(element, settings.data_bg_multi_hidpi);\n  const bgDataValue = isHiDpi && bgHiDpiValue ? bgHiDpiValue : bg1xValue;\n  if (!bgDataValue) {\n    return;\n  }\n  element.style.backgroundImage = bgDataValue;\n  manageApplied(element, settings, instance);\n};\n\nexport const setImgsetBackground = (element, settings, instance) => {\n  const bgImgSetDataValue = getData(element, settings.data_bg_set);\n  if (!bgImgSetDataValue) {\n    return;\n  }\n  const imgSetValues = bgImgSetDataValue.split(\"|\");\n  let bgImageValues = imgSetValues.map((value) => `image-set(${value})`);\n  element.style.backgroundImage = bgImageValues.join();\n  manageApplied(element, settings, instance);\n};\n\nconst setSourcesFunctions = {\n  IMG: setSourcesImg,\n  IFRAME: setSourcesIframe,\n  VIDEO: setSourcesVideo,\n  OBJECT: setSourcesObject\n};\n\nexport const setSourcesNative = (element, settings) => {\n  const setSourcesFunction = setSourcesFunctions[element.tagName];\n  if (!setSourcesFunction) {\n    return;\n  }\n  setSourcesFunction(element, settings);\n};\n\nexport const setSources = (element, settings, instance) => {\n  const setSourcesFunction = setSourcesFunctions[element.tagName];\n  if (!setSourcesFunction) {\n    return;\n  }\n  setSourcesFunction(element, settings);\n  manageLoading(element, settings, instance);\n};\n"
  },
  {
    "path": "src/tempImage.js",
    "content": "export const addTempImage = (element) => {\n  element.llTempImage = document.createElement(\"IMG\");\n};\n\nexport const deleteTempImage = (element) => {\n  delete element.llTempImage;\n};\n\nexport const getTempImage = (element) => element.llTempImage;\n"
  },
  {
    "path": "src/unobserve.js",
    "content": "export const unobserve = (element, instance) => {\n  if (!instance) return;\n  const observer = instance._observer;\n  if (!observer) return;\n  observer.unobserve(element);\n};\n\nexport const resetObserver = (observer) => {\n  observer.disconnect();\n};\n\nexport const unobserveEntered = (element, settings, instance) => {\n  if (settings.unobserve_entered) unobserve(element, instance);\n};"
  },
  {
    "path": "tests/e2e/background_image.spec.js",
    "content": "import { expect, test } from \"@playwright/test\";\n\nconst pagesWithSimpleImages = [\n  { url: \"/demos/background_images.html\", description: \"Background images\" }\n];\n\nfor (const { url, description } of pagesWithSimpleImages) {\n  test(description, async ({ page }) => {\n    await page.goto(url);\n    const lazyElements = await page.locator(\".lazy\");\n    await page.waitForLoadState(\"load\");\n    const elementsCount = await lazyElements.count();\n\n    const devicePixelRatio = await page.evaluate(() => window.devicePixelRatio);\n\n    // Eventually scroll into view and check if it loads\n    for (let i = 0; i < elementsCount; i++) {\n      const element = lazyElements.nth(i);\n      await element.scrollIntoViewIfNeeded();\n\n      // Set expectations\n      const dataBg = await element.getAttribute(\"data-bg\");\n      const dataBgHidpi = await element.getAttribute(\"data-bg-hidpi\");\n      const expectedBg = `background-image: url(\"${dataBg}\");`;\n      const expectedHiDpiBg = `background-image: url(\"${dataBgHidpi}\");`;\n\n      if (!dataBgHidpi) {\n        await expect(element).toHaveAttribute(\"style\", expectedBg);\n        continue;\n      }\n\n      if (devicePixelRatio > 1) {\n        await expect(element).toHaveAttribute(\"style\", expectedHiDpiBg);\n      } else {\n        await expect(element).toHaveAttribute(\"style\", expectedBg);\n      }\n    }\n  });\n}\n"
  },
  {
    "path": "tests/e2e/background_image_multi.spec.js",
    "content": "import { expect, test } from \"@playwright/test\";\n\nconst pagesWithSimpleImages = [\n  { url: \"/demos/background_images_multi.html\", description: \"Multiple background images\" }\n];\n\nfor (const { url, description } of pagesWithSimpleImages) {\n  test(description, async ({ page }) => {\n    await page.goto(url);\n    const lazyElements = await page.locator(\".lazy\");\n    await page.waitForLoadState(\"load\");\n    const elementsCount = await lazyElements.count();\n\n    const devicePixelRatio = await page.evaluate(() => window.devicePixelRatio);\n\n    // Eventually scroll into view and check if it loads\n    for (let i = 0; i < elementsCount; i++) {\n      const element = lazyElements.nth(i);\n      await element.scrollIntoViewIfNeeded();\n\n      // Set expectations\n      const dataBgMulti = await element.getAttribute(\"data-bg-multi\");\n      const dataBgMultiHidpi = await element.getAttribute(\"data-bg-multi-hidpi\");\n      const expectedBg = `background-image: ${dataBgMulti};`;\n      const expectedHiDpiBg = `background-image: ${dataBgMultiHidpi};`;\n\n      if (!dataBgMultiHidpi) {\n        await expect(element).toHaveAttribute(\"style\", expectedBg);\n        continue;\n      }\n\n      if (devicePixelRatio > 1) {\n        await expect(element).toHaveAttribute(\"style\", expectedHiDpiBg);\n      } else {\n        await expect(element).toHaveAttribute(\"style\", expectedBg);\n      }\n    }\n  });\n}\n"
  },
  {
    "path": "tests/e2e/image_basic.spec.js",
    "content": "import { expect, test } from \"@playwright/test\";\n\nconst pagesWithSimpleImages = [\n  { url: \"/demos/image_basic.html\", description: \"Basic usage with image\" },\n  { url: \"/demos/image_ph_inline.html\", description: \"With inline placeholder image\" },\n  { url: \"/demos/image_ph_external.html\", description: \"With external placeholder image\" },\n  { url: \"/demos/async.html\", description: \"Async initialization\" },\n  { url: \"/demos/async_multiple.html\", description: \"Async initialization - multiple instances\" },\n];\n\nfor (const { url, description } of pagesWithSimpleImages) {\n  test(description, async ({ page }) => {\n    await page.goto(url);\n    const lazyImages = await page.locator(\".lazy\");\n    await page.waitForLoadState(\"load\");\n    const imageCount = await lazyImages.count();\n\n    // Eventually scroll into view and check if it loads\n    for (let i = 0; i < imageCount; i++) {\n      const image = lazyImages.nth(i);\n      await image.scrollIntoViewIfNeeded();\n\n      // Check the src attribute\n      const expectedSrc = await image.getAttribute(\"data-src\");\n      await expect(image).toHaveAttribute(\"src\", expectedSrc);\n    }\n  });\n}\n"
  },
  {
    "path": "tests/unit/cancelOnExit.test.js",
    "content": "import expectExtend from \"./lib/expectExtend\";\nimport getFakeInstance from \"./lib/getFakeInstance\";\nimport { expect, beforeEach, afterEach, describe, test } from \"@jest/globals\";\n\nimport { cancelLoading } from \"../../src/cancelOnExit\";\nimport { getExtendedSettings } from \"../../src/defaults\";\nimport { getStatus, setStatus } from \"../../src/data\";\nimport { statusLoaded } from \"../../src/elementStatus\";\nimport { setSources } from \"../../src/set\";\n\nexpectExtend(expect);\n\nvar outerDiv, instance, settings;\n\nbeforeEach(() => {\n  outerDiv = document.createElement(\"div\");\n  settings = getExtendedSettings();\n  instance = getFakeInstance();\n});\n\nafterEach(() => {\n  outerDiv = null;\n  settings = null;\n  instance = null;\n});\n\ndescribe(\"Cancel loading on img\", () => {\n  let img;\n  const url1 = \"1.gif\";\n  const url100 = \"100.gif\";\n  const url200 = \"200.gif\";\n  const sizes100 = \"100vw\";\n  const entry = \"fake-entry\";\n\n  beforeEach(() => {\n    outerDiv.appendChild((img = document.createElement(\"img\")));\n  });\n\n  afterEach(() => {\n    outerDiv.removeChild(img);\n    img = null;\n  });\n\n  test(\"Does nothing if cancel_on_exit is false\", () => {\n    settings.cancel_on_exit = false;\n    img.setAttribute(\"src\", url1);\n    img.setAttribute(\"data-src\", url200);\n    setSources(img, settings);\n    cancelLoading(img, entry, settings, instance);\n    expect(img).toHaveAttribute(\"src\", url200);\n  });\n\n  test(\"Does nothing if element is not loading\", () => {\n    img.setAttribute(\"src\", url200);\n    setSources(img, settings);\n    setStatus(img, statusLoaded);\n    cancelLoading(img, entry, settings, instance);\n    expect(img).toHaveAttribute(\"src\", url200);\n  });\n\n  test(\"Restores original attributes\", () => {\n    img.setAttribute(\"src\", url1);\n    img.setAttribute(\"data-src\", url100);\n    img.setAttribute(\"data-srcset\", url200);\n    img.setAttribute(\"data-sizes\", sizes100);\n    setSources(img, settings, instance);\n    cancelLoading(img, entry, settings, instance);\n    expect(img).toHaveAttribute(\"src\", url1);\n    expect(img).not.toHaveAttribute(\"srcset\");\n    expect(img).not.toHaveAttribute(\"sizes\");\n  });\n\n  test(\"Removes loading class\", () => {\n    img.setAttribute(\"src\", url200);\n    setSources(img, settings);\n    cancelLoading(img, entry, settings, instance);\n    expect(img.className).toBe(\"\");\n  });\n\n  test(\"Decreases loading count\", () => {\n    img.setAttribute(\"src\", url200);\n    setSources(img, settings, instance);\n    cancelLoading(img, entry, settings, instance);\n    expect(instance.loadingCount).toBe(0);\n  });\n\n  test(\"Resets internal status\", () => {\n    img.setAttribute(\"src\", url200);\n    setSources(img, settings, instance);\n    cancelLoading(img, entry, settings, instance);\n    expect(getStatus(img)).toBe(null);\n  });\n\n  test(\"Callbacks are called\", () => {\n    const cancelCb = jest.fn();\n    settings.callback_cancel = cancelCb;\n    setSources(img, settings, instance);\n    cancelLoading(img, entry, settings, instance);\n    expect(cancelCb).toHaveBeenCalledTimes(1);\n    expect(cancelCb).toHaveBeenCalledWith(img, entry, instance);\n  });\n});\n\ndescribe(\"Cancel loading on iframe\", () => {\n  let iframe;\n  const iframeSrc = \"https://github.com\";\n  const entry = \"fake-entry\";\n\n  beforeEach(() => {\n    outerDiv.appendChild((iframe = document.createElement(\"iframe\")));\n  });\n\n  afterEach(() => {\n    outerDiv.removeChild(iframe);\n    iframe = null;\n  });\n\n  test(\"Doesn't cancel loading\", () => {\n    iframe.setAttribute(\"data-src\", iframeSrc);\n    setSources(iframe, settings, instance);\n    cancelLoading(iframe, entry, settings, instance);\n    expect(iframe).toHaveAttribute(\"src\", iframeSrc);\n  });\n});\n"
  },
  {
    "path": "tests/unit/lib/expectExtend.js",
    "content": "const extensions = {\n  toHaveAttributeValue: (element, attributeName, valueToVerify) => {\n    const actualValue = element.getAttribute(attributeName);\n    const pass = actualValue === valueToVerify;\n    return pass ? {\n      message: () => `${element.tagName} has attribute \"${attributeName}\" set to \"${valueToVerify}\"`,\n      pass: true\n    } : {\n      message: () => `expected ${element.tagName} to have attribute \"${attributeName}\" set to \"${valueToVerify}\", received \"${actualValue}\"`,\n      pass: false\n    };\n  },\n  toHaveAttribute: (element, attributeName) => {\n    const pass = element.hasAttribute(attributeName);\n    return pass ? {\n      message: () => `${element.tagName} has attribute \"${attributeName}\"\" with value \"${element.getAttribute(attributeName)}\"`,\n      pass: true\n    } : {\n      message: () => `expected ${element.tagName} to have attribute \"${attributeName}\"`,\n      pass: false\n    };\n  },\n  toHaveClassName: (element, className) => {\n    const pass = element.classList.contains(className);\n    return pass ? {\n      message: () => `${element.tagName} has class \"${className}\"`,\n      pass: true\n    } : {\n      message: () => `expected ${element.tagName} to have class \"${className}\"`,\n      pass: false\n    };\n  }\n};\n\n\nexport default (expect) => {\n  expect.extend(extensions);\n};\n"
  },
  {
    "path": "tests/unit/lib/getFakeInstance.js",
    "content": "export default () => {\n  return {\n    loadingCount: 0,\n    toLoadCount: 0\n  };\n};\n"
  },
  {
    "path": "tests/unit/load.test.js",
    "content": "import expectExtend from \"./lib/expectExtend\";\nimport getFakeInstance from \"./lib/getFakeInstance\";\nimport { expect, beforeEach, afterEach, describe, test } from \"@jest/globals\";\n\nimport { load } from \"../../src/load\";\nimport { getExtendedSettings } from \"../../src/defaults\";\nimport { getStatus } from \"../../src/data\";\nimport { statusLoading } from \"../../src/elementStatus\";\n\nexpectExtend(expect);\n\nvar outerDiv, settings, instance;\n\nbeforeEach(() => {\n  outerDiv = document.createElement(\"div\");\n  settings = getExtendedSettings();\n  instance = getFakeInstance();\n});\n\nafterEach(() => {\n  outerDiv = null;\n  settings = null;\n  instance = null;\n});\n\ndescribe(\"load...\", () => {\n  let img;\n\n  beforeEach(() => {\n    outerDiv.appendChild((img = document.createElement(\"img\")));\n  });\n\n  afterEach(() => {\n    outerDiv.removeChild(img);\n    img = null;\n  });\n\n  test(\"status is set\", () => {\n    load(img, {});\n    const status = getStatus(img);\n    expect(status).toBe(statusLoading);\n  });\n\n  test(\"callbacks are called\", () => {\n    const loadingCb = jest.fn();\n    settings.callback_loading = loadingCb;\n    load(img, settings, instance);\n    expect(loadingCb).toHaveBeenCalledTimes(1);\n    expect(loadingCb).toHaveBeenCalledWith(img, instance);\n  });\n});\n"
  },
  {
    "path": "tests/unit/originalAttributes.test.js",
    "content": "import expectExtend from \"./lib/expectExtend\";\nimport getFakeInstance from \"./lib/getFakeInstance\";\nimport { getExtendedSettings } from \"../../src/defaults\";\nimport { expect, beforeEach, afterEach, describe, test } from \"@jest/globals\";\n\nimport { setSources } from \"../../src/set\";\nimport { getOriginalAttrs } from \"../../src/originalAttributes\";\n\nexpectExtend(expect);\n\nvar outerDiv, settings, instance;\n\nbeforeEach(() => {\n  outerDiv = document.createElement(\"div\");\n  settings = getExtendedSettings();\n  instance = getFakeInstance();\n});\n\nafterEach(() => {\n  outerDiv = null;\n  settings = null;\n  instance = null;\n});\n\ndescribe(\"Original attributes for images\", () => {\n  let img;\n  const url1 = \"1.gif\";\n  const url2 = \"2.gif\";\n  const url200 = \"200.gif\";\n  const url400 = \"400.gif\";\n  const sizes100 = \"100vw\";\n  const sizes50 = \"50vw\";\n\n  beforeEach(() => {\n    outerDiv.appendChild((img = document.createElement(\"img\")));\n  });\n\n  afterEach(() => {\n    outerDiv.removeChild(img);\n    img = null;\n  });\n\n  test(\"are saved correctly\", () => {\n    img.setAttribute(\"src\", url1);\n    img.setAttribute(\"srcset\", url2);\n    img.setAttribute(\"sizes\", sizes100);\n    img.setAttribute(\"data-src\", url200);\n    img.setAttribute(\"data-srcset\", url400);\n    img.setAttribute(\"data-sizes\", sizes50);\n    setSources(img, settings, instance);\n    const originals = getOriginalAttrs(img);\n    expect(originals.src).toBe(url1);\n    expect(originals.srcset).toBe(url2);\n    expect(originals.sizes).toBe(sizes100);\n  });\n});\n\n// TODO: ADD MORE TESTS FOR IFRAMES, VIDEOS, PICTURE, and BG IMAGES\n"
  },
  {
    "path": "tests/unit/reset.test.js",
    "content": "import expectExtend from \"./lib/expectExtend\";\nimport getFakeInstance from \"./lib/getFakeInstance\";\nimport { getExtendedSettings } from \"../../src/defaults\";\nimport { expect, beforeEach, afterEach, describe, test } from \"@jest/globals\";\n\nimport { resetSourcesImg } from \"../../src/reset\";\n\nexpectExtend(expect);\n\nvar outerDiv, settings, instance;\n\nbeforeEach(() => {\n  outerDiv = document.createElement(\"div\");\n  settings = getExtendedSettings();\n  instance = getFakeInstance();\n});\n\nafterEach(() => {\n  outerDiv = null;\n  settings = null;\n  instance = null;\n});\n\ndescribe(\"resetSourcesImg\", () => {\n  let img;\n  const url1 = \"1.gif\";\n  const url200 = \"200.gif\";\n  const sizes50 = \"50vw\";\n\n  beforeEach(() => {\n    outerDiv.appendChild((img = document.createElement(\"img\")));\n  });\n\n  afterEach(() => {\n    outerDiv.removeChild(img);\n    img = null;\n  });\n\n  test(\"with initially empty src and srcset\", () => {\n    img.setAttribute(\"src\", url1);\n    img.setAttribute(\"srcset\", url200);\n    img.setAttribute(\"sizes\", sizes50);\n    resetSourcesImg(img);\n    expect(img).not.toHaveAttribute(\"src\");\n    expect(img).not.toHaveAttribute(\"srcset\");\n    expect(img).not.toHaveAttribute(\"sizes\");\n  });\n});\n\n"
  },
  {
    "path": "tests/unit/restore.test.js",
    "content": "import expectExtend from \"./lib/expectExtend\";\nimport getFakeInstance from \"./lib/getFakeInstance\";\nimport { beforeEach, afterEach, describe, expect, test } from \"@jest/globals\";\nimport { getExtendedSettings } from \"../../src/defaults\";\nimport { restore } from \"../../src/restore\";\nimport { load } from \"../../src/load\";\nimport { getStatus } from \"../../src/data\";\n\nconst url1 = \"1.gif\";\nconst url2 = \"2.gif\";\nconst url100 = \"100.gif\";\nconst url200 = \"200.gif\";\nconst url400 = \"400.gif\";\nconst sizes50 = \"50vw\";\n\nvar outerDiv, settings, instance;\n\nexpectExtend(expect);\n\nbeforeEach(() => {\n  outerDiv = document.createElement(\"div\");\n  settings = getExtendedSettings();\n  instance = getFakeInstance();\n});\n\nafterEach(() => {\n  outerDiv = null;\n  settings = null;\n  instance = null;\n});\n\ndescribe(\"restore for image\", () => {\n  let img;\n\n  beforeEach(() => {\n    outerDiv.appendChild((img = document.createElement(\"img\")));\n  });\n\n  afterEach(() => {\n    outerDiv.removeChild(img);\n    img = null;\n  });\n\n  test(\"when load hasn't been called on the element\", () => {\n    restore(img);\n    expect(img).not.toHaveAttribute(\"src\");\n    expect(img).not.toHaveAttribute(\"srcset\");\n    expect(img).not.toHaveAttribute(\"sizes\");\n  });\n\n  test(\"with initially empty src and srcset\", () => {\n    img.setAttribute(\"data-src\", url200);\n    img.setAttribute(\"data-srcset\", url400);\n    img.setAttribute(\"data-sizes\", sizes50);\n    load(img, settings, instance);\n    restore(img, settings);\n    expect(img).not.toHaveAttribute(\"src\");\n    expect(img).not.toHaveAttribute(\"srcset\");\n    expect(img).not.toHaveAttribute(\"sizes\");\n  });\n\n  test(\"with initial values in src and srcset\", () => {\n    img.setAttribute(\"src\", url1);\n    img.setAttribute(\"srcset\", url2);\n    img.setAttribute(\"data-srcset\", url400);\n    img.setAttribute(\"data-src\", url200);\n    load(img, settings, instance);\n    restore(img, settings);\n    expect(img).toHaveAttributeValue(\"src\", url1);\n    expect(img).toHaveAttributeValue(\"srcset\", url2);\n  });\n\n  test(\"with initial values in src and srcset and empty data-*\", () => {\n    img.setAttribute(\"data-src\", \"\");\n    img.setAttribute(\"data-srcset\", \"\");\n    img.setAttribute(\"src\", url200);\n    img.setAttribute(\"srcset\", url400);\n    load(img, settings, instance);\n    restore(img, settings);\n    expect(img).toHaveAttributeValue(\"src\", url200);\n    expect(img).toHaveAttributeValue(\"srcset\", url400);\n  });\n\n  test(\"has no classes nor status after restore\", () => {\n    img.setAttribute(\"data-src\", \"\");\n    load(img, settings, instance);\n    restore(img, settings);\n    expect(img).not.toHaveClassName(\"applied\");\n    expect(img).not.toHaveClassName(\"loading\");\n    expect(img).not.toHaveClassName(\"loaded\");\n    expect(img).not.toHaveClassName(\"error\");\n    expect(img).not.toHaveClassName(\"entered\");\n    expect(img).not.toHaveClassName(\"exited\");\n    expect(getStatus(img)).toBeNull();\n  });\n});\n\ndescribe(\"restore for picture\", () => {\n  let picture, source1, source2, img;\n\n  beforeEach(() => {\n    outerDiv.appendChild((picture = document.createElement(\"picture\")));\n    picture.appendChild((source1 = document.createElement(\"source\")));\n    picture.appendChild((source2 = document.createElement(\"source\")));\n    picture.appendChild((img = document.createElement(\"img\")));\n  });\n\n  afterEach(() => {\n    outerDiv.removeChild(picture);\n  });\n\n  test(\"when load hasn't been called on the element\", () => {\n    restore(img);\n    expect(img).not.toHaveAttribute(\"srcset\");\n    expect(source1).not.toHaveAttribute(\"srcset\");\n    expect(source2).not.toHaveAttribute(\"srcset\");\n  });\n\n  test(\"with initially empty srcset\", () => {\n    source1.setAttribute(\"data-srcset\", url200);\n    source2.setAttribute(\"data-srcset\", url400);\n    load(img, settings, instance);\n    restore(img, settings);\n    expect(source1).not.toHaveAttribute(\"srcset\");\n    expect(source2).not.toHaveAttribute(\"srcset\");\n  });\n\n  test(\"with initial value in srcset\", () => {\n    source1.setAttribute(\"srcset\", url1);\n    source1.setAttribute(\"data-srcset\", url200);\n    source2.setAttribute(\"srcset\", url2);\n    source2.setAttribute(\"data-srcset\", url400);\n    load(img, settings, instance);\n    restore(img, settings);\n    expect(source1).toHaveAttributeValue(\"srcset\", url1);\n    expect(source2).toHaveAttributeValue(\"srcset\", url2);\n  });\n\n  test(\"with initial value in srcset and empty data-srcset\", () => {\n    source1.setAttribute(\"data-srcset\", \"\");\n    source2.setAttribute(\"data-srcset\", \"\");\n    source1.setAttribute(\"srcset\", url200);\n    source2.setAttribute(\"srcset\", url400);\n    load(img, settings, instance);\n    restore(img, settings);\n    expect(source1).toHaveAttributeValue(\"srcset\", url200);\n    expect(source2).toHaveAttributeValue(\"srcset\", url400);\n  });\n\n  test(\"has no classes nor status after restore\", () => {\n    img.setAttribute(\"data-src\", url100);\n    source1.setAttribute(\"data-srcset\", url200);\n    source2.setAttribute(\"data-srcset\", url400);\n    load(img, settings, instance);\n    restore(img, settings);\n    expect(img).not.toHaveClassName(\"applied\");\n    expect(img).not.toHaveClassName(\"loading\");\n    expect(img).not.toHaveClassName(\"loaded\");\n    expect(img).not.toHaveClassName(\"error\");\n    expect(img).not.toHaveClassName(\"entered\");\n    expect(img).not.toHaveClassName(\"exited\");\n    expect(getStatus(img)).toBeNull();\n  });\n});\n\ndescribe(\"restore for iframe\", () => {\n  let iframe;\n  const srcToLoad = \"http://www.google.it\";\n  const preloadedSrc = srcToLoad + \"/doodle\";\n\n  beforeEach(() => {\n    outerDiv.appendChild((iframe = document.createElement(\"iframe\")));\n  });\n\n  afterEach(() => {\n    outerDiv.removeChild(iframe);\n    iframe = null;\n  });\n\n  test(\"when load hasn't been called on the element\", () => {\n    restore(iframe);\n    expect(iframe).not.toHaveAttribute(\"srcset\");\n  });\n\n  test(\"with initially empty src\", () => {\n    iframe.setAttribute(\"data-src\", srcToLoad);\n    load(iframe, settings, instance);\n    restore(iframe, settings);\n    expect(iframe).not.toHaveAttribute(\"src\");\n  });\n  test(\"with initial value in src\", () => {\n    iframe.setAttribute(\"src\", preloadedSrc);\n    iframe.setAttribute(\"data-src\", srcToLoad);\n    load(iframe, settings, instance);\n    restore(iframe, settings);\n    expect(iframe).toHaveAttributeValue(\"src\", preloadedSrc);\n  });\n\n  test(\"has no classes nor status after restore\", () => {\n    iframe.setAttribute(\"data-src\", \"\");\n    load(iframe, settings, instance);\n    restore(iframe, settings);\n    expect(iframe).not.toHaveClassName(\"applied\");\n    expect(iframe).not.toHaveClassName(\"loading\");\n    expect(iframe).not.toHaveClassName(\"loaded\");\n    expect(iframe).not.toHaveClassName(\"error\");\n    expect(iframe).not.toHaveClassName(\"entered\");\n    expect(iframe).not.toHaveClassName(\"exited\");\n    expect(getStatus(iframe)).toBeNull();\n  });\n});\n\ndescribe(\"restore for single background image\", () => {\n  let innerDiv;\n\n  // Note: BUG in JsDOM doesn't return `url(\"\")` with quotes inside\n\n  beforeEach(() => {\n    outerDiv.appendChild((innerDiv = document.createElement(\"iframe\")));\n    //innerDiv.llTempImage = document.createElement(\"iframe\");\n  });\n\n  afterEach(() => {\n    outerDiv.removeChild(innerDiv);\n    innerDiv = null;\n  });\n\n  test(\"when load hasn't been called on the element\", () => {\n    restore(innerDiv);\n    expect(innerDiv.style.backgroundImage).toBe(\"\");\n  });\n\n  test(\"with initially empty style attribute\", () => {\n    innerDiv.setAttribute(\"data-bg\", `url(${url200})`);\n    load(innerDiv, settings, instance);\n    restore(innerDiv, settings);\n    expect(innerDiv.style.backgroundImage).toBe(\"\");\n  });\n  test(\"with initial valye in style attribute\", () => {\n    innerDiv.style.padding = \"1px\";\n    innerDiv.setAttribute(\"data-bg\", `url(${url400})`);\n    load(innerDiv, settings, instance);\n    restore(innerDiv, settings);\n    expect(innerDiv.style.backgroundImage).toBe(\"\");\n    expect(innerDiv.style.padding).toBe(\"1px\");\n  });\n  test(\"with initially present style and background\", () => {\n    innerDiv.style.padding = \"1px\";\n    innerDiv.style.backgroundImage = `url(${url400})`;\n    innerDiv.setAttribute(\"data-bg\", `url(${url200})`);\n    load(innerDiv, settings, instance);\n    restore(innerDiv, settings);\n    expect(innerDiv.style.backgroundImage).toBe(`url(${url400})`);\n  });\n\n  test(\"has no classes nor status after restore\", () => {\n    innerDiv.setAttribute(\"data-bg\", `url(${url200})`);\n    load(innerDiv, settings, instance);\n    restore(innerDiv, settings);\n    expect(innerDiv).not.toHaveClassName(\"applied\");\n    expect(innerDiv).not.toHaveClassName(\"loading\");\n    expect(innerDiv).not.toHaveClassName(\"loaded\");\n    expect(innerDiv).not.toHaveClassName(\"error\");\n    expect(innerDiv).not.toHaveClassName(\"entered\");\n    expect(innerDiv).not.toHaveClassName(\"exited\");\n    expect(getStatus(innerDiv)).toBeNull();\n  });\n});\n\n// TO DO FROM HERE\n\ndescribe(\"resetMultiBackground for multiple background image\", () => {\n  let innerDiv;\n\n  beforeEach(() => {\n    outerDiv.appendChild((innerDiv = document.createElement(\"div\")));\n  });\n\n  afterEach(() => {\n    outerDiv.removeChild(innerDiv);\n    innerDiv = null;\n  });\n\n  test(\"when load hasn't been called on the element\", () => {\n    restore(innerDiv);\n    expect(innerDiv.style.backgroundImage).toBe(\"\");\n  });\n\n  test(\"with initially empty style attribute\", () => {\n    innerDiv.setAttribute(\"data-bg-multi\", `url(${url200})`);\n    load(innerDiv, settings, instance);\n    restore(innerDiv, settings);\n    expect(innerDiv.style.backgroundImage).toBe(\"\");\n  });\n\n  test(\"with initially present style attribute\", () => {\n    innerDiv.setAttribute(\"data-bg-multi\", `url(${url400})`);\n    innerDiv.style.padding = \"1px\";\n    load(innerDiv, settings, instance);\n    restore(innerDiv, settings);\n    expect(innerDiv.style.backgroundImage).toBe(\"\");\n    expect(innerDiv.style.padding).toBe(\"1px\");\n  });\n\n  test(\"with initially present style and background\", () => {\n    innerDiv.setAttribute(\"data-bg-multi\", `url(${url200})`);\n    innerDiv.style.padding = \"1px\";\n    innerDiv.style.backgroundImage = `url(${url400})`;\n    load(innerDiv, settings, instance);\n    restore(innerDiv, settings);\n    expect(innerDiv.style.backgroundImage).toBe(`url(${url400})`);\n  });\n\n  test(\"has no classes nor status after restore\", () => {\n    innerDiv.setAttribute(\"data-bg-multi\", `url(${url200})`);\n    load(innerDiv, settings, instance);\n    restore(innerDiv, settings);\n    expect(innerDiv).not.toHaveClassName(\"applied\");\n    expect(innerDiv).not.toHaveClassName(\"loading\");\n    expect(innerDiv).not.toHaveClassName(\"loaded\");\n    expect(innerDiv).not.toHaveClassName(\"error\");\n    expect(innerDiv).not.toHaveClassName(\"entered\");\n    expect(innerDiv).not.toHaveClassName(\"exited\");\n    expect(getStatus(innerDiv)).toBeNull();\n  });\n});\n\ndescribe(\"restore for video\", () => {\n  let video;\n  const videoUrlMp4 = \"foobar.mp4\";\n  const videoUrlAvi = \"foobar.avi\";\n  const videoUrlWebm = \"foobar.webm\";\n\n  beforeEach(() => {\n    outerDiv.appendChild((video = document.createElement(\"video\")));\n    //JSDOM doesn't have the video.load() method, need to mock it\n    video.load = () => {\n    };\n  });\n\n  afterEach(() => {\n    video.load = null;\n    outerDiv.removeChild(video);\n    video = null;\n  });\n\n  test(\"when load hasn't been called on the element\", () => {\n    restore(video);\n    expect(video).not.toHaveAttribute(\"src\");\n  });\n\n  test(\"with initially empty src\", () => {\n    video.setAttribute(\"data-src\", videoUrlAvi);\n    load(video, settings, instance);\n    restore(video, settings);\n    expect(video).not.toHaveAttribute(\"src\");\n  });\n\n  test(\"with initial value in src\", () => {\n    video.setAttribute(\"src\", videoUrlMp4);\n    video.setAttribute(\"data-src\", videoUrlAvi);\n    load(video, settings, instance);\n    restore(video, settings);\n    expect(video).toHaveAttributeValue(\"src\", videoUrlMp4);\n  });\n\n  test(\"with source elements\", () => {\n    let source1, source2;\n    video.appendChild((source1 = document.createElement(\"source\")));\n    video.appendChild((source2 = document.createElement(\"source\")));\n    video.setAttribute(\"data-src\", videoUrlAvi);\n    source1.setAttribute(\"data-src\", videoUrlMp4);\n    source2.setAttribute(\"data-src\", videoUrlWebm);\n    load(video, settings, instance);\n    restore(video, settings);\n    expect(video).not.toHaveAttribute(\"src\");\n    expect(source1).not.toHaveAttribute(\"src\");\n    expect(source2).not.toHaveAttribute(\"src\");\n  });\n\n  test(\"has no classes nor status after restore\", () => {\n    video.setAttribute(\"data-src\", videoUrlAvi);\n    load(video, settings, instance);\n    restore(video, settings);\n    expect(video).not.toHaveClassName(\"applied\");\n    expect(video).not.toHaveClassName(\"loading\");\n    expect(video).not.toHaveClassName(\"loaded\");\n    expect(video).not.toHaveClassName(\"error\");\n    expect(video).not.toHaveClassName(\"entered\");\n    expect(video).not.toHaveClassName(\"exited\");\n    expect(getStatus(video)).toBeNull();\n  });\n});\n"
  },
  {
    "path": "tests/unit/set.test.js",
    "content": "import expectExtend from \"./lib/expectExtend\";\nimport getFakeInstance from \"./lib/getFakeInstance\";\nimport { getExtendedSettings } from \"../../src/defaults\";\nimport { expect, beforeEach, afterEach, describe, test } from \"@jest/globals\";\n\nimport { setBackground, setMultiBackground, setSources } from \"../../src/set\";\nimport { decreaseToLoadCount, setToLoadCount } from \"../../src/counters\";\n\nexpectExtend(expect);\n\nvar outerDiv, settings, instance;\n\nbeforeEach(() => {\n  outerDiv = document.createElement(\"div\");\n  settings = getExtendedSettings();\n  instance = getFakeInstance();\n});\n\nafterEach(() => {\n  outerDiv = null;\n  settings = null;\n  instance = null;\n});\n\ndescribe(\"setCounters\", () => {\n  test('decreaseToLoadCount decreases toLoadCount by 1', () => {\n    const mockInstance = { toLoadCount: 5 };\n    decreaseToLoadCount(mockInstance);\n    expect(mockInstance.toLoadCount).toBe(4);\n  });\n\n  test('setToLoadCount sets toLoadCount to the given value', () => {\n    const mockInstance = {};\n    setToLoadCount(mockInstance, 10);\n    expect(mockInstance.toLoadCount).toBe(10);\n  });\n})\n\ndescribe(\"setSources for image\", () => {\n  let img;\n  const url1 = \"1.gif\";\n  const url200 = \"200.gif\";\n  const url400 = \"400.gif\";\n\n  beforeEach(() => {\n    outerDiv.appendChild((img = document.createElement(\"img\")));\n  });\n\n  afterEach(() => {\n    outerDiv.removeChild(img);\n    img = null;\n  });\n\n  test(\"with initially empty src and srcset\", () => {\n    img.setAttribute(\"data-src\", url200);\n    img.setAttribute(\"data-srcset\", url400);\n    setSources(img, settings, instance);\n    expect(img).toHaveAttribute(\"src\", url200);\n    expect(img).toHaveAttribute(\"srcset\", url400);\n  });\n\n  test(\"with initial values in src and srcset\", () => {\n    img.setAttribute(\"data-src\", url200);\n    img.setAttribute(\"data-srcset\", url400);\n    img.setAttribute(\"src\", url1);\n    img.setAttribute(\"srcset\", url1);\n    setSources(img, settings, instance);\n    expect(img).toHaveAttribute(\"src\", url200);\n    expect(img).toHaveAttribute(\"srcset\", url400);\n  });\n  test(\"with initial values in src and srcset and empty data-*\", () => {\n    img.setAttribute(\"data-src\", \"\");\n    img.setAttribute(\"data-srcset\", \"\");\n    img.setAttribute(\"src\", url200);\n    img.setAttribute(\"srcset\", url400);\n    setSources(img, settings, instance);\n    expect(img).toHaveAttribute(\"src\", url200);\n    expect(img).toHaveAttribute(\"srcset\", url400);\n  });\n});\n\ndescribe(\"setSources for iframe\", () => {\n  let iframe;\n  const srcToLoad = \"http://www.google.it\";\n  const preloadedSrc = srcToLoad + \"/doodle\";\n\n  beforeEach(() => {\n    outerDiv.appendChild((iframe = document.createElement(\"iframe\")));\n  });\n\n  afterEach(() => {\n    outerDiv.removeChild(iframe);\n    iframe = null;\n  });\n\n  test(\"with initially empty src\", () => {\n    iframe.setAttribute(\"data-src\", srcToLoad);\n    setSources(iframe, settings, instance);\n    expect(iframe).toHaveAttribute(\"src\", srcToLoad);\n  });\n  test(\"with initial value in src\", () => {\n    iframe.setAttribute(\"data-src\", srcToLoad);\n    iframe.setAttribute(\"src\", preloadedSrc);\n    setSources(iframe, settings, instance);\n    expect(iframe).toHaveAttribute(\"src\", srcToLoad);\n  });\n  test(\"with initial value in src and empty data-src\", () => {\n    iframe.setAttribute(\"data-src\", \"\");\n    iframe.setAttribute(\"src\", preloadedSrc);\n    setSources(iframe, settings, instance);\n    expect(iframe).toHaveAttribute(\"src\", preloadedSrc);\n  });\n});\n\ndescribe(\"setBackground for single background image\", () => {\n  let innerDiv;\n  const url100 = \"100.gif\";\n  const url200 = \"200.gif\";\n\n  beforeEach(() => {\n    outerDiv.appendChild((innerDiv = document.createElement(\"div\")));\n    innerDiv.llTempImage = document.createElement(\"img\");\n  });\n\n  afterEach(() => {\n    outerDiv.removeChild(innerDiv);\n    innerDiv = null;\n  });\n\n  test(\"with initially empty style attribute\", () => {\n    innerDiv.setAttribute(\"data-bg\", url200);\n    setBackground(innerDiv, settings, instance);\n    // Test cheating: bug in JsDOM doesn't return the url(\"\") with quotes inside\n    expect(innerDiv.style.backgroundImage).toBe(`url(${url200})`);\n  });\n  test(\"with initially present style attribute\", () => {\n    innerDiv.setAttribute(\"data-bg\", url100);\n    innerDiv.style = {\n      padding: \"1px\"\n    };\n    setBackground(innerDiv, settings, instance);\n    // Test cheating: bug in JsDOM doesn't return the url(\"\") with quotes inside\n    expect(innerDiv.style.backgroundImage).toBe(`url(${url100})`);\n  });\n  test(\"with initially present style and background\", () => {\n    innerDiv.setAttribute(\"data-bg\", url200);\n    innerDiv.style = {\n      padding: \"1px\",\n      backgroundImage: `url(${url100})`\n    };\n    setBackground(innerDiv, settings, instance);\n    // Test cheating: bug in JsDOM doesn't return the url(\"\") with quotes inside\n    expect(innerDiv.style.backgroundImage).toBe(`url(${url200})`);\n  });\n});\n\ndescribe(\"setMultiBackground for multiple background image\", () => {\n  let innerDiv;\n  const url100 = \"100.gif\";\n  const url200 = \"200.gif\";\n\n  beforeEach(() => {\n    outerDiv.appendChild((innerDiv = document.createElement(\"div\")));\n  });\n\n  afterEach(() => {\n    outerDiv.removeChild(innerDiv);\n    innerDiv = null;\n  });\n\n  test(\"with initially empty style attribute\", () => {\n    innerDiv.setAttribute(\"data-bg-multi\", `url(${url200})`);\n    setMultiBackground(innerDiv, settings, instance);\n    // Test cheating: bug in JsDOM doesn't return the url(\"\") with quotes inside\n    expect(innerDiv.style.backgroundImage).toBe(`url(${url200})`);\n  });\n  test(\"with initially present style attribute\", () => {\n    innerDiv.setAttribute(\"data-bg-multi\", `url(${url100})`);\n    innerDiv.style = {\n      padding: \"1px\"\n    };\n    setMultiBackground(innerDiv, settings, instance);\n    // Test cheating: bug in JsDOM doesn't return the url(\"\") with quotes inside\n    expect(innerDiv.style.backgroundImage).toBe(`url(${url100})`);\n  });\n  test(\"with initially present style and background\", () => {\n    innerDiv.setAttribute(\"data-bg-multi\", `url(${url200})`);\n    innerDiv.style = {\n      padding: \"1px\",\n      backgroundImage: `url(${url100})`\n    };\n    setMultiBackground(innerDiv, settings, instance);\n    // Test cheating: bug in JsDOM doesn't return the url(\"\") with quotes inside\n    expect(innerDiv.style.backgroundImage).toBe(`url(${url200})`);\n  });\n});\n\ndescribe(\"setSources for video\", () => {\n  let video, source1, source2;\n  const videoUrlMp4 = \"foobar.mp4\";\n  const videoUrlAvi = \"foobar.avi\";\n  const videoUrlWebm = \"foobar.webm\";\n\n  beforeEach(() => {\n    outerDiv.appendChild((video = document.createElement(\"video\")));\n    /* video.appendChild(document.createElement(\"source\"));\n    video.appendChild(document.createElement(\"source\")); */\n  });\n\n  afterEach(() => {\n    outerDiv.removeChild(video);\n    source1 = null;\n    source2 = null;\n    video = null;\n  });\n\n  test(\"with initially empty src\", () => {\n    video.load = jest.fn();\n    video.setAttribute(\"data-src\", videoUrlAvi);\n    setSources(video, settings, instance);\n    expect(video).toHaveAttribute(\"src\", videoUrlAvi);\n    expect(video.load).toHaveBeenCalled();\n  });\n\n  test(\"with source elements\", () => {\n    video.load = jest.fn();\n    video.setAttribute(\"data-src\", videoUrlAvi);\n    video.appendChild((source1 = document.createElement(\"source\")));\n    video.appendChild((source2 = document.createElement(\"source\")));\n    source1.setAttribute(\"data-src\", videoUrlMp4);\n    source2.setAttribute(\"data-src\", videoUrlWebm);\n    setSources(video, settings, instance);\n    expect(video).toHaveAttribute(\"src\", videoUrlAvi);\n    expect(source1).toHaveAttribute(\"src\", videoUrlMp4);\n    expect(source2).toHaveAttribute(\"src\", videoUrlWebm);\n    expect(video.load).toHaveBeenCalled();\n  });\n});\n\ndescribe(\"setSources for picture\", () => {\n  let img, picture, source1, source2;\n  const url1 = \"1.gif\";\n  const url200 = \"200.gif\";\n  const url400 = \"400.gif\";\n\n  beforeEach(() => {\n    outerDiv.appendChild((picture = document.createElement(\"picture\")));\n    picture.appendChild((source1 = document.createElement(\"source\")));\n    picture.appendChild((source2 = document.createElement(\"source\")));\n    picture.appendChild((img = document.createElement(\"img\")));\n  });\n\n  afterEach(() => {\n    outerDiv.removeChild(picture);\n    picture = null;\n    source1 = null;\n    source2 = null;\n    img = null;\n  });\n\n  test(\"with initially empty srcset\", () => {\n    source1.setAttribute(\"data-srcset\", url200);\n    source2.setAttribute(\"data-srcset\", url400);\n    setSources(img, settings, instance);\n    expect(source1).toHaveAttribute(\"srcset\", url200);\n    expect(source2).toHaveAttribute(\"srcset\", url400);\n  });\n\n  test(\"with initial value in srcset\", () => {\n    source1.setAttribute(\"data-srcset\", url200);\n    source2.setAttribute(\"data-srcset\", url400);\n    source1.setAttribute(\"srcset\", url1);\n    source2.setAttribute(\"srcset\", url1);\n    setSources(img, settings, instance);\n    expect(source1).toHaveAttribute(\"srcset\", url200);\n    expect(source2).toHaveAttribute(\"srcset\", url400);\n  });\n\n  test(\"with initial value in srcset and empty data-srcset\", () => {\n    source1.setAttribute(\"data-srcset\", \"\");\n    source2.setAttribute(\"data-srcset\", \"\");\n    source1.setAttribute(\"srcset\", url200);\n    source2.setAttribute(\"srcset\", url400);\n    setSources(img, settings, instance);\n    expect(source1).toHaveAttribute(\"srcset\", url200);\n    expect(source2).toHaveAttribute(\"srcset\", url400);\n  });\n});\n"
  },
  {
    "path": "todo.md",
    "content": "# TODO\n\n## 1\n\nCheck why the demo `./demos/restore_destroy.html` is not working. What was it supposed to do? :D\n\n\n## To consider\n\n- Check how LazyLoad behaves when a page was updated using DOM morphing.\n  If only the data-attributes were updated, how do one forces LazyLoad to read from them again?\n- Check out how the plugin architecture of lazysizes work\n- Consider creating a subset of options and defaults for the static `load` method, and document it\n- [Edge case] When `cancel_on_exit` is `false`, unobserve elements as soon as they start loading (as of before 15.2.0).\n\n## More tests\n\nAdd more tests (to choose between unit tests or e2e tests depending on the case) to cover:\n\n- autoinitialize\n- purge\n- reveal"
  },
  {
    "path": "typings/lazyload.d.ts",
    "content": "export interface ILazyLoadOptions {\n  /**\n     * The CSS selector of the elements to load lazily, which will be selected\n     * as descendants of the `container` object.\n\n     * @default \".lazy\"\n     */\n  elements_selector?: string;\n\n  /**\n   * The scrolling container of the elements in the `elements_selector` option.\n   *\n   * @default document\n   */\n  container?: HTMLElement;\n\n  /**\n   * A number of pixels representing the outer distance off the scrolling area\n   * from which to start loading the elements.\n   * @default 300\n   */\n  threshold?: number;\n\n  /**\n   * Similar to `threshold`, but accepting multiple values and both `px` and `%`\n   * units. It maps directly to the `rootMargin` property of IntersectionObserver,\n   * so it must be a string with a syntax similar to the CSS `margin` property.\n   * You can use it when you need to have different thresholds for the scrolling\n   * area. It overrides `threshold` when passed.\n   *\n   * @default null\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin\n   */\n  thresholds?: string;\n\n  /**\n   * The name of the data attribute containing the element URL to load,\n   * excluding the `\"data-\"` part.\n   * E.g. if your data attribute is named `\"data-src\"`,\n   * just pass `\"src\"`\n   *\n   * @default \"src\"\n   */\n  data_src?: string;\n\n  /**\n   * The name of the data attribute containing the image URL set to load,\n   * in either img and source tags, excluding the \"data-\" part.\n   * E.g. if your data attribute is named `\"data-srcset\"`,\n   * just pass `\"srcset\"`\n   *\n   * @default \"srcset\"\n   */\n  data_srcset?: string;\n\n  /**\n   * The name of the data attribute containing the sizes attribute to use,\n   * excluding the `\"data-\"` part.\n   * E.g. if your data attribute is named `\"data-sizes\"`, just pass `\"sizes\"`\n   *\n   * @default \"sizes\"\n   */\n  data_sizes?: string;\n\n  /**\n   * The name of the data attribute containing the URL of `background-image`\n   * to load lazily, excluding the `\"data-\"` part.\n   * E.g. if your data attribute is named `\"data-bg\"`, just pass `\"bg\"`.\n   * The attribute value must be a valid value for `background-image`,\n   * including the `url()` part of the CSS instruction.\n   *\n   * @default \"bg\"\n   */\n  data_bg?: string;\n\n  /**\n   * The name of the data attribute containing the URL of `background-image`\n   * to load lazily on HiDPI screens, excluding the `\"data-\"` part.\n   * E.g. if your data attribute is named `\"data-bg-hidpi\"`, just pass `\"bg-hidpi\"`.\n   * The attribute value must be a valid value for `background-image`,\n   * including the `url()` part of the CSS instruction.\n   *\n   * @default \"bg-hidpi\"\n   */\n  data_bg_hidpi?: string;\n\n  /**\n   * The name of the data attribute containing the value of multiple `background-image`\n   * to load lazily, excluding the `\"data-\"` part.\n   * E.g. if your data attribute is named `\"data-bg-multi\"`, just pass `\"bg-multi\"`.\n   * The attribute value must be a valid value for `background-image`,\n   * including the `url()` part of the CSS instruction.\n   *\n   * @default \"bg-multi\"\n   */\n  data_bg_multi?: string;\n\n  /**\n   * The name of the data attribute containing the value of multiple `background-image`\n   * to load lazily on HiDPI screens, excluding the `\"data-\"` part.\n   * E.g. if your data attribute is named `\"data-bg-multi-hidpi\"`, just pass `\"bg-multi-hidpi\"`.\n   * The attribute value must be a valid value for `background-image`,\n   * including the `url()` part of the CSS instruction.\n   *\n   * @default \"bg-multi-hidpi\"\n   */\n  data_bg_multi_hidpi?: string;\n\n  /**\n   * The name of the data attribute containing the value of the background to\n   * be applied with image-set, excluding the `\"data-\"` part.\n   * E.g. if your data attribute is named `\"data-bg-set\"`, just pass `\"bg-set\"`.\n   * The attribute value must be what goes inside the `image-set` CSS function.\n   * You can separate values with a pipe (`|`) character to have\n   * multiple backgrounds.\n   *\n   * @default \"bg-set\"\n   */\n  data_bg_set?: string;\n\n  /**\n   * The name of the data attribute containing the value of poster to load lazily,\n   * excluding the `\"data-\"` part.\n   * E.g. if your data attribute is named `\"data-poster\"`, just pass `\"poster\"`.\n   *\n   * @default \"poster\"\n   */\n  data_poster?: string;\n\n  /**\n   * The class applied to the multiple background elements after the multiple\n   * background was applied\n   *\n   * @default \"applied\"\n   */\n  class_applied?: string;\n\n  /**\n   * The class applied to the elements while the loading is in progress.\n   *\n   * @default \"loading\"\n   */\n  class_loading?: string;\n\n  /**\n   * The class applied to the elements when the loading is complete.\n   *\n   * @default \"loaded\"\n   */\n  class_loaded?: string;\n\n  /**\n   * The class applied to the elements when the element causes an error.\n   *\n   * @default \"error\"\n   */\n  class_error?: string;\n\n  /**\n   * The class applied to the elements after they entered the viewport.\n   *\n   * @default \"entered\"\n   */\n  class_entered?: string;\n\n  /**\n   * The class applied to the elements after they exited the viewport.\n   *\n   * @default \"exited\"\n   */\n  class_exited?: string;\n\n  /**\n   * A boolean that defines whether or not to automatically unobserve\n   * elements once they've loaded or throwed an error\n   *\n   * @default true\n   */\n  unobserve_completed?: boolean;\n\n  /**\n   * A boolean that defines whether or not to automatically unobserve\n   * elements once they entered the viewport\n   *\n   * @default false\n   */\n  unobserve_entered?: boolean;\n\n  /**\n   * A boolean that defines whether or not to cancel the download of the\n   * images that exit the viewport while they are still loading, eventually\n   * restoring the original attributes. It applies only to images so to the\n   * `img` (and `picture`) tags, so it doesn't apply to background images,\n   * `iframe`s nor `video`s.\n   *\n   * @default true\n   */\n  cancel_on_exit?: boolean;\n\n  /**\n   * A callback function which is called whenever an element enters the viewport.\n   * Arguments: DOM element, intersection observer entry, lazyload instance.\n   */\n  callback_enter?: (\n    elt: HTMLElement,\n    entry: IntersectionObserverEntry,\n    instance: ILazyLoadInstance\n  ) => void;\n\n  /**\n   * A callback function which is called whenever an element exits the viewport.\n   * Arguments: `DOM element`, `intersection observer entry`, `lazyload instance`.\n   */\n  callback_exit?: (\n    elt: HTMLElement,\n    entry: IntersectionObserverEntry,\n    instance: ILazyLoadInstance\n  ) => void;\n\n  /**\n   * A callback function which is called whenever a multiple background\n   * element starts loading.\n   * Arguments: `DOM element`, `lazyload instance`.\n   */\n  callback_applied?: (elt: HTMLElement, instance: ILazyLoadInstance) => void;\n\n  /**\n   * A callback function which is called whenever an element starts loading.\n   * Arguments: `DOM element`, `lazyload instance`.\n   */\n  callback_loading?: (elt: HTMLElement, instance: ILazyLoadInstance) => void;\n\n  /**\n   * A callback function which is called whenever an element finishes loading.\n   * Note that, in version older than 11.0.0, this option went under the\n   * name `callback_load`.\n   * Arguments: `DOM element`, `lazyload instance`.\n   */\n  callback_loaded?: (elt: HTMLElement, instance: ILazyLoadInstance) => void;\n\n  /**\n   * A callback function which is called whenever an element triggers an error.\n   * Arguments: `DOM element`, `lazyload instance`.\n   */\n  callback_error?: (elt: HTMLElement, instance: ILazyLoadInstance) => void;\n\n  /**\n   * A callback function which is called when there are no more elements to load and all elements have been downloaded.\n   * Arguments: `lazyload instance`.\n   */\n  callback_finish?: (instance: ILazyLoadInstance) => void;\n\n  /**\n   * A callback function which is called whenever an element loading is\n   * canceled while loading, as for `cancel_on_exit: true`\n   */\n  callback_cancel?: (\n    elt: HTMLElement,\n    entry: IntersectionObserverEntry,\n    instance: ILazyLoadInstance\n  ) => void;\n\n  /**\n   * This boolean sets whether or not to use [native lazy loading](https://addyosmani.com/blog/lazy-loading/)\n   * to do [hybrid lazy loading](https://www.smashingmagazine.com/2019/05/hybrid-lazy-loading-progressive-migration-native/).\n   * On browsers that support it, LazyLoad will set the `loading=\"lazy\"` attribute on `images` and `iframes`,\n   * and delegate their loading to the browser.\n   *\n   * @default false\n   */\n  use_native?: boolean;\n\n  /**\n   * Tells LazyLoad if to restore the original values of `src`, `srcset` and `sizes` \n   * when a loading error occurs.\n   *\n   * @default false\n   */\n  restore_on_error?: boolean;\n}\n\nexport interface ILazyLoadInstance {\n  /**\n   * Make LazyLoad to re-check the DOM for `elements_selector` elements inside its `container`.\n   *\n   * ### Use case\n   *\n   * Update LazyLoad after you added or removed DOM elements to the page.\n   */\n  update: (elements?: NodeListOf<HTMLElement>) => void;\n\n  /**\n   * Destroys the instance, unsetting instance variables and removing listeners.\n   *\n   * ### Use case\n   *\n   * Free up some memory. Especially useful for Single Page Applications.\n   */\n  destroy: () => void;\n\n  /**\n   * Loads all the lazy elements right away and stop observing them,\n   * no matter if they are inside or outside the viewport,\n   * no matter if they are hidden or visible.\n   *\n   * ### Use case\n   *\n   * To load all the remaining elements in advance\n   */\n  loadAll: () => void;\n\n  /**\n   * Restores DOM to its original state. Note that it doesn't destroy LazyLoad,\n   * so you probably want to use it along with destroy().\n   *\n   * ### Use case\n   *\n   * Reset the DOM before a soft page navigation (SPA) occures, e.g. using TurboLinks.\n   */\n  restoreAll: () => void;\n\n  /**\n   * The number of elements that are currently downloading from the network\n   * (limitedly to the ones managed by the instance of LazyLoad).\n   * This is particularly useful to understand whether\n   * or not is safe to destroy this instance of LazyLoad.\n   */\n  loadingCount: number;\n\n  /**\n   * The number of elements that haven't been lazyloaded yet\n   * (limitedly to the ones managed by the instance of LazyLoad)\n   */\n  toLoadCount: number;\n}\n\nexport interface ILazyLoad {\n  new (options?: ILazyLoadOptions, elements?: NodeListOf<HTMLElement>): ILazyLoadInstance;\n\n  /**\n   * Immediately loads the lazy `element`.\n   * You can pass your custom options in the settings parameter.\n   * Note that the `elements_selector` option has no effect,\n   * since you are passing the element as a parameter.\n   * Also note that this method has effect only once on a specific `element`.\n   *\n   * ### Use case\n   *\n   * To load an `element` at mouseover or at any other event different than \"entering the viewport\"\n   */\n  load(element: HTMLElement, settings: ILazyLoadOptions): void;\n\n  /**\n   * Resets the internal status of the given element.\n   *\n   * ### Use case\n   *\n   * To tell LazyLoad to consider this `element` again, for example if you changed\n   * the `data-src` attribute after the previous `data-src` was loaded,\n   * call this method, then call `update()`.\n   */\n  resetStatus(element: HTMLElement): void;\n}\n\ndeclare var LazyLoad: ILazyLoad;\nexport default LazyLoad;\n"
  },
  {
    "path": "utils/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head lang=\"en\">\n    <meta charset=\"UTF-8\" />\n    <title>Self-host images generator</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <style>\n      ul,\n      li {\n        list-style-type: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      a,\n      img {\n        display: block;\n      }\n\n      img {\n        border: 0;\n        width: 220px;\n        height: 280px;\n      }\n\n      img:not([src]) {\n        visibility: hidden;\n      }\n\n      /* Fixes Firefox anomaly during image load */\n      @-moz-document url-prefix() {\n        img:-moz-loading {\n          visibility: hidden;\n        }\n      }\n    </style>\n  </head>\n\n  <body>\n    <h1>Self-host images generator</h1>\n    <div class=\"results\">\n      <ul>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721746jj.html\"\n            ><img\n              alt=\"Stivaletti\"\n              src=\"https://placehold.co/440x560/webp?text=Img+01\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/open-toe_cod44740806jx.html\"\n            ><img\n              alt=\"Open toe\"\n              src=\"https://placehold.co/440x560/webp?text=Img+02\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+03\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+04\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+05\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes alte\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+06\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+07\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+08\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44736534fq.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+09\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44735388ui.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+10\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739165ev.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+11\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44739454hf.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+12\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44719480km.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+13\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44719687td.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+14\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721899ng.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+15\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44721744sl.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+16\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44716730kr.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+17\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44718734xl.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+18\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44721796uk.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+19\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/francesine_cod44717679mj.html\"\n            ><img\n              alt=\"Francesine\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+20\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44724594vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+21\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44726148aq.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+22\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44719629nt.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+23\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44725329kq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+24\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivali_cod44724026qs.html\"\n            ><img\n              alt=\"Stivali\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+25\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44720256gw.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+26\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44722062id.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+27\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44722402rh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+28\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44726296vu.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+29\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725755ct.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+30\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44725348nv.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+31\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721879xx.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+32\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/cuissardes_cod44729472iq.html\"\n            ><img\n              alt=\"Cuissardes\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+33\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/decollete_cod44725388jv.html\"\n            ><img\n              alt=\"Décolleté\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+34\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/stivaletti_cod44721854ce.html\"\n            ><img\n              alt=\"Stivaletti\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+35\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727690jp.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+36\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44727501hh.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+37\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/sneakers-tennis-shoes-basse_cod44727038aq.html\"\n            ><img\n              alt=\"Sneakers &amp; Tennis shoes basse\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+38\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44704882bq.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+39\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n        <li>\n          <a href=\"#/it/donna/mocassini_cod44734002vc.html\"\n            ><img\n              alt=\"Mocassini\"\n              class=\"lazy\"\n              src=\"https://placehold.co/440x560/webp?text=Img+40\"\n              width=\"220\"\n              height=\"280\"\n          /></a>\n        </li>\n      </ul>\n    </div>\n  </body>\n</html>\n"
  }
]