bug:2820 & bug:2684
add $conf['maxRequests'] perf enhanced : declare once {combine_script} add one loading gif, fixed at the bottom right of the page display an icon for picture loading, and an error icon if ajax failed : might need to be integrated in sprite.png ToDo picture page/clean up unused loader gif/sleep above all. git-svn-id: http://piwigo.org/svn/trunk@20161 68402e56-0260-453c-a942-63ccdbb3a9ee
This commit is contained in:
parent
0b70232656
commit
a6f55ac038
10 changed files with 88 additions and 8 deletions
|
@ -387,6 +387,7 @@ if (count($categories) > 0)
|
||||||
$derivative_params = trigger_event('get_index_album_derivative_params', ImageStdParams::get_by_type(IMG_THUMB) );
|
$derivative_params = trigger_event('get_index_album_derivative_params', ImageStdParams::get_by_type(IMG_THUMB) );
|
||||||
$tpl_thumbnails_var_selection = trigger_event('loc_end_index_category_thumbnails', $tpl_thumbnails_var_selection);
|
$tpl_thumbnails_var_selection = trigger_event('loc_end_index_category_thumbnails', $tpl_thumbnails_var_selection);
|
||||||
$template->assign( array(
|
$template->assign( array(
|
||||||
|
'maxRequests' =>$conf['maxRequests'],
|
||||||
'category_thumbnails' => $tpl_thumbnails_var_selection,
|
'category_thumbnails' => $tpl_thumbnails_var_selection,
|
||||||
'derivative_params' => $derivative_params,
|
'derivative_params' => $derivative_params,
|
||||||
) );
|
) );
|
||||||
|
|
|
@ -153,6 +153,7 @@ foreach ($pictures as $row)
|
||||||
|
|
||||||
$template->assign( array(
|
$template->assign( array(
|
||||||
'derivative_params' => trigger_event('get_index_derivative_params', ImageStdParams::get_by_type( pwg_get_session_var('index_deriv', IMG_THUMB) ) ),
|
'derivative_params' => trigger_event('get_index_derivative_params', ImageStdParams::get_by_type( pwg_get_session_var('index_deriv', IMG_THUMB) ) ),
|
||||||
|
'maxRequests' =>$conf['maxRequests'],
|
||||||
'SHOW_THUMBNAIL_CAPTION' =>$conf['show_thumbnail_caption'],
|
'SHOW_THUMBNAIL_CAPTION' =>$conf['show_thumbnail_caption'],
|
||||||
) );
|
) );
|
||||||
$tpl_thumbnails_var = trigger_event('loc_end_index_thumbnails', $tpl_thumbnails_var, $pictures);
|
$tpl_thumbnails_var = trigger_event('loc_end_index_thumbnails', $tpl_thumbnails_var, $pictures);
|
||||||
|
|
|
@ -769,4 +769,7 @@ $conf['chmod_value']= substr_compare(PHP_SAPI, 'apa', 0, 3)==0 ? 0777 : 0755;
|
||||||
|
|
||||||
// 'small', 'medium' or 'large'
|
// 'small', 'medium' or 'large'
|
||||||
$conf['derivative_default_size'] = 'medium';
|
$conf['derivative_default_size'] = 'medium';
|
||||||
|
|
||||||
|
//Maximum Ajax requests at once, for thumbnails on-the-fly generation
|
||||||
|
$conf['maxRequests']=3;
|
||||||
?>
|
?>
|
BIN
themes/default/icon/errors_small.png
Normal file
BIN
themes/default/icon/errors_small.png
Normal file
Binary file not shown.
After ![]() (image error) Size: 1.2 KiB |
BIN
themes/default/icon/img_small.png
Normal file
BIN
themes/default/icon/img_small.png
Normal file
Binary file not shown.
After ![]() (image error) Size: 1.1 KiB |
BIN
themes/default/images/ajax_loader.gif
Normal file
BIN
themes/default/images/ajax_loader.gif
Normal file
Binary file not shown.
After ![]() (image error) Size: 11 KiB |
|
@ -171,8 +171,9 @@ jQuery("#derivativeSwitchBox").on("mouseleave", function() {
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{if !empty($THUMBNAILS)}
|
{if !empty($THUMBNAILS)}
|
||||||
|
<div class="loader" style="display: none; position: fixed; right: 0;bottom: 0;"><img src="{$ROOT_URL}{$themeconf.img_dir}/ajax_loader.gif"></div>
|
||||||
<ul class="thumbnails" id="thumbnails">
|
<ul class="thumbnails" id="thumbnails">
|
||||||
{$THUMBNAILS}
|
{$THUMBNAILS}
|
||||||
</ul>
|
</ul>
|
||||||
{/if}
|
{/if}
|
||||||
{if !empty($thumb_navbar)}
|
{if !empty($thumb_navbar)}
|
||||||
|
|
|
@ -7,18 +7,55 @@
|
||||||
height: {$derivative_params->max_height()+5}px;
|
height: {$derivative_params->max_height()+5}px;
|
||||||
}
|
}
|
||||||
{/html_style}{/strip}
|
{/html_style}{/strip}
|
||||||
|
<div class="loader" style="display: none; position: fixed; right: 0;bottom: 0;"><img src="{$ROOT_URL}{$themeconf.img_dir}/ajax_loader.gif"></div>
|
||||||
<ul class="thumbnailCategories">
|
<ul class="thumbnailCategories">
|
||||||
{foreach from=$category_thumbnails item=cat name=cat_loop}
|
{foreach from=$category_thumbnails item=cat name=cat_loop}
|
||||||
{assign var=derivative value=$pwg->derivative($derivative_params, $cat.representative.src_image)}
|
{assign var=derivative value=$pwg->derivative($derivative_params, $cat.representative.src_image)}
|
||||||
{if !$derivative->is_cached()}
|
{if !$derivative->is_cached() and !$js_loaded}
|
||||||
{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'}
|
{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'}
|
||||||
{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'}
|
{*combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'*}
|
||||||
|
{footer_script}{literal}
|
||||||
|
var thumbnails_queue = jQuery.manageAjax.create('queued', {
|
||||||
|
queue: true,
|
||||||
|
cacheResponse: false,
|
||||||
|
maxRequests: {/literal}{$maxRequests}{literal},
|
||||||
|
preventDoubleRequests: false
|
||||||
|
});
|
||||||
|
|
||||||
|
function add_thumbnail_to_queue(img, loop) {
|
||||||
|
thumbnails_queue.add({
|
||||||
|
type: 'GET',
|
||||||
|
url: img.data('src'),
|
||||||
|
data: { ajaxload: 'true' },
|
||||||
|
dataType: 'json',
|
||||||
|
beforeSend: function(){jQuery('.loader').show()},
|
||||||
|
success: function(result) {
|
||||||
|
img.attr('src', result.url);
|
||||||
|
jQuery('.loader').hide();
|
||||||
|
},
|
||||||
|
error: function() {
|
||||||
|
if (loop < 3)
|
||||||
|
add_thumbnail_to_queue(img, ++loop); // Retry 3 times
|
||||||
|
img.attr('src', {/literal}"{$ROOT_URL}{$themeconf.icon_dir}/errors_small.png"{literal});
|
||||||
|
jQuery('.loader').hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function pwg_ajax_thumbnails_loader() {
|
||||||
|
jQuery('img[data-src]').each(function() {
|
||||||
|
add_thumbnail_to_queue(jQuery(this), 0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
jQuery(document).ready(pwg_ajax_thumbnails_loader);
|
||||||
|
{/literal}{/footer_script}
|
||||||
|
{assign var=js_loaded value=true}
|
||||||
{/if}
|
{/if}
|
||||||
<li class="{if $smarty.foreach.cat_loop.index is odd}odd{else}even{/if}">
|
<li class="{if $smarty.foreach.cat_loop.index is odd}odd{else}even{/if}">
|
||||||
<div class="thumbnailCategory">
|
<div class="thumbnailCategory">
|
||||||
<div class="illustration">
|
<div class="illustration">
|
||||||
<a href="{$cat.URL}">
|
<a href="{$cat.URL}">
|
||||||
<img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-small.gif" data-src="{$derivative->get_url()}"{/if} alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '|@strip_tags:false} - {'display this album'|@translate}">
|
<img {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.icon_dir}/img_small.png" data-src="{$derivative->get_url()}"{/if} alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '|@strip_tags:false} - {'display this album'|@translate}">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="description">
|
<div class="description">
|
||||||
|
|
|
@ -23,15 +23,51 @@
|
||||||
{/html_style}
|
{/html_style}
|
||||||
{foreach from=$thumbnails item=thumbnail}
|
{foreach from=$thumbnails item=thumbnail}
|
||||||
{assign var=derivative value=$pwg->derivative($derivative_params, $thumbnail.src_image)}
|
{assign var=derivative value=$pwg->derivative($derivative_params, $thumbnail.src_image)}
|
||||||
{if !$derivative->is_cached()}
|
{if !$derivative->is_cached() and !$js_loaded}
|
||||||
{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'}
|
{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'}
|
||||||
{combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'}
|
{*combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'*}
|
||||||
|
{footer_script}{literal}
|
||||||
|
var thumbnails_queue = jQuery.manageAjax.create('queued', {
|
||||||
|
queue: true,
|
||||||
|
cacheResponse: false,
|
||||||
|
maxRequests: {/literal}{$maxRequests}{literal},
|
||||||
|
preventDoubleRequests: false
|
||||||
|
});
|
||||||
|
|
||||||
|
function add_thumbnail_to_queue(img, loop) {
|
||||||
|
thumbnails_queue.add({
|
||||||
|
type: 'GET',
|
||||||
|
url: img.data('src'),
|
||||||
|
data: { ajaxload: 'true' },
|
||||||
|
dataType: 'json',
|
||||||
|
beforeSend: function(){jQuery('.loader').show()},
|
||||||
|
success: function(result) {
|
||||||
|
img.attr('src', result.url);
|
||||||
|
jQuery('.loader').hide();
|
||||||
|
},
|
||||||
|
error: function() {
|
||||||
|
if (loop < 3)
|
||||||
|
add_thumbnail_to_queue(img, ++loop); // Retry 3 times
|
||||||
|
img.attr('src', {/literal}"{$ROOT_URL}{$themeconf.icon_dir}/errors_small.png"{literal});
|
||||||
|
jQuery('.loader').hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function pwg_ajax_thumbnails_loader() {
|
||||||
|
jQuery('img[data-src]').each(function() {
|
||||||
|
add_thumbnail_to_queue(jQuery(this), 0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
jQuery(document).ready(pwg_ajax_thumbnails_loader);
|
||||||
|
{/literal}{/footer_script}
|
||||||
|
{assign var=js_loaded value=true}
|
||||||
{/if}
|
{/if}
|
||||||
<li>
|
<li>
|
||||||
<span class="wrap1">
|
<span class="wrap1">
|
||||||
<span class="wrap2">
|
<span class="wrap2">
|
||||||
<a href="{$thumbnail.URL}">
|
<a href="{$thumbnail.URL}">
|
||||||
<img class="thumbnail" {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.img_dir}/ajax-loader-small.gif" data-src="{$derivative->get_url()}"{/if} alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}">
|
<img class="thumbnail" {if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.icon_dir}/img_small.png" data-src="{$derivative->get_url()}"{/if} alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}">
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
{if $SHOW_THUMBNAIL_CAPTION }
|
{if $SHOW_THUMBNAIL_CAPTION }
|
||||||
|
|
|
@ -3,6 +3,7 @@ $themeconf = array(
|
||||||
'name' => 'default',
|
'name' => 'default',
|
||||||
'icon_dir' => 'themes/default/icon',
|
'icon_dir' => 'themes/default/icon',
|
||||||
'img_dir' => 'themes/default/images',
|
'img_dir' => 'themes/default/images',
|
||||||
|
'loading_img' => 'themes/default/images/359_s.png',
|
||||||
'mime_icon_dir' => 'themes/default/icon/mimetypes/',
|
'mime_icon_dir' => 'themes/default/icon/mimetypes/',
|
||||||
'local_head' => 'local_head.tpl',
|
'local_head' => 'local_head.tpl',
|
||||||
);
|
);
|
||||||
|
|
Loading…
Add table
Reference in a new issue