├── .gitignore
├── prettier.config.js
├── test
    ├── .eslintrc.json
    ├── karma.config.js
    └── test.js
├── .travis.yml
├── .eslintrc.json
├── package.json
├── LICENSE
├── index.js
├── README.md
└── examples
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | /* @flow strict */
2 | module.exports = require('eslint-plugin-github/prettier.config')
3 | 


--------------------------------------------------------------------------------
/test/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "env": {
3 |     "mocha": true
4 |   },
5 |   "globals": {
6 |     "assert": true
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | sudo: required
 3 | node_js:
 4 |   - "node"
 5 | addons:
 6 |   chrome: stable
 7 | cache:
 8 |   directories:
 9 |     - node_modules
10 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": [
 3 |     "plugin:github/browser",
 4 |     "plugin:github/es6",
 5 |     "plugin:github/flow"
 6 |   ],
 7 |   "parser": "babel-eslint",
 8 |   "overrides": [
 9 |     {
10 |       "files": "test/**/*.js",
11 |       "rules": {
12 |         "flowtype/require-valid-file-annotation": "off",
13 |         "github/unescaped-html-literal": "off"
14 |       }
15 |     }
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/test/karma.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(config) {
 2 |   config.set({
 3 |     frameworks: ['mocha', 'chai'],
 4 |     files: ['../dist/index.umd.js', 'test.js'],
 5 |     reporters: ['mocha'],
 6 |     port: 9876,
 7 |     colors: true,
 8 |     logLevel: config.LOG_INFO,
 9 |     browsers: ['ChromeHeadless'],
10 |     autoWatch: false,
11 |     singleRun: true,
12 |     concurrency: Infinity
13 |   })
14 | }
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lazy-loadable",
 3 |   "version": "0.1.3",
 4 |   "description": "Boilerplate for creating lazy-loadable images.",
 5 |   "type": "module",
 6 |   "main": "index.js",
 7 |   "module": "index.js",
 8 |   "license": "MIT",
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/manobi/lazy-loadable.git"
12 |   },
13 |   "files": [
14 |     "index.js",
15 |     "package.json",
16 |     "README.md"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/test/test.js:
--------------------------------------------------------------------------------
 1 | describe('custom-element', function() {
 2 |   describe('element creation', function() {
 3 |     it('creates from document.createElement', function() {
 4 |       const el = document.createElement('custom-element')
 5 |       assert.equal('CUSTOM-ELEMENT', el.nodeName)
 6 |     })
 7 | 
 8 |     it('creates from constructor', function() {
 9 |       const el = new window.CustomElementElement()
10 |       assert.equal('CUSTOM-ELEMENT', el.nodeName)
11 |     })
12 |   })
13 | 
14 |   describe('after tree insertion', function() {
15 |     beforeEach(function() {
16 |       document.body.innerHTML = '<custom-element></custom-element>'
17 |     })
18 | 
19 |     afterEach(function() {
20 |       document.body.innerHTML = ''
21 |     })
22 | 
23 |     it('initiates', function() {
24 |       const ce = document.querySelector('custom-element')
25 |       assert.equal(ce.textContent, ':wave:')
26 |     })
27 |   })
28 | })
29 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2019 Manobi.
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining
 4 | a copy of this software and associated documentation files (the
 5 | "Software"), to deal in the Software without restriction, including
 6 | without limitation the rights to use, copy, modify, merge, publish,
 7 | distribute, sublicense, and/or sell copies of the Software, and to
 8 | permit persons to whom the Software is furnished to do so, subject to
 9 | the following conditions:
10 | 
11 | The above copyright notice and this permission notice shall be
12 | included in all copies or substantial portions of the Software.
13 | 
14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const opts = {
 2 |   root: null,
 3 |   rootMargin: "0px",
 4 |   threshold: [0]
 5 | }
 6 | 
 7 | function prefetch(url) {  
 8 |   return fetch(url, {credentials: `include`, cache: 'force-cache'}).then(async res => await res.blob())
 9 | }
10 | 
11 | function loadSrc(target, io){
12 |   target.removeAttribute('srcset');
13 |   io.unobserve(target);
14 | }
15 | 
16 | const io = new IntersectionObserver((entries) => {
17 |   entries.forEach(({isIntersecting, target}) => {
18 |     if(isIntersecting){
19 |       loadSrc(target, io);
20 |       const link = target.getAttribute('link');
21 |       if(link){
22 |         target.addEventListener('load', () => prefetch(link), {once: true});
23 |       }
24 |     }
25 |   })
26 | }, opts);
27 | 
28 | export default class LazyLoadable extends HTMLImageElement {
29 |   constructor(width, height){
30 |     super(width, height);
31 |   }
32 | 
33 |   get loading(){
34 |     return this.getAttribute('loading')
35 |   }
36 | 
37 |   get isModern(){
38 |     return ('loading' in HTMLImageElement.prototype)
39 |   }
40 | 
41 |   connectedCallback(){
42 |     if(this.loading === 'lazy'){
43 |       return io.observe(this);
44 |     }
45 |     // default behaviour is to eagerly load the image
46 |     loadSrc(this, io);
47 |   }
48 | 
49 |   disconnectedCallback(){
50 |     io.unobserve(this);
51 |   }
52 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Native lazy load boilerplate
 2 | 
 3 | * 🧱 Pollyfill for modern browsers
 4 | * 👵 Gracefully degrades for old browsers
 5 | * 🤖 Future proof markup
 6 | * 🚉 Using the platform
 7 | 
 8 | The whole idea is to create a copy-past boilerplate that works today. If by a miracle all browser vendors agree to ship "native lazy load", you would **only have to change one place**.
 9 | 
10 | 
11 | ## Boilerplate
12 | ```html
13 | <img 
14 |     is="lazy-loadable" 
15 |     loading="lazy" 
16 |     lazyload="1" 
17 |     importance="low" 
18 |     srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" 
19 |     src="https://placekitten.com/400/400" 
20 |     width="400" 
21 |     height="400" 
22 |     alt=""
23 | >
24 | <script type="module">
25 |     import LazyLoadable from 'https://cdn.pika.dev/lazy-loadable';
26 |     customElements.define('lazy-loadable', LazyLoadable, { extends: "img" });
27 | </script>
28 | ```
29 | 
30 | ## Attributes breakdown
31 | 
32 | ***is="lazy-loadable"***
33 | 
34 | Apply the lazy-loadable custom element pollyfill behaviour to your image tag. 
35 | Usually people loop over all images on a page (querySelectorAll('img.lazy').forEach), to decide if it should lazy load, it can be very slow, you also have to wait until the DOM is ready or put your script at end of body, it would not work if a image appears in document after the document have loaded, like in infinity scrolling or lazy rendering. Using custom elements the browser handles all of it for you.
36 | 
37 | ***loading="lazy"***
38 | 
39 | The native way to tell the browser to delay the image loading, until it's in the screen. Only Google Chrome have [shipped it yet](https://caniuse.com/#feat=loading-lazy-attr).
40 | 
41 | ***lazyload="1"***
42 | 
43 | It seems [Microsoft](https://msdn.microsoft.com/en-us/ie/dn369270(v=vs.94)) implemented on IE 11 and Edge 12 a [unofficial attribute](https://caniuse.com/#feat=lazyload) called "lazyload".
44 | But it does not work the same way as "loading=lazy", it only tell the browser to decrese the loading priority of the resource. Actually it's pretty similar to what "importance=low" does.
45 | 
46 | ***importance="low"***
47 | 
48 | This is a [spec proposal](https://wicg.github.io/priority-hints/) to enable developers to signal the priority of each resource they need to download. In case a browser vendor never implement the "native lazy load", but for any reason ships the **priority hints** support, we would at least download the image without high priority.
49 | 
50 | ***srcset***
51 | Since there is no ways yet to know [if the browser have native support](https://bugs.chromium.org/p/chromium/issues/detail?id=949365) before images starts loading we need to set a placeholder image.
52 | 
53 | Our placeholder is the one responsible for the magic. I've chosen to use srcset as placeholder instead of a infamous "data-src". By placing the placeholder on "srcattr", we can hold the "src" loading, until we are sure if the browser handles lazy by default. In future if all browsers support native lazy-load, all you would have to do is remove this attribute from your html.
54 | 
55 | The great advantage of using "srcattr" instead of "data-src" is that when you remove the placeholder, browsers already knows what to do, respecting the standard fallback src, picture source, media attributes and pixel density.
56 | 
57 | ***width & height***
58 | Explicitally declare the image size to avoid page jumps.
59 | 
60 | ## Safari custom elements pollyfill
61 | 
62 | Apple have chosen [to not ship](https://github.com/w3c/webcomponents/issues/509) a complete implementation of custom elements V1, in order for it to work in Safari you may have to use the [ungap pollyfill](https://github.com/ungap/custom-elements-builtin) before your scripts:
63 | 
64 | ```html
65 | <script>
66 |     if(this.customElements)
67 |     try{customElements.define('built-in',document.createElement('p').constructor,{'extends':'p'})}
68 |     catch(s){document.write('<script src="//unpkg.com/@ungap/custom-elements-builtin"><\x2fscript>')}
69 |     else
70 |     document.write('<script src="//unpkg.com/document-register-element"><\x2fscript>');
71 | </script>
72 | ````
73 | 
74 | ## Install
75 | If you prefer to bundle the pollyfill yourself or use it with a framework:
76 | 
77 | ```shell
78 | npm install lazy-loadable -s
79 | ```
80 | 
81 | ```javascript
82 | import LazyLoadable from 'lazy-loadable';
83 | customElements.define('lazy-loadable', LazyLoadable, { extends: "img" });
84 | ```
85 | 
86 | ## License
87 | 
88 | Distributed under the MIT license. See LICENSE for details.
89 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <title>LazyLoadable Custom element</title>
  6 | </head>
  7 | <body>
  8 |   <!--
  9 |     ## Custom elements
 10 |     custom elements instead of querySelectorAll cuz no forEach needed
 11 |     better for inifinity scroll when images are not present when the for each loads
 12 |     ## src-set instead of data-src use the platform, because removing it will fallback to browser default behaviour
 13 |     ## In future all we would
 14 |     ## data-src swap techinique is not exactly compatible with picture source
 15 |     ##
 16 |     lazyload="1" importance="low"
 17 |   -->
 18 | 
 19 |   <img 
 20 |     is="lazy-loadable" 
 21 |     loading="lazy" 
 22 |     lazyload="1" 
 23 |     importance="low" 
 24 |     srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" 
 25 |     src="https://placekitten.com/400/400" 
 26 |     width="400" 
 27 |     height="400" 
 28 |     alt=""
 29 |   >
 30 | 
 31 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/401/401" width="401" height="401" alt="">
 32 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/402/402" width="402" height="402" alt="">
 33 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/403/403" width="403" height="403" alt="">
 34 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/404/404" width="404" height="404" alt="">
 35 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/405/405" width="405" height="405" alt="">
 36 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/406/406" width="406" height="406" alt="">
 37 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/407/407" width="407" height="407" alt="">
 38 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/408/408" width="408" height="408" alt="">
 39 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/409/409" width="409" height="409" alt="">
 40 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/410/410" width="410" height="410" alt="">
 41 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/411/411" width="411" height="411" alt="">
 42 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/412/412" width="412" height="412" alt="">
 43 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/413/413" width="413" height="413" alt="">
 44 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/414/414" width="414" height="414" alt="">
 45 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/415/415" width="415" height="415" alt="">
 46 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/416/416" width="416" height="416" alt="">
 47 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/417/417" width="417" height="417" alt="">
 48 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/418/418" width="418" height="418" alt="">
 49 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/419/419" width="419" height="419" alt="">
 50 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/420/420" width="420" height="420" alt="">
 51 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/421/421" width="421" height="421" alt="">
 52 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/422/422" width="422" height="422" alt="">
 53 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/423/423" width="423" height="423" alt="">
 54 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/424/424" width="424" height="424" alt="">
 55 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/425/425" width="425" height="425" alt="">
 56 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/426/426" width="426" height="426" alt="">
 57 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/427/427" width="427" height="427" alt="">
 58 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/428/428" width="428" height="428" alt="">
 59 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/429/429" width="429" height="429" alt="">
 60 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/430/430" width="430" height="430" alt="">
 61 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/431/431" width="431" height="431" alt="">
 62 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/432/432" width="432" height="432" alt="">
 63 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/433/433" width="433" height="433" alt="">
 64 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/434/434" width="434" height="434" alt="">
 65 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/435/435" width="435" height="435" alt="">
 66 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/436/436" width="436" height="436" alt="">
 67 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/437/437" width="437" height="437" alt="">
 68 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/438/438" width="438" height="438" alt="">
 69 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/439/439" width="439" height="439" alt="">
 70 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/440/440" width="440" height="440" alt="">
 71 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/441/441" width="441" height="441" alt="">
 72 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/442/442" width="442" height="442" alt="">
 73 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/443/443" width="443" height="443" alt="">
 74 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/444/444" width="444" height="444" alt="">
 75 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/445/445" width="445" height="445" alt="">
 76 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/446/446" width="446" height="446" alt="">
 77 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/447/447" width="447" height="447" alt="">
 78 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/448/448" width="448" height="448" alt="">
 79 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/449/449" width="449" height="449" alt="">
 80 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/450/450" width="450" height="450" alt="">
 81 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/451/451" width="451" height="451" alt="">
 82 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/452/452" width="452" height="452" alt="">
 83 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/453/453" width="453" height="453" alt="">
 84 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/454/454" width="454" height="454" alt="">
 85 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/455/455" width="455" height="455" alt="">
 86 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/456/456" width="456" height="456" alt="">
 87 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/457/457" width="457" height="457" alt="">
 88 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/458/458" width="458" height="458" alt="">
 89 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/459/459" width="459" height="459" alt="">
 90 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/460/460" width="460" height="460" alt="">
 91 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/461/461" width="461" height="461" alt="">
 92 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/462/462" width="462" height="462" alt="">
 93 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/463/463" width="463" height="463" alt="">
 94 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/464/464" width="464" height="464" alt="">
 95 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/465/465" width="465" height="465" alt="">
 96 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/466/466" width="466" height="466" alt="">
 97 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/467/467" width="467" height="467" alt="">
 98 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/468/468" width="468" height="468" alt="">
 99 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/469/469" width="469" height="469" alt="">
100 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/470/470" width="470" height="470" alt="">
101 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/471/471" width="471" height="471" alt="">
102 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/472/472" width="472" height="472" alt="">
103 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/473/473" width="473" height="473" alt="">
104 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/474/474" width="474" height="474" alt="">
105 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/475/475" width="475" height="475" alt="">
106 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/476/476" width="476" height="476" alt="">
107 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/477/477" width="477" height="477" alt="">
108 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/478/478" width="478" height="478" alt="">
109 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/479/479" width="479" height="479" alt="">
110 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/480/480" width="480" height="480" alt="">
111 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/481/481" width="481" height="481" alt="">
112 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/482/482" width="482" height="482" alt="">
113 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/483/483" width="483" height="483" alt="">
114 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/484/484" width="484" height="484" alt="">
115 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/485/485" width="485" height="485" alt="">
116 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/486/486" width="486" height="486" alt="">
117 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/487/487" width="487" height="487" alt="">
118 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/488/488" width="488" height="488" alt="">
119 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/489/489" width="489" height="489" alt="">
120 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/490/490" width="490" height="490" alt="">
121 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/491/491" width="491" height="491" alt="">
122 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/492/492" width="492" height="492" alt="">
123 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/493/493" width="493" height="493" alt="">
124 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/494/494" width="494" height="494" alt="">
125 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/495/495" width="495" height="495" alt="">
126 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/496/496" width="496" height="496" alt="">
127 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/497/497" width="497" height="497" alt="">
128 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/498/498" width="498" height="498" alt="">
129 |   <img is="lazy-loadable" loading="lazy" lazyload="1" importance="low" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==" src="https://placekitten.com/499/499" width="499" height="499" alt="">
130 | 
131 |   <script>
132 |     if (this.customElements) {
133 |       try {
134 |         // feature detect browsers that "forgot" 🙄 to implement built-in extends
135 |         customElements.define('built-in', document.createElement('p').constructor, {'extends':'p'});
136 |       } catch(_) {
137 |         // only WebKit or Safari
138 |         document.write('<script src="//unpkg.com/@ungap/custom-elements-builtin"><\x2fscript>');
139 |       }
140 |     } else {
141 |       // only legacy browsers
142 |       document.write('<script src="//unpkg.com/document-register-element"><\x2fscript>');
143 |     }
144 |   </script>
145 |   <script type="module">
146 |     import LazyLoadable from '../index.js';
147 |     customElements.define('lazy-loadable', LazyLoadable, { extends: "img" });
148 |   </script>
149 | </body>
150 | </html>
151 | 


--------------------------------------------------------------------------------