useSrcset=true should also set src as fallback on img tag

In browsers that do not support srcset (e.g. IE11), ng-lazyload-image fails silently - onLoad is not even called with a false argument.

The proper way to handle this would be, in my opinion, to also set the src attribute to the largest image available in the srcset. This ensures that browsers without srcset support will at least load an image.

[sapierens]

I agree and it should be quite easy to do, I guess we just need to change the following lines:

It would work with <picture>, but wouldn’t with <img> tags, since the srcset attribute has to be parsed to extract the correct image, e.g.:

<img srcset="img-320w.jpg 320w,
             img-480w.jpg 480w,
             img-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px">

Parsing this should be pretty easy (at least for selecting the largest image), but I’m not sure how much of an overhead it would add. But doing so would enable at least somewhat working lazy loading for browsers that don’t support srcset attribute. Maybe it’s worth looking into srcset polyfills to see how they’re doing their detection and parsing.

[tjoskar]

Hum… weird that onLoad is never called. It should be called with true even if srcset is not supported (since the image should be loaded anyway). ng-lazyload-image does not know if srcset is supported or not so it will assume it is (if useSrcset=true) and try to load it any way. It will then pass the path to the loaded image to the browser and then unsubscribes to all events.

I do however agree that ng-lazyload-image should check if srcset is supported but I’m not sure how. The only way I know is to use CSS.supports but that is not supported in IE 🤦‍♂️.