Support for type attribute in <picture> source for image/webp images.

[christopherbruce]

This plugin doesn't seem to load responsive images based on the source type attribute. I've tested it with the following markup (using the instructions on the README file to change source tags to br)

    <picture>
      <br type="image/webp" data-src="image-sm.webp">
      <br type="image/webp" data-src="image-md.webp" media="(min-width: 800px)">
      <br type="image/webp" data-src="image.webp" media="(min-width: 1200px)">
      <br data-src="image-sm.jpg">
      <br data-src="image-md.jpg" media="(min-width: 800px)">
      <br data-src="image.jpg" media="(min-width: 1200px)">
      <noscript><img alt="" data-src="image.jpg"></noscript>
    </picture>

[christopherbruce]

I got it to work by changing the markup to the following:

 <picture>
      <br data-src="image-sm.jpg">
      <br data-src="image-md.jpg" media="(min-width: 800px)">
      <br data-src="image.jpg" media="(min-width: 1200px)">
      <br type="image/webp" data-src="image-sm.webp">
      <br type="image/webp" data-src="image-md.webp" media="(min-width: 800px)">
      <br type="image/webp" data-src="image.webp" media="(min-width: 1200px)">
      <noscript><img alt="" data-src="image.jpg"></noscript>
    </picture>

and then making a copy of jquery.lazyloadxt.picture.js and adding an additional check for support of WebP images.

[miroslaw-dubaj]

adding an additional check for support of WebP images
Could you kindly elaborate on that? I've tried to add such check but with no results.