aboutsummaryrefslogtreecommitdiffstats
path: root/themes/default/template
diff options
context:
space:
mode:
authorflop25 <flop25@piwigo.org>2013-01-14 23:15:34 +0000
committerflop25 <flop25@piwigo.org>2013-01-14 23:15:34 +0000
commita6f55ac0381a81c6abf79bb2ed8617b6d50ed2aa (patch)
tree491cf9c9b254fde48fd4ce97e1819bbc61833a29 /themes/default/template
parent0b702326567d90e796caac72c7d7a5449037b1b6 (diff)
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
Diffstat (limited to '')
-rw-r--r--themes/default/template/index.tpl3
-rw-r--r--themes/default/template/mainpage_categories.tpl45
-rw-r--r--themes/default/template/thumbnails.tpl42
3 files changed, 82 insertions, 8 deletions
diff --git a/themes/default/template/index.tpl b/themes/default/template/index.tpl
index aa92a215f..e6874567e 100644
--- a/themes/default/template/index.tpl
+++ b/themes/default/template/index.tpl
@@ -171,8 +171,9 @@ jQuery("#derivativeSwitchBox").on("mouseleave", function() {
{/if}
{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">
-{$THUMBNAILS}
+ {$THUMBNAILS}
</ul>
{/if}
{if !empty($thumb_navbar)}
diff --git a/themes/default/template/mainpage_categories.tpl b/themes/default/template/mainpage_categories.tpl
index 81bb82d75..8657b921b 100644
--- a/themes/default/template/mainpage_categories.tpl
+++ b/themes/default/template/mainpage_categories.tpl
@@ -7,18 +7,55 @@
height: {$derivative_params->max_height()+5}px;
}
{/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">
{foreach from=$category_thumbnails item=cat name=cat_loop}
{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='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}
- <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="illustration">
<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>
</div>
<div class="description">
diff --git a/themes/default/template/thumbnails.tpl b/themes/default/template/thumbnails.tpl
index 9121aed60..efb9fba65 100644
--- a/themes/default/template/thumbnails.tpl
+++ b/themes/default/template/thumbnails.tpl
@@ -23,15 +23,51 @@
{/html_style}
{foreach from=$thumbnails item=thumbnail}
{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='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}
<li>
<span class="wrap1">
<span class="wrap2">
<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>
</span>
{if $SHOW_THUMBNAIL_CAPTION }