Loading/Caching with <video> Tag

Learn
1

Hello!

I’m new to Elm and working on my first project. It’s great so far :slight_smile:

My issue is this: I have a list of videos that I want to display to the user as thumbnails. As the user cycles through videos, they pop the head off this list and the tail rerenders as the thumbnails. The thumbnails are simply HTML5 <video> elements.

Everything is working, but I’ve realized that each time the thumbnail list changes, the elements get rerendered and make additional requests for videos that have already been loaded. So, if I have 10 videos “in waiting”, and the user cycles through all of them, I’m essentially making (10 + 1)*5 requests when I only want to make 10.

So – is there some way in ELM that I can manipulate this list of HTML elements without causing them to rerender?

Or, an alternate solution? I have considered generating actual thumbnail images on the backend and loading those instead, but it doesn’t really solve the problem of making lots of requests for data that’s already been downloaded. Seems like there should be some way of doing this.

Thanks for your time!

2

If I understand what you are saying correctly, I think you are looking for Html.Keyed.

A keyed node helps optimize cases where children are getting added, moved, removed, etc.
…
When you use a keyed node, every child is paired with a string identifier. This makes it possible for the underlying diffing algorithm to reuse nodes more efficiently.

So if you render your view with the thumbnails as a keyed list with consistent ids, Elm should reuse those nodes rather than changing them.

1 Like
3

I think this is exactly what I need. Thanks!

I shouldn’t have skipped the optimization section when I was going through the tutorial :slight_smile:

4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.