Lightense always loads fallback image when using responsive images

[svdvonde]

Problem

When using Responsive images, lightense always loads the photo from the src tag, even when this image is not used by the browser because a different source was used from srcset. This causes the image in src to be fetched after the click event, causing a potentially long delay between a click and lightense opening the image.

Background

Responsive images can be used to load different sizes of an image depending on the client. The browser will decide which image to load.

E.g., in the following snippet from the mdn docs, the browser can choose to load different either elva-fairy-320w.jpg, elva-fairy-480w.jpg (1.5x size), or elva-fairy-640w.jpg (2x size) depending on the desired quality. The image mentioned in src is merely a fallback.

<img
  srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
  src="elva-fairy-640w.jpg"
  alt="Elva dressed as a fairy" />

Steps to reproduce

Reproduction on Codepen.io, where two different images are used. railgun-logo.png will be loaded by the browser and displayed, whereas imouto-logo-large.png will be loaded by lightense.

Open the developer tools (network tab), then click the image to trigger lightense. The click will trigger the image imouto-logo-large.png to be loaded.

<p>
  <img 
    srcset="https://d349cztnlupsuf.cloudfront.net/railgun-logo.png 1x"
    src="https://d349cztnlupsuf.cloudfront.net/imouto-logo-large.png">
</p>

window.addEventListener('load', function () {
  Lightense('img:not(.no-lightense),.lightense');
}, false);