Add image lazy loading

extra/js/drive.js

@@ -19,7 +19,13 @@ function _base64ToBytes(base64) {
     return bytes;
 }
 
-window.loadFileAsync = function(fullPath, callback) {
+// Canvas used for image generation
+var generationCanvas = document.createElement('canvas')
+
+window.loadFileAsync = function(fullPath, bitmap, callback) {
+    // noop
+    callback = callback || (() => {});
+
     // Make cache object
     if (!window.fileAsyncCache) window.fileAsyncCache = {};
 
@@ -27,7 +33,7 @@ window.loadFileAsync = function(fullPath, callback) {
     if (window.fileAsyncCache.hasOwnProperty(fullPath)) return callback();
 
     // Show spinner
-    if (window.setBusy) window.setBusy();
+    if (!bitmap && window.setBusy) window.setBusy();
 
     // Get mapping key
     const mappingKey = fullPath.toLowerCase().replace(new RegExp("\\.[^/.]+$"), "");
@@ -46,18 +52,47 @@ window.loadFileAsync = function(fullPath, callback) {
     const path = "/game/" + mappingValue.substring(0, mappingValue.lastIndexOf("/"));
     const filename = mappingValue.substring(mappingValue.lastIndexOf("/") + 1).split("?")[0];
 
-    // Delete original file if existent
-    try {
-        FS.unlink(path + "/" + filename);
-    } catch (err) {}
+    // Main loading function
+    const load = (cb1) => {
+        getLazyAsset(iurl, filename, (data) => {
+            // Delete original file if existent
+            try { FS.unlink(path + "/" + filename); } catch (err) {}
 
-    // Get the new file
-    getLazyAsset(iurl, filename, () => {
-        FS.createPreloadedFile(path, filename, iurl, true, true, function() {
-            window.fileAsyncCache[fullPath] = 1;
-            if (window.setNotBusy) window.setNotBusy();
-            if (window.fileLoadedAsync) window.fileLoadedAsync(fullPath);
-            callback();
+            FS.createPreloadedFile(path, filename, new Uint8Array(data), true, true, function() {
+                window.fileAsyncCache[fullPath] = 1;
+                if (!bitmap && window.setNotBusy) window.setNotBusy();
+                if (window.fileLoadedAsync) window.fileLoadedAsync(fullPath);
+                callback();
+                if (cb1) cb1();
+            }, console.error);
+        });
+    }
+
+    // Show progress if doing it synchronously only
+    if (bitmap && bitmapSizeMapping[mappingKey]) {
+        // Remove existing file
+        try { FS.unlink(path + "/" + filename); } catch (err) {}
+
+        // Get image
+        const sm = bitmapSizeMapping[mappingKey];
+        generationCanvas.width = sm[0];
+        generationCanvas.height = sm[1];
+
+        // Create dummy from data uri
+        FS.createPreloadedFile(path, filename, generationCanvas.toDataURL(), true, true, function() {
+            // Return control to C++
+            callback(); callback = () => {};
+
+            // Lazy load and refresh
+            load(() => {
+                const reloadBitmap = Module.cwrap('reloadBitmap', 'number', ['number'])
+                reloadBitmap(bitmap);
+            });
         }, console.error);
-    });
+    } else {
+        if (bitmap) {
+            console.warn('No sizemap for image', mappingKey);
+        }
+        load();
+    }
 }

extra/make_mapping.sh

@@ -1,6 +1,7 @@
 #!/bin/bash
 
 echo "var mapping = {" > mapping.js
+echo "var bitmapSizeMapping = {" > bitmap-map.js
 
 for file in {*,*/*,*/**/*}
 do
@@ -17,7 +18,16 @@ fi
 
 echo "\"$fl\": \"${file}?h=${md5}\"," >> mapping.js
 
+if [ -f $file ]
+then
+    sz=`identify -format "%w,%h" "${file}" 2>/dev/null`
+    if [ $? -eq 0 ]; then
+        echo "\"$fl\": [${sz}]," >> bitmap-map.js
+    fi
+fi
+
 done
 
 echo "};" >> mapping.js
+echo "};" >> bitmap-map.js
 

extra/shell.html

@@ -8,6 +8,7 @@
     <script src="js/localforage.min.js"></script>
     <script src="js/drive.js"></script>
     <script src="gameasync/mapping.js"></script>
+    <script src="gameasync/bitmap-map.js"></script>
 
     <title>MKXP</title>
     <style>
@@ -292,6 +293,7 @@
       var hideTimer = 0;
       function getLazyAsset(url, filename, callback) {
           const xhr = new XMLHttpRequest();
+          xhr.responseType = "arraybuffer";
           const pdiv = document.getElementById("progress");
           let showTimer = 0;
           let abortTimer = 0;
@@ -308,10 +310,9 @@
                       pdiv.style.opacity = '0';
                       hideTimer = 0;
                   }, 500);
-                  callback();
-
                   clearTimeout(showTimer);
                   clearTimeout(abortTimer);
+                  callback(xhr.response);
               }
           }
           xhr.onprogress = function (event) {