Skip to content

Latest commit

 

History

History
72 lines (57 loc) · 3 KB

README.md

File metadata and controls

72 lines (57 loc) · 3 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.

##Troubleshooting: Escaped HTML entities Normally the content of a noscript must be retrieved as text. But in some cases for example, if the noscript element was created in a XML documented/context, it must be retrieved as HTML. This can't be automatically detected.

In case this happens, you can fix this either by making sure that noscript elements are always created in a text/html context or by overriding the getNoscriptContent option callback:

window.lazySizesConfig = window.lazySizesConfig || {};

window.lazySizesConfig.getNoscriptContent =  function(noScript){
    return (noScript.isXML) ? noScript.innerHTML : (noScript.textContent || noScript.innerText);
};

##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>