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>
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!
Most helpful comment
Found it, had to use
picturefill.min.jsi/ols.respimg.min.js.Love your plugin!