diff options
| author | flop25 <flop25@piwigo.org> | 2013-01-14 23:15:34 +0000 |
|---|---|---|
| committer | flop25 <flop25@piwigo.org> | 2013-01-14 23:15:34 +0000 |
| commit | a6f55ac0381a81c6abf79bb2ed8617b6d50ed2aa (patch) | |
| tree | 491cf9c9b254fde48fd4ce97e1819bbc61833a29 /themes/default/template/mainpage_categories.tpl | |
| parent | 0b702326567d90e796caac72c7d7a5449037b1b6 (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 'themes/default/template/mainpage_categories.tpl')
| -rw-r--r-- | themes/default/template/mainpage_categories.tpl | 45 |
1 files changed, 41 insertions, 4 deletions
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"> |