Conditionally eager load

[s3ththompson]

It would be nice to allow sub classes to conditionally opt in to eager loading. I generally like to eager load images with an on-idle callback if the device has network speed greater than a certain value. I'm imagining something like this:

eagerEnter () {
  var connection = navigator.connection
  return (connection.type !== 'cellular')
}

WDYT? In general how do you balance eager loading for (perceptually) instant loading vs. lazy loading for efficiency's sake?

[jongacnik]

This is an interesting thought. I generally don't eager load. I don't really have a great reason not to, though I suppose seeing that moment when images pop in is something I've gotten used to so I haven't thought much about further optimizing for perceived faster loading. In some ways I kind of like that moment.

That said, am curious. If eager loading do you typically do some sort of sequencing? Like, on idle, begin loading images in the page sequentially?

[s3ththompson]

I really only do this in specific cases like a slideshow which is built around instantaneous switching among a number of images or something. (So I definitely would buy an argument that this is out-of-scope for a generic component.) I'm still experimenting with the best way to do this. Previously, on page (or component) load I've called something like this within an on-idle callback:

prefetch () {
  this.images.map(image => {
    image.buffer = html`<img src="${image.source}">`
  })
}

As an optimization, prefetch can run only if NetworkInformation returns a connection that seems like 4g or desktop or something.

I agree about slight delay in images appearing, as long as they're in intrinsically sized containers. In fact even with the above I usually add a slight fade-in animation.