Lazysizes: IE11 <picture> with 2x in srcset doesn't load

Created on 15 Sep 2017  路  3Comments  路  Source: aFarkas/lazysizes

When the data-srcset contains a retina (2x) image, the image doesn't load.
The ls.respimg.min.js file is loaded.

This fails:

<picture>
    <!--[if IE 9]><video style="display: none;><![endif]-->
    <source
        data-srcset="image-xx-large.jpg,
                    [email protected] 2x"
        media="--xx-large" />
    <source
        data-srcset="image-x-large.jpg,
                    [email protected] 2x"
        media="--x-large" />
    <source
        data-srcset="image-large.jpg,
                    [email protected] 2x"
        media="--large" />
    <source
        data-srcset="image-medium.jpg,
                    [email protected] 2x"
        media="--medium" />
    <source
        data-srcset="image-small.jpg,
                    [email protected] 2x"
        media="--small" />
    <source
        data-srcset="image.jpg,
                    [email protected] 2x" />
    <!--[if IE 9]></video><![endif]-->
    <img alt=""
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        data-src="image-x-large.jpg"
        class="lazyload" />
</picture>

This does work:

<picture>
    <!--[if IE 9]><video style="display: none;><![endif]-->
    <source
        data-srcset="image-xx-large.jpg"
        media="--xx-large" />
    <source
        data-srcset="image-x-large.jpg"
        media="--x-large" />
    <source
        data-srcset="image-large.jpg"
        media="--large" />
    <source
        data-srcset="image-medium.jpg"
        media="--medium" />
    <source
        data-srcset="image-small.jpg"
        media="--small" />
    <source
        data-srcset="image.jpg" />
    <!--[if IE 9]></video><![endif]-->
    <img alt=""
        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
        data-src="image-x-large.jpg"
        class="lazyload" />
</picture>

Most helpful comment

Found it, had to use picturefill.min.js i/o ls.respimg.min.js.
Love your plugin!

All 3 comments

This is my temporarily fix:

<script>
    if(!window.HTMLPictureElement || !('sizes' in document.createElement('img'))){
        var sources = document.querySelectorAll('source');
        [].forEach.call(sources, function(source) {
            source.dataset.srcset = source.dataset.srcset.split(',')[0];
        });
    }
</script>

Please read the documentation!

Found it, had to use picturefill.min.js i/o ls.respimg.min.js.
Love your plugin!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jpw123 picture jpw123  路  6Comments

dhymik picture dhymik  路  5Comments

obzenner picture obzenner  路  5Comments

maximelebreton picture maximelebreton  路  4Comments

zenderol picture zenderol  路  5Comments