Problems loading srcset images

I've been adapting featherlight.js to enable the use of srcset. In contentFilters: image: I set the image parameters like this (please ignore the clumsy coding style):

var basepath = a.substr(0, a.lastIndexOf('/'));
var basefile = a.substr(a.lastIndexOf('/') + 1);
var b = d.Deferred(),
    c = new Image,
    e = d('<img src="' + a + '" alt="" class="' + this.namespace + '-image" sizes="100vw" srcset="' + basepath + '/1920/' + basefile + ' 1920w, ' +basepath + '/1280/' + basefile + ' 1280w, ' + basepath + '/640/' + basefile + ' 640w"/>');

Variable 'a' being the file url.

In principle, this works just fine. FF, Chrome and Safari recognize the listed sources and load images from different folders depending on window width.

However, I'm stuck with some arcane behaviour, which occurs in all browsers. Sourced images will often not show at all, especially after resizing the window so a new source is picked. Apparently, the onload event fires in each case but the images will not show. Then either closing and reopening the lightbox or resizing the browser window will help draw the image. Apparently, these problems disappear once the image is loaded into the browser cache.

I've been trying all sorts of tricks to force either a redraw or a reload but to no avail. Any clues as to what might be going on are welcome.