revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-28 00:10:57 +01:00
Code Issues Releases Wiki Activity

Preload images in Pholio and fix dimension rendering

Browse source 
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:
epriestley 2013-03-10 13:30:41 -07:00
parent 47f6aecb72
commit ca20323b87
2 changed files with 54 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/__celerity_resource_map__.php
View file

@ -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(

58
webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js
View file

@ -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();
});