Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <!-- Including other optional polyfills depending on expected browser support scope -->
  <script
          src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=IntersectionObserver"
          crossorigin="anonymous"
          ></script>
  <script async src="https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@0.2.0/loading-attribute-polyfill.min.js" integrity="sha256-kX73NqVUoUbV0K44kgoqP8P8IZfU0OEjr/afCnK2Mrg=" crossorigin="anonymous"></script>
</head>
<body>
  <p>The sample images embedded into this document are including textual information on their embedding technique, like the HTML tag, attributes and pixel density to show you that the correct image has been loaded.</p>
        <header>
            <!-- Regular images with loading="lazy" attribute provided for testing -->
            <noscript class="loading-lazy">
                <img
                    src="https://mfranzke.github.io/loading-attribute-polyfill/demo/img/img-src-loadinglazy.250x150.png"
                    loading="lazy"
                    alt=".."
                    width="250"
                    height="150"
                />
            </noscript>
​
            <img
                src="https://mfranzke.github.io/loading-attribute-polyfill/demo/img/img-src-loadingeager.250x150.png"
                loading="eager"
                alt=".."
                width="250"
                height="150"
            />
​
            <img
                src="https://mfranzke.github.io/loading-attribute-polyfill/demo/img/img-src-loadingauto.250x150.png"
                loading="auto"
                alt=".."
                width="250"
                height="150"
            />
​
            <picture>
                <noscript class="loading-lazy">
                    <source
                        media="(min-width: 40em)"
                        srcset="
                            https://mfranzke.github.io/loading-attribute-polyfill/demo/img/picture-media1x-loadinglazy.250x150.png 1x,
                            https://mfranzke.github.io/loading-attribute-polyfill/demo/img/picture-media2x-loadinglazy.500x300.png 2x
                        "
                    />
                    <source
                        srcset="
                            https://mfranzke.github.io/loading-attribute-polyfill/demo/img/picture-1x-loadinglazy.250x150.png 1x,
                            https://mfranzke.github.io/loading-attribute-polyfill/demo/img/picture-2x-loadinglazy.500x300.png 2x
                        "
                    />
                    <img
                        src="https://mfranzke.github.io/loading-attribute-polyfill/demo/img/picture-imgsrc-loadinglazy.250x150.png"
                        loading="lazy"
                        alt=".."
                        width="250"
                        height="150"
                    />
                </noscript>
            </picture>
​
            <noscript class="loading-lazy">
                <img
                    src="https://mfranzke.github.io/loading-attribute-polyfill/demo/img/img-src-loadinglazy.250x150.png"
                    srcset="
                        https://mfranzke.github.io/loading-attribute-polyfill/demo/img/img-srcset1024w-loadinglazy.1024x400.png 1024w,
                        https://mfranzke.github.io/loading-attribute-polyfill/demo/img/img-srcset640w-loadinglazy.640x400.png    640w,
                        https://mfranzke.github.io/loading-attribute-polyfill/demo/img/img-srcset320w-loadinglazy.320x320.png    320w
                    "
                    sizes="(min-width: 36em) 33.3vw, 100vw"
                    alt="A rad wolf"
                    loading="lazy"
                />
            </noscript>
​
            <!-- Regular iframe with loading="lazy" attribute provided for testing -->
            <noscript class="loading-lazy">
                <iframe
                    src="https://player.vimeo.com/video/87110435"
                    width="320"
                    height="180"
                    loading="lazy"
                ></iframe>
            </noscript>
        </header>
​
        <main>
            <!-- Lazy-load an offscreen image when the user scrolls near it -->
            <noscript class="loading-lazy">
                <img
                    src="https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazyimg-src-loadinglazy.250x150.png"
                    loading="lazy"
                    alt=".."
                    width="250"
                    height="150"
                />
            </noscript>
​
            <!-- Load an image right away instead of lazy-loading -->
            <img
                src="https://mfranzke.github.io/loading-attribute-polyfill/demo/img/img-src-loadingeager.250x150.png"
                loading="eager"
                alt=".."
                width="250"
                height="150"
            />
​
            <!-- Browser decides whether or not to lazy-load the image -->
            <img
                src="https://mfranzke.github.io/loading-attribute-polyfill/demo/img/img-src-loadingauto.250x150.png"
                loading="auto"
                alt=".."
                width="250"
                height="150"
            />
​
            <!-- Lazy-load images in <picture> -->
            <picture>
                <noscript class="loading-lazy">
                    <source
                        media="(min-width: 40em)"
                        srcset="
                            https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazypicture-media1x-loadinglazy.250x150.png 1x,
                            https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazypicture-media2x-loadinglazy.500x300.png 2x
                        "
                    />
                    <source
                        srcset="
                            https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazypicture-1x-loadinglazy.250x150.png 1x,
                            https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazypicture-2x-loadinglazy.500x300.png 2x
                        "
                    />
                    <img
                        src="https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazypicture-imgsrc-loadinglazy.250x150.png"
                        loading="lazy"
                        alt=".."
                        width="250"
                        height="150"
                    />
                </noscript>
            </picture>
​
            <!-- Lazy-load an image that has srcset specified -->
            <noscript class="loading-lazy">
                <img
                    src="https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazyimg-src-loadinglazy.250x150.png"
                    srcset="
                        https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazyimg-srcset1024w-loadinglazy.1024x400.png 1024w,
                        https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazyimg-srcset640w-loadinglazy.640x400.png    640w,
                        https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazyimg-srcset320w-loadinglazy.320x320.png    320w
                    "
                    sizes="(min-width: 36em) 33.3vw, 100vw"
                    alt="A rad wolf"
                    loading="lazy"
                />
            </noscript>
​
            <!-- Lazy-load an offscreen iframe when the user scrolls near it -->
            <noscript class="loading-lazy">
                <iframe
                    src="https://player.vimeo.com/video/20997150"
                    width="320"
                    height="180"
                    loading="lazy"
                ></iframe>
            </noscript>
        </main>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mfranzkepro
0viewers