nprapps / usda-plant-hardiness

Visual narrative: The USDA’s gardening zones shifted. This map shows you what’s changed in vivid detail
https://apps.npr.org/plant-hardiness-garden-map/
Other
1 stars 0 forks source link

Possible to lazy-load pmtiles? #80

Closed DanielJWood closed 6 months ago

DanielJWood commented 7 months ago

I'm wondering if we can lazy-load slides, if we can ever anticipate ahead of time what location/layers the user will get next in terms of PMTiles. Might be impossible based on structure. not sure.

But we do it for images...I can't quite parse what's happening here in the code, but here it is:

  // lazy-load neighboring slides
  var neighbors = [-1, 0, 1, 2];
  var all = $(".sequence .slide");
  var index = all.indexOf(slide);
  neighbors.forEach(function(offset) {
    var neighbor = all[index + offset];
    if (!neighbor) return;
    var images = $("[data-src]", neighbor);
    images.forEach(function(img) {
      img.src = img.dataset.src;
      img.removeAttribute("data-src");
      if (img.dataset.poster) {
        img.poster = img.dataset.poster;
        img.removeAttribute("data-poster");
      }
    })
  });
alykat commented 7 months ago

When images are written to the page, there are image tags and data-src attributes, but the src isn't filled in.

How I'm reading this code:

When a slide with an image is coming up in the queue (the neighbors — either the current slide (0), the previous slide (-1), or in the next 2), it'll move the data-src into src and trigger the image to load.

I'm not sure about the poster ones — I'm assuming that has to do with poster images on video, though I thought those were baked into the video tags, not separate image attributes. (I could be wrong on that though.) And for ice melt, I think video lazy-loading was handled elsewhere.

DanielJWood commented 7 months ago

Here's some discussion of this sort of thing: https://github.com/maplibre/maplibre-gl-js/issues/116 https://github.com/mapbox/mapbox-gl-js/pull/11328