Workaround/Idea: Preloading images with srcset attributes (chrome)

[rs3d]

Hi,
I'm working on a mobile app and was searching for a solution to preload the "current" image when an image has the srcset attribute (for calculating it's container height).
I had many issues on chrome/win and resolved them by using the img property 'currentSrc'.

Because there was no event, when currentSrc has been set by chrome (I was testing many timeout values), I choose following approach:

function waitForComputedSrcset (images, $dfd) {
    $dfd = $dfd || $.Deferred();

    var computed = 0,
        length = images.length;

    for (var i = 0; i < length; i++) {
        if (images[i].hasOwnProperty('currentSrc') && !! !images[i].currentSrc) {
            window.setTimeout(this.waitForComputedSrcset.bind(this, images, $dfd), 100);
            return $dfd;
        }
        computed++;
    }
    return (length === computed) ? $dfd.resolve(images) : $dfd;
}

When all images are "computed" by chrome I set all src properties of the resolved images to
var length = images.length;
for (var i = 0; i < length; i++) {
if (images[i].hasOwnProperty('currentSrc') && !! !images[i].currentSrc) {
images.src = images[i].currentSrc;
}
}

I'm not sure if this is a solution to the specs, but so I've got it working and imagesloaded doesn't load the wrong images initially. Imo/Hopefully only browsers, which are supporting the srcset attribute are setting img.currentSrc.

[PavelCherkashinCreuna]

@rs3d Thanks, it works fine for me. Btw: is there any good reason to use 100ms in setTimeout? Because it works fine with 0ms for me.

[desandro]

Unfortunately, I haven't tackled srcset with imagesLoaded. Thank you for sharing your insights here.

[rs3d]

Hi @Ppavell, when I was using currentSrc, it wasn't computed on pageload. I used 100ms to save cpu performance. With 0ms waitForComputedSrcset is called very often. Insert a console.log and try some different timeouts to see the difference.

[hatsumatsu]

Hi @rs3d, your workaround seems to be a perfect solution for #175 . Could you give us a more detailed example of how to use your function in combination with a regular imagesLoaded workflow? Thanks!

[rs3d]

Hi @hatsumatsu, here is a rough pen: http://codepen.io/rawbitz/pen/WbZMem (only tested in Mac/Chrome 40)
Every 50ms waitForComputedSrcset is looking for the currentSrc property.
If finished all image.src properties are updated and imagesLoaded can be run.

[hatsumatsu]

Thanks @rs3d, I'll give it a try, looks very promising!

[cywtf]

The workaround from @rs3d is doing the trick now for me. It's loading fine in Chrome 40 (PC)

[hayatbiralem]

Hi,

I did not find a solution with imagesLoaded for my issue than I wrote a simple function with some jQuery improvemens. That works for me now without imagesLoaded library:

My Pen: http://codepen.io/hayatbiralem/pen/jbjLZe?editors=001
Original Pen: http://codepen.io/desandro/pen/bIFyl

var imagesLoaded = function(selector, onComplete, onProgress) {
  var $images = $(selector).find('img');
  var success = 0;
  var error = 0;
  var iteration = 0;
  var total = $images.length;
  var check = function(el, status) {
    iteration++;
    var data = {
      img: el,
      iteration: iteration,
      success: success,
      error: error,
      total: total,
      status: status
    };
    $.isFunction(onProgress) && onProgress(data);
    if (success + error === total) {
      $.isFunction(onComplete) && onComplete(data);
    }
  };
  $images.each(function() {
    this.onload = function() {
      success++;
      check(this, 'success');
    };
    this.onerror = function() {
      error++;
      check(this, 'error');
    };
  });
};