add loagin="lazy" to avatar-images too

resolves #13486

The loading of avatar-images still blocked the loading of notifications.

mostyl in frio!
now it's a big time improvement on loading friendica

diff --git a/view/templates/notifications/nav/notify.tpl b/view/templates/notifications/nav/notify.tpl
index dfcf9d3346a360423f7533fa4eae810d3974829e..37da980ab90f7a128499313072bc620598791d93 100644 (file)
--- a/view/templates/notifications/nav/notify.tpl
+++ b/view/templates/notifications/nav/notify.tpl
@@ -1,3 +1,3 @@
 <li class="notification-{{if !$notify.seen}}un{{/if}}seen">
-       <a href="{{$notify.href}}" title="{{$notify.localdate}}"><img data-src="{{$notify.contact.photo}}" height="24" width="24" alt="" />{{$notify.richtext nofilter}} <span class="notif-when">{{$notify.ago}}</span></a>
+       <a href="{{$notify.href}}" title="{{$notify.localdate}}"><img data-src="{{$notify.contact.photo}}" height="24" width="24" alt="" loading="lazy"/>{{$notify.richtext nofilter}} <span class="notif-when">{{$notify.ago}}</span></a>
 </li>

diff --git a/view/theme/frio/templates/contact/entry.tpl b/view/theme/frio/templates/contact/entry.tpl
index 75f0d6d9e55b9b7081147d2e2da5d59293407c40..442a3b6ea585de030d5827c05f784ad73b204f9e 100644 (file)
--- a/view/theme/frio/templates/contact/entry.tpl
+++ b/view/theme/frio/templates/contact/entry.tpl
@@ -7,7 +7,7 @@
 
                                <div class="contact-photo-image-wrapper hidden-xs">
                                        <a href="{{if !empty($contact.photo_menu.edit)}}{{$contact.photo_menu.edit.1}}{{else}}{{$contact.url}}{{/if}}">
-                                               <img class="contact-photo media-object xl" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
+                                               <img class="contact-photo media-object xl" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" loading="lazy"/>
                                        </a>
                                </div>
 
@@ -15,7 +15,7 @@
                                <button type="button" class="btn btn-default dropdown-toggle visible-xs" id="contact-photo-menu-button-{{$contact.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        {{* use a smaller picture on very small displays (e.g. mobiles) *}}
                                        <div class="contact-photo-image-wrapper visible-xs">
-                                               <img class="contact-photo-xs media-object" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
+                                               <img class="contact-photo-xs media-object" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}"  loading="lazy"/>
 
                                                {{* Overlay background on hover the avatar picture *}}
                                                <div class="contact-photo-overlay">

diff --git a/view/theme/frio/templates/notifications/nav/notify.tpl b/view/theme/frio/templates/notifications/nav/notify.tpl
index ab1743d1b9a2247b473332290e0d3b95f4b14589..113cb33573ae3d71fba3d63b57c385be189a3af1 100644 (file)
--- a/view/theme/frio/templates/notifications/nav/notify.tpl
+++ b/view/theme/frio/templates/notifications/nav/notify.tpl
@@ -1,7 +1,7 @@
 <li class="notification-{{if !$notify.seen}}un{{/if}}seen notif-entry">
        <div class="notif-entry-wrapper media">
                <div class="notif-photo-wrapper media-object pull-left" aria-hidden="true">
-                       <a href="{{$notify.contact.url}}" class="userinfo click-card" tabIndex="-1"><img data-src="{{$notify.contact.photo}}" alt=""></a>
+                       <a href="{{$notify.contact.url}}" class="userinfo click-card" tabIndex="-1"><img data-src="{{$notify.contact.photo}}" alt="" loading="lazy"></a>
                </div>
                <a href="{{$notify.href}}" class="notif-desc-wrapper media-body">
             {{$notify.richtext nofilter}}

diff --git a/view/theme/frio/templates/search_item.tpl b/view/theme/frio/templates/search_item.tpl
index bdc2ca38401a41f8913b4279a9989087659bf7eb..ba396fbfd9a3b27b37667ceb89f8f6ad6098dbd5 100644 (file)
--- a/view/theme/frio/templates/search_item.tpl
+++ b/view/theme/frio/templates/search_item.tpl
@@ -12,14 +12,14 @@
                                <div class="hidden-sm hidden-xs contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
                                        <a href="{{$item.profile_url}}" class="userinfo click-card u-url" id="wall-item-photo-menu-{{$item.id}}">
                                                <div class="contact-photo-image-wrapper">
-                                                       <img src="{{$item.thumb}}" class="contact-photo media-object {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
+                                                       <img src="{{$item.thumb}}" class="contact-photo media-object {{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" loading="lazy"/>
                                                </div>
                                        </a>
                                </div>
                                <div class="hidden-lg hidden-md contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
                                        <a href="{{$item.profile_url}}" class="userinfo click-card u-url" id="wall-item-photo-menu-xs-{{$item.id}}">
                                                <div class="contact-photo-image-wrapper">
-                                                       <img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}}" id="wall-item-photo-xs-{{$item.id}}" alt="{{$item.name}}" />
+                                                       <img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}}" id="wall-item-photo-xs-{{$item.id}}" alt="{{$item.name}}" loading="lazy"/>
                                                </div>
                                        </a>
                                </div>

diff --git a/view/theme/frio/templates/wall_thread.tpl b/view/theme/frio/templates/wall_thread.tpl
index 8c227eb13f79cc83f42b3f98b341608881df39a0..b3ade5fe04991341ae4ec8527f7d82f5236e893d 100644 (file)
--- a/view/theme/frio/templates/wall_thread.tpl
+++ b/view/theme/frio/templates/wall_thread.tpl
@@ -68,14 +68,14 @@ as the value of $top_child_total (this is done at the end of this file)
                        <div class="hidden-sm hidden-xs contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}} p-author h-card">
                                <a class="userinfo click-card u-url" id="wall-item-photo-menu-{{$item.id}}" href="{{$item.profile_url}}">
                                        <div class="contact-photo-image-wrapper">
-                                               <img src="{{$item.thumb}}" class="contact-photo media-object {{$item.sparkle}} p-name u-photo" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
+                                               <img src="{{$item.thumb}}" class="contact-photo media-object {{$item.sparkle}} p-name u-photo" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}"  loading="lazy"/>
                                        </div>
                                </a>
                        </div>
                        <div class="hidden-lg hidden-md contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
                                <a class="userinfo click-card u-url" id="wall-item-photo-menu-xs-{{$item.id}}" href="{{$item.profile_url}}">
                                        <div class="contact-photo-image-wrapper">
-                                               <img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}}" id="wall-item-photo-xs-{{$item.id}}" alt="{{$item.name}}" />
+                                               <img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}}" id="wall-item-photo-xs-{{$item.id}}" alt="{{$item.name}}"  loading="lazy"/>
                                        </div>
                                </a>
                        </div>
@@ -96,7 +96,7 @@ as the value of $top_child_total (this is done at the end of this file)
                        <div class="contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}} p-author h-card">
                                <a class="userinfo click-card u-url" id="wall-item-photo-menu-{{$item.id}}" href="{{$item.profile_url}}">
                                        <div class="contact-photo-image-wrapper">
-                                               <img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}} p-name u-photo" id="wall-item-photo-comment-{{$item.id}}" alt="{{$item.name}}" />
+                                               <img src="{{$item.thumb}}" class="contact-photo-xs media-object {{$item.sparkle}} p-name u-photo" id="wall-item-photo-comment-{{$item.id}}" alt="{{$item.name}}"  loading="lazy"/>
                                        </div>
                                </a>
                        </div>

diff --git a/view/theme/vier/templates/notifications/nav/notify.tpl b/view/theme/vier/templates/notifications/nav/notify.tpl
index 3067d5b0c8ba3a5b17a20a495b92e916c0be53ec..2c716bd2295d61b283b27c9ed8924c2142d6bf1c 100644 (file)
--- a/view/theme/vier/templates/notifications/nav/notify.tpl
+++ b/view/theme/vier/templates/notifications/nav/notify.tpl
@@ -1,6 +1,6 @@
 <li class="notification-{{if !$notify.seen}}un{{/if}}seen" onclick="location.href='{{$notify.href}}';">
        <div class="notif-entry-wrapper">
-               <div class="notif-photo-wrapper"><a href="{{$notify.contact.url}}"><img data-src="{{$notify.contact.photo}}"></a></div>
+               <div class="notif-photo-wrapper"><a href="{{$notify.contact.url}}"><img data-src="{{$notify.contact.photo}}" loading="lazy"></a></div>
                <div class="notif-desc-wrapper">
             {{$notify.richtext nofilter}}
                        <div><time class="notif-when" title="{{$notify.localdate}}">{{$notify.ago}}</time></div>