search

ressio / lazy-load-xt

Lazy load XT is a jQuery plugin for images, videos and other media
http://ress.io/lazy-load-xt-jquery/
MIT License
1.36k stars 245 forks source link

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

Open christopherbruce opened 7 years ago

christopherbruce commented 7 years ago

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 commented 7 years ago

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 commented 5 years ago

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.