defer members images loading

ot_templating/Resources/Private/Partials/Modern/MembersList.html

@@ -12,7 +12,9 @@
                         <p class="ot-member-image">
                             <f:if condition="{member.image}">
                                 <f:then>
-                                    <img src="{member.image}/160x0" alt=""/>
+                                    <f:image class="defer"
+                                             data="{'src':'{member.image}/160x0'}"
+                                             src="EXT:ot_templating/Resources/Public/media/loading.png"/>
                                 </f:then>
                                 <f:else if="{member.gender}=='MISTER'">
                                     <f:image class="default" src="EXT:ot_templating/Resources/Public/media/man-default.jpg"/>

ot_templating/Resources/Public/assets/Modern/script/custom-ot.js

@@ -114,3 +114,12 @@ $(document).ready(function(){
 });
 
 
+/*============================
+    Defer img loading
+============================*/
+
+$(window).bind("load", function() {
+	$('img.defer').each(function() {
+		$(this).attr("src", $(this).data('src'));
+	});
+});