staggered, cancellable preloading of all section image assets, as soon as the section loads

1 files changed, 25 insertions, 3 deletions

diff --git a/animism-align/frontend/app/utils/image.utils.js b/animism-align/frontend/app/utils/image.utils.js
index d7b7508..358c91d 100644
--- a/animism-align/frontend/app/utils/image.utils.js
+++ b/animism-align/frontend/app/utils/image.utils.js
@@ -1,4 +1,24 @@
-const preloadedImages = {}
+import { displayElementImageURL, galleryFullsizeImageURLS } from 'app/utils/annotation.utils'
+
+export const preloadSectionImages = (section, mediaLookup) => {
+  // console.log(section)
+  let urls = []
+  section.fullscreenTimeline.forEach(element => {
+    // console.log(element)
+    const mediaItem = mediaLookup[element.settings.media_id]
+    if (!mediaItem) return
+    // console.log(mediaItem)
+    switch (mediaItem.type) {
+      case 'image':
+        urls.push(displayElementImageURL(element, mediaItem))
+        break
+      case 'gallery':
+        urls = urls.concat(galleryFullsizeImageURLS(mediaItem))
+        break
+    }
+  })
+  return preloadImages(urls)
+}
 
 export const preloadImages = urls => batchPromise(urls, 4, preloadImage)
 
@@ -41,12 +61,14 @@ export const batchPromise = (list, count, fn) => {
   }
 }
 
+const preloadedImageCache = {}
 export const preloadImage = (url, anonymous=false) => (
   new Promise((resolve, reject) => {
-    if (preloadedImages[url] || typeof url === 'object' && url instanceof Image) {
+    if (!url || preloadedImageCache[url] || typeof url === 'object' && url instanceof Image) {
       return resolve(url)
     }
-    preloadedImages[url] = true
+    // console.log('preload', url)
+    preloadedImageCache[url] = true
     const image = new Image()
     let loaded = false
     image.onload = () => {