make image loading async

bit-bots · Mar 30, 2021 · e853c1f · e853c1f
1 parent 18276b4
commit e853c1f
Showing 1 changed file with 18 additions and 13 deletions.
diff --git a/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js b/imagetagger/imagetagger/annotations/static/annotations/js/annotations.js
@@ -479,7 +479,7 @@ function calculateImageScale() {
    *
    * @param imageId
    */
-  function displayImage(imageId) {
+  async function displayImage(imageId) {
     imageId = parseInt(imageId);
 
     if (gImageList.indexOf(imageId) === -1) {
@@ -491,7 +491,7 @@ function calculateImageScale() {
 
     if (gImageCache[imageId] === undefined) {
       // image is not available in cache. Load it.
-      loadImageToCache(imageId);
+      await loadImageToCache(imageId);
     }
 
     // image is in cache.
@@ -501,7 +501,7 @@ function calculateImageScale() {
     currentImage.attr('id', '');
     newImage.attr('id', 'image');
     gImageId = imageId;
-    preloadImages();
+    let loadImages = preloadImages();
 
     currentImage.replaceWith(newImage);
     globals.image = newImage;
@@ -513,6 +513,7 @@ function calculateImageScale() {
       // add previous image to cache
       gImageCache[currentImage.data('imageid')] = currentImage;
     }
+    await loadImages;
   }
 
   /**
@@ -530,7 +531,7 @@ function calculateImageScale() {
    *
    * @param imageList
    */
-  function displayImageList(imageList) {
+  async function displayImageList(imageList) {
     let oldImageList = $('#image_list');
     let result = $('<div>');
     let imageContained = false;
@@ -566,7 +567,7 @@ function calculateImageScale() {
 
     // load first image if current image is not within image set
     if (!imageContained) {
-      loadAnnotateView(imageList[0].id);
+      await loadAnnotateView(imageList[0].id);
     }
 
     scrollImageList();
@@ -841,12 +842,12 @@ function calculateImageScale() {
     loading.removeClass('hidden');
     $('#annotation_type_id').val(gAnnotationType);
 
-    displayImage(imageId);
+    let loadImage = displayImage(imageId).then(scrollImageList);
+
     if (!$('#keep_selection').prop('checked')) {
       $('#concealed').prop('checked', false);
       $('#blurred').prop('checked', false);
     }
-    scrollImageList();
 
     $('.annotate_image_link').removeClass('active');
     let link = $('#annotate_image_link_' + imageId);
@@ -882,6 +883,7 @@ function calculateImageScale() {
     } catch {
       console.log("Unable to load annotations for image" + imageId);
     }
+    await loadImage;
   }
 
   /**
@@ -913,7 +915,7 @@ function calculateImageScale() {
         displayFeedback($('#feedback_image_set_empty'));
         filterElem.val('').change();
       } else {
-        displayImageList(data.image_set.images);
+        await displayImageList(data.image_set.images);
       }
     } catch {
       displayFeedback($('#feedback_connection_error'));
@@ -927,7 +929,7 @@ function calculateImageScale() {
    *
    * @param imageId
    */
-  function loadImageToCache(imageId) {
+  async function loadImageToCache(imageId) {
     imageId = parseInt(imageId);
 
     if (gImageList.indexOf(imageId) === -1) {
@@ -1002,14 +1004,16 @@ function calculateImageScale() {
   /**
    * Preload next and previous images to cache.
    */
-  function preloadImages() {
+  async function preloadImages() {
     let keepImages = [];
+    let cacheLoadings = [];
     for (let imageId = gImageId - PRELOAD_BACKWARD;
          imageId <= gImageId + PRELOAD_FORWARD;
          imageId++) {
       keepImages.push(imageId);
-      loadImageToCache(imageId);
+      cacheLoadings.push(loadImageToCache(imageId));
     }
+    await Promise.all(cacheLoadings);
     pruneImageCache(keepImages);
   }
 
@@ -1106,7 +1110,8 @@ function calculateImageScale() {
   }
 
 
-  $(function() {
+  $(document).ready(function() {
+    console.log('foo');
     let get_params = decodeURIComponent(window.location.search.substring(1)).split('&');
     let editAnnotationId = undefined;
     for (let i = 0; i < get_params.length; i++) {
@@ -1130,9 +1135,9 @@ function calculateImageScale() {
       "X-CSRFTOKEN": gCsrfToken
     };
     gImageList = getImageList();
+    scrollImageList();
     loadAnnotationTypeList();
     preloadImages();
-    scrollImageList();
 
     // W3C standards do not define the load event on images, we therefore need to use
     // it from window (this should wait for all external sources including images)