Conditionally eager load

[s3ththompson]

Conditionally eager load

[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.