mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-22 06:42:42 +01:00
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
This commit is contained in:
parent
47f6aecb72
commit
ca20323b87
2 changed files with 54 additions and 6 deletions
|
@ -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(
|
||||
|
|
|
@ -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));
|
||||
area = ['(' + area + '%' + ')'];
|
||||
visible = [' ', JX.$N('span', {className: 'pholio-visible-size'}, area)];
|
||||
image_x = image.tag.naturalWidth;
|
||||
image_y = image.tag.naturalHeight;
|
||||
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();
|
||||
|
||||
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue