Changeset 20161


Ignore:
Timestamp:
Jan 15, 2013, 12:15:34 AM (11 years ago)
Author:
flop25
Message:

bug:2820 & bug:2684
add $confmaxRequests
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.

Location:
trunk
Files:
3 added
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/include/category_cats.inc.php

    r19703 r20161  
    388388  $tpl_thumbnails_var_selection = trigger_event('loc_end_index_category_thumbnails', $tpl_thumbnails_var_selection);
    389389  $template->assign( array(
     390    'maxRequests' =>$conf['maxRequests'],
    390391    'category_thumbnails' => $tpl_thumbnails_var_selection,
    391392    'derivative_params' => $derivative_params,
  • trunk/include/category_default.inc.php

    r19703 r20161  
    154154$template->assign( array(
    155155  'derivative_params' => trigger_event('get_index_derivative_params', ImageStdParams::get_by_type( pwg_get_session_var('index_deriv', IMG_THUMB) ) ),
     156  'maxRequests' =>$conf['maxRequests'],
    156157  'SHOW_THUMBNAIL_CAPTION' =>$conf['show_thumbnail_caption'],
    157158    ) );
  • trunk/include/config_default.inc.php

    r19703 r20161  
    770770// 'small', 'medium' or 'large'
    771771$conf['derivative_default_size'] = 'medium';
     772
     773//Maximum Ajax requests at once, for thumbnails on-the-fly generation
     774$conf['maxRequests']=3;
    772775?>
  • trunk/themes/default/template/index.tpl

    r19302 r20161  
    172172
    173173{if !empty($THUMBNAILS)}
     174<div class="loader" style="display: none; position: fixed; right: 0;bottom: 0;"><img src="{$ROOT_URL}{$themeconf.img_dir}/ajax_loader.gif"></div>
    174175<ul class="thumbnails" id="thumbnails">
    175 {$THUMBNAILS}
     176  {$THUMBNAILS}
    176177</ul>
    177178{/if}
  • trunk/themes/default/template/mainpage_categories.tpl

    r16801 r20161  
    88}
    99{/html_style}{/strip}
     10<div class="loader" style="display: none; position: fixed; right: 0;bottom: 0;"><img src="{$ROOT_URL}{$themeconf.img_dir}/ajax_loader.gif"></div>
    1011<ul class="thumbnailCategories">
    1112{foreach from=$category_thumbnails item=cat name=cat_loop}
    1213{assign var=derivative value=$pwg->derivative($derivative_params, $cat.representative.src_image)}
    13 {if !$derivative->is_cached()}
     14{if !$derivative->is_cached() and !$js_loaded}
    1415{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'}
    15 {combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'}
     16{*combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'*}
     17{footer_script}{literal}
     18var thumbnails_queue = jQuery.manageAjax.create('queued', {
     19  queue: true, 
     20  cacheResponse: false,
     21  maxRequests: {/literal}{$maxRequests}{literal},
     22  preventDoubleRequests: false
     23});
     24
     25function add_thumbnail_to_queue(img, loop) {
     26  thumbnails_queue.add({
     27    type: 'GET',
     28    url: img.data('src'),
     29    data: { ajaxload: 'true' },
     30    dataType: 'json',
     31    beforeSend: function(){jQuery('.loader').show()},
     32    success: function(result) {
     33      img.attr('src', result.url);
     34      jQuery('.loader').hide();
     35    },
     36    error: function() {
     37      if (loop < 3)
     38        add_thumbnail_to_queue(img, ++loop); // Retry 3 times
     39      img.attr('src', {/literal}"{$ROOT_URL}{$themeconf.icon_dir}/errors_small.png"{literal});
     40      jQuery('.loader').hide();
     41    }
     42  });
     43}
     44
     45function pwg_ajax_thumbnails_loader() {
     46  jQuery('img[data-src]').each(function() {
     47    add_thumbnail_to_queue(jQuery(this), 0);
     48  });
     49}
     50jQuery(document).ready(pwg_ajax_thumbnails_loader);
     51{/literal}{/footer_script}
     52{assign var=js_loaded value=true}
    1653{/if}
    17         <li class="{if $smarty.foreach.cat_loop.index is odd}odd{else}even{/if}">
     54  <li class="{if $smarty.foreach.cat_loop.index is odd}odd{else}even{/if}">
    1855                <div class="thumbnailCategory">
    1956                        <div class="illustration">
    2057                        <a href="{$cat.URL}">
    21                                 <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}">
     58                                <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}">
    2259                        </a>
    2360                        </div>
  • trunk/themes/default/template/thumbnails.tpl

    r16522 r20161  
    2424{foreach from=$thumbnails item=thumbnail}
    2525{assign var=derivative value=$pwg->derivative($derivative_params, $thumbnail.src_image)}
    26 {if !$derivative->is_cached()}
     26{if !$derivative->is_cached() and !$js_loaded}
    2727{combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'}
    28 {combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'}
     28{*combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'*}
     29{footer_script}{literal}
     30var thumbnails_queue = jQuery.manageAjax.create('queued', {
     31  queue: true, 
     32  cacheResponse: false,
     33  maxRequests: {/literal}{$maxRequests}{literal},
     34  preventDoubleRequests: false
     35});
     36
     37function add_thumbnail_to_queue(img, loop) {
     38  thumbnails_queue.add({
     39    type: 'GET',
     40    url: img.data('src'),
     41    data: { ajaxload: 'true' },
     42    dataType: 'json',
     43    beforeSend: function(){jQuery('.loader').show()},
     44    success: function(result) {
     45      img.attr('src', result.url);
     46      jQuery('.loader').hide();
     47    },
     48    error: function() {
     49      if (loop < 3)
     50        add_thumbnail_to_queue(img, ++loop); // Retry 3 times
     51      img.attr('src', {/literal}"{$ROOT_URL}{$themeconf.icon_dir}/errors_small.png"{literal});
     52      jQuery('.loader').hide();
     53    }
     54  });
     55}
     56
     57function pwg_ajax_thumbnails_loader() {
     58  jQuery('img[data-src]').each(function() {
     59    add_thumbnail_to_queue(jQuery(this), 0);
     60  });
     61}
     62jQuery(document).ready(pwg_ajax_thumbnails_loader);
     63{/literal}{/footer_script}
     64{assign var=js_loaded value=true}
    2965{/if}
    3066<li>
     
    3268                <span class="wrap2">
    3369                <a href="{$thumbnail.URL}">
    34                         <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}">
     70                        <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}">
    3571                </a>
    3672                </span>
  • trunk/themes/default/themeconf.inc.php

    r16502 r20161  
    44  'icon_dir'      => 'themes/default/icon',
    55  'img_dir'      => 'themes/default/images',
     6  'loading_img'      => 'themes/default/images/359_s.png',
    67  'mime_icon_dir' => 'themes/default/icon/mimetypes/',
    78  'local_head'    => 'local_head.tpl',
Note: See TracChangeset for help on using the changeset viewer.