Test for delaying the loading of event agenda images.

Load the image when the event is clicked on.

diff --git a/js/front.js b/js/front.js
index 9fd63da..db65778 100644 (file)
--- a/js/front.js
+++ b/js/front.js
@@ -13,6 +13,15 @@ var EventFront = {
         jQuery(".glm-event-day-row").find(".glm-event-day-event").click(function(){
             jQuery(this).find('.event-content').slideToggle('slow');
             jQuery(this).toggleClass('open');
+            // See if there's a img with only a data-src
+            jQuery(this).find('.event-content').find('img').each(function(){
+                var imgData = $(this).data('src');
+                var imgSrc  = $(this).attr('src');
+                if ( imgData && imgSrc == undefined ) {
+                    $(this).prop('src', imgData);
+                    $(this).removeData('src');
+                }
+            });
         });
         jQuery(".glm-read-more").click(function(){
             this.preventDefault();

diff --git a/views/front/events/agenda.html b/views/front/events/agenda.html
index dffba54..d640f76 100644 (file)
--- a/views/front/events/agenda.html
+++ b/views/front/events/agenda.html
@@ -2,7 +2,7 @@
     <div class="row">
         {include file='front/events/searchForm.html'}
     </div>
-    
+
     <div id="glm-event-agenda-view" class="row">
         <div class="small-12 columns">
             {foreach $eventsByDate as $date => $key}
@@ -42,7 +42,7 @@
                                                         {if $rec.name && $rec.name != 'Imported' && $rec.name != 'Imported Event Schedule' }
                                                             {$rec.name}
                                                         {/if}
-                                                        ( {if $event.times|@count > 1} Occurring {/if} 
+                                                        ( {if $event.times|@count > 1} Occurring {/if}
                                                         {$rec.from_date.date} <span class="agenda-event-recur-dates">
                                                           {if $rec.from_date.date != $rec.to_date.date}
                                                             - {$rec.to_date.date}
@@ -79,7 +79,7 @@
                                         {/if}
                                     </div>
                                     <div class="event-content glm-hide clearfix">
-                                        {if $event.image}<img style="float:right;" src="{$imgUrl}{$event.image}">{/if}
+                                        {if $event.image}<img style="float:right;" data-src="{$imgUrl}{$event.image}">{/if}
                                         {$event.intro}
                                         <div>
                                             <a class="glm-read-more" href="{$siteBaseUrl}{$pageSlug}/{if !$customPage}{$event.name_slug}/{else}?eventId={$event.id}{/if}">Read More</a>
@@ -146,7 +146,7 @@
         var custom_page         = '{$customPage}';
         var page_slug           = '{$pageSlug}';
         var retain_date;
-        
+
         if(!member_id){
             member_id = null;
         }
@@ -157,7 +157,7 @@
             var retain_date;
             var calCurrDate = $('#eventCalendar').fullCalendar('getView').start;
             var d = moment(calCurrDate).add(7, 'days').format('YYYY-MM-01');
-            
+
             return retain_date = d;
         }
         function in_mobile(){
@@ -167,7 +167,7 @@
                 return false;
             }
         }
-        
+
         $('#glm-event-from').on("change", function(){
             var from_date = $(this).val();
             $('#glm-event-to').val(from_date);
@@ -179,12 +179,12 @@
         event_search.on('click', function(){
             sessionStorage.override = 'yes';
         });
-        
+
         if( sessionStorage.view && sessionStorage.override === 'no' && !in_mobile()){
             view = sessionStorage.view;
         } else if( sessionStorage.override === 'yes' || in_mobile()){
             view = 'agenda';
-        } 
+        }
 
         // AJAX FUNCTION ************************************************
         // Get calendar month via AJAX
@@ -263,16 +263,16 @@
             handleWindowResize: true,
             lazyFetching: true,
             eventClick : function (event){
-                
+
                 sessionStorage.current_calendar_view = get_current_view();
-            
-            
+
+
                 if(custom_page !== ''){
                     location.href = event.url + '&glm_event_from=' + event.start.format();
                 } else {
                     location.href = event.url + '?glm_event_from=' + event.start.format();
                 }
-                
+
                 return false;
             },
             eventLimit: true,
@@ -315,7 +315,7 @@
             }
         });
         $(window).on("load", function(){
-            
+
             if(sessionStorage.current_calendar_view){
                 $('#event-date-toggle option').each(function(){
                     if( $(this).val() === sessionStorage.current_calendar_view){
@@ -325,10 +325,10 @@
             }
 
             $('#event-date-toggle-container').insertAfter( $('.fc-left')).fadeTo('slow', 1);
-            
+
             $('#event-date-toggle').on("change", function(){
                 var selected_date = $(this).val();
-            
+
                 $('#eventCalendar').fullCalendar('gotoDate', selected_date);
                  eventsCalMonthAJAX(month_obj);
                  if(sessionStorage.current_calendar_view){
@@ -345,7 +345,7 @@
             if(sessionStorage.current_calendar_view){
                 sessionStorage.current_calendar_view = '';
             }
-        
+
             eventsCalMonthAJAX(month_obj);
         });
 
@@ -358,7 +358,7 @@
                 }
             });
        });
-       
+
         var dates = $(".agenda-event-recur-dates");
         dates.each( function (){
            if( $(this).text().indexOf('-') < 0 ){