Skip to content

Latest commit

 

History

History
59 lines (48 loc) · 2.31 KB

README.md

File metadata and controls

59 lines (48 loc) · 2.31 KB
Raw

#lazysizes noscript/progressive enhancement extension

The noscript extension is the true ultimate progressive enhancement extension for lazySizes. It allows you to transform any HTML inside a noscript element as soon as it becomes visible.

##Markup

The lazyload class has to be added to the parent element of the noscript element and this element has to also have a data-noscript attribute. As soon as it is near the viewport the content of the noscript element will replace the content of the ``.lazyload` element.

<div class="lazyload" data-noscript="">
    <noscript>
        <p>any kind of content you want to be unveiled</p>
    </noscript>
</div>

<!-- or -->

<div class="lazyload" data-noscript="">
    <noscript>
        <picture>
            <!--[if IE 9]><video style="display: none;><![endif]-->
            <source
                srcset="http://placehold.it/500x600/11e87f/fff"
                media="(max-width: 480px)" />
            <source
                srcset="http://placehold.it/700x300"
                media="(max-width: 700px)" />
            <source
                srcset="http://placehold.it/1400x600/e8117f/fff"
                media="(max-width: 1400px)" />
            <source
                srcset="http://placehold.it/1800x900/117fe8/fff" />
            <!--[if IE 9]></video><![endif]-->
            <img
                src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                alt="image with artdirection" />
        </picture>


         <iframe frameborder="0"
                allowfullscreen=""
                src="//www.youtube.com/embed/ZfV-aYdU4uE">
            </iframe>
    </noscript>
</div>

Important note: While you also can transform responsive images with this plugin, neither the data-sizes nor the customMedia features do work with the noscript extension. Also note: Android 2.x is not supported with this plugin.

##Add IE8- support with conditional comments The noscript extension can also be used in conjunction with conditional comments to add progressive enhancement support for IE8-:

<div class="lazyload" data-noscript="">
    <!--[if lte IE 8]><noscript><![endif]-->
        <p>any kind of content you want to be unveiled</p>
    <!--[if lte IE 8]></noscript><![endif]-->
</div>