Preload images in Pholio and fix dimension rendering

Summary:
Preload all the images when viewing a pholio. Fixes T2692.

We should probably use lower-resolution previews on mobile and only show full resolution when the user taps. We should also suppress the thumbnails from loading on mobile since they aren't visible. But neither is critical for the moment.

Test Plan: Added logging, verified everything loaded.

Reviewers: chad

Reviewed By: chad

CC: aran

Maniphest Tasks: T2692

Differential Revision: https://secure.phabricator.com/D5316

src/__celerity_resource_map__.php

@@ -1963,7 +1963,7 @@ celerity_register_resource_map(array(
   ),
   'javelin-behavior-pholio-mock-view' =>
   array(
-    'uri' => '/res/fb05d457/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
+    'uri' => '/res/eefc43b3/rsrc/js/application/pholio/behavior-pholio-mock-view.js',
     'type' => 'js',
     'requires' =>
     array(

webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js

@@ -674,13 +674,37 @@ JX.behavior('pholio-mock-view', function(config) {
       image.desc);
     info.push(desc);
 
-    var visible = null;
+    // Render image dimensions and visible size. If we have this infomation
+    // from the server we can display some of it immediately; otherwise, we need
+    // to wait for the image to load so we can read dimension information from
+    // it.
+
+    var image_x = image.width;
+    var image_y = image.height;
+    var display_x = null;
     if (image.tag) {
-      var area = Math.round(100 * (image.tag.width / image.width));
+      image_x = image.tag.naturalWidth;
-      area = ['(' + area + '%' + ')'];
+      image_y = image.tag.naturalHeight;
-      visible = [' ', JX.$N('span', {className: 'pholio-visible-size'}, area)];
+      display_x = image.tag.width;
+    }
+
+    var visible = [];
+    if (image_x) {
+      visible.push([image_x, '\u00d7', image_y, 'px']);
+      if (display_x) {
+        var area = Math.round(100 * (display_x / image_x));
+        visible.push(' ');
+        visible.push(
+          JX.$N(
+            'span',
+            {className: 'pholio-visible-size'},
+            ['(', area, '%', ')']));
+      }
+    }
+
+    if (visible.length) {
+      info.push(visible);
     }
-    info.push([image.width, '\u00d7', image.height, 'px', visible]);
 
     var full_link = JX.$N(
       'a',
@@ -773,4 +797,28 @@ JX.behavior('pholio-mock-view', function(config) {
     return el;
   }
 
+
+/* -(  Preload  )------------------------------------------------------------ */
+
+  var preload = [];
+  for (var ii = 0; ii < config.images.length; ii++) {
+    preload.push(config.images[ii].fullURI);
+  }
+
+  function preload_next() {
+    next_src = preload[0];
+    if (!next_src) {
+      return;
+    }
+    preload.splice(0, 1);
+
+    var img = JX.$N('img');
+    img.onload = preload_next;
+    img.onerror = preload_next;
+    img.src = next_src;
+  }
+
+  preload_next();
+
+
 });