Merge pull request #13495 from xundeenergie/load-contact-photos-lazy
Load contact photos lazy
This commit is contained in:
commit
ec61cdac83
|
@ -1,3 +1,3 @@
|
||||||
<li class="notification-{{if !$notify.seen}}un{{/if}}seen">
|
<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>
|
</li>
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
<div class="contact-photo-image-wrapper hidden-xs">
|
<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}}">
|
<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>
|
</a>
|
||||||
</div>
|
</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">
|
<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) *}}
|
{{* use a smaller picture on very small displays (e.g. mobiles) *}}
|
||||||
<div class="contact-photo-image-wrapper visible-xs">
|
<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 *}}
|
{{* Overlay background on hover the avatar picture *}}
|
||||||
<div class="contact-photo-overlay">
|
<div class="contact-photo-overlay">
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<li class="notification-{{if !$notify.seen}}un{{/if}}seen notif-entry">
|
<li class="notification-{{if !$notify.seen}}un{{/if}}seen notif-entry">
|
||||||
<div class="notif-entry-wrapper media">
|
<div class="notif-entry-wrapper media">
|
||||||
<div class="notif-photo-wrapper media-object pull-left" aria-hidden="true">
|
<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>
|
</div>
|
||||||
<a href="{{$notify.href}}" class="notif-desc-wrapper media-body">
|
<a href="{{$notify.href}}" class="notif-desc-wrapper media-body">
|
||||||
{{$notify.richtext nofilter}}
|
{{$notify.richtext nofilter}}
|
||||||
|
|
|
@ -12,14 +12,14 @@
|
||||||
<div class="hidden-sm hidden-xs contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
<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}}">
|
<a href="{{$item.profile_url}}" class="userinfo click-card u-url" id="wall-item-photo-menu-{{$item.id}}">
|
||||||
<div class="contact-photo-image-wrapper">
|
<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>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="hidden-lg hidden-md contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
<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}}">
|
<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">
|
<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>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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">
|
<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}}">
|
<a class="userinfo click-card u-url" id="wall-item-photo-menu-{{$item.id}}" href="{{$item.profile_url}}">
|
||||||
<div class="contact-photo-image-wrapper">
|
<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>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="hidden-lg hidden-md contact-photo-wrapper mframe{{if $item.owner_url}} wwfrom{{/if}}">
|
<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}}">
|
<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">
|
<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>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</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">
|
<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}}">
|
<a class="userinfo click-card u-url" id="wall-item-photo-menu-{{$item.id}}" href="{{$item.profile_url}}">
|
||||||
<div class="contact-photo-image-wrapper">
|
<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>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
onmouseout="t{{$contact.id}}=setTimeout('closeMenu(\'contact-photo-menu-button-{{$contact.id}}\'); closeMenu(\'contact-photo-menu-{{$contact.id}}\');',200)"> -->
|
onmouseout="t{{$contact.id}}=setTimeout('closeMenu(\'contact-photo-menu-button-{{$contact.id}}\'); closeMenu(\'contact-photo-menu-{{$contact.id}}\');',200)"> -->
|
||||||
|
|
||||||
<!-- <a href="{{$contact.url}}" title="{{$contact.img_hover}}" /></a> -->
|
<!-- <a href="{{$contact.url}}" title="{{$contact.img_hover}}" /></a> -->
|
||||||
<img src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
|
<img src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" loading="lazy"/>
|
||||||
|
|
||||||
{{if $multiselect}}
|
{{if $multiselect}}
|
||||||
<input type="checkbox" class="contact-select" name="contact_batch[]" value="{{$contact.id}}">
|
<input type="checkbox" class="contact-select" name="contact_batch[]" value="{{$contact.id}}">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<li class="notification-{{if !$notify.seen}}un{{/if}}seen" onclick="location.href='{{$notify.href}}';">
|
<li class="notification-{{if !$notify.seen}}un{{/if}}seen" onclick="location.href='{{$notify.href}}';">
|
||||||
<div class="notif-entry-wrapper">
|
<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">
|
<div class="notif-desc-wrapper">
|
||||||
{{$notify.richtext nofilter}}
|
{{$notify.richtext nofilter}}
|
||||||
<div><time class="notif-when" title="{{$notify.localdate}}">{{$notify.ago}}</time></div>
|
<div><time class="notif-when" title="{{$notify.localdate}}">{{$notify.ago}}</time></div>
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
<!-- onmouseover="if (typeof t{{$item.id}} != 'undefined') clearTimeout(t{{$item.id}}); openMenu('wall-item-photo-menu-button-{{$item.id}}')"
|
<!-- onmouseover="if (typeof t{{$item.id}} != 'undefined') clearTimeout(t{{$item.id}}); openMenu('wall-item-photo-menu-button-{{$item.id}}')"
|
||||||
onmouseout="t{{$item.id}}=setTimeout('closeMenu(\'wall-item-photo-menu-button-{{$item.id}}\'); closeMenu(\'wall-item-photo-menu-{{$item.id}}\');',200)"> -->
|
onmouseout="t{{$item.id}}=setTimeout('closeMenu(\'wall-item-photo-menu-button-{{$item.id}}\'); closeMenu(\'wall-item-photo-menu-{{$item.id}}\');',200)"> -->
|
||||||
<!-- <a href="{{$item.profile_url}}" target="redir" title="{{$item.linktitle}}" class="wall-item-photo-link" id="wall-item-photo-link-{{$item.id}}"></a> -->
|
<!-- <a href="{{$item.profile_url}}" target="redir" title="{{$item.linktitle}}" class="wall-item-photo-link" id="wall-item-photo-link-{{$item.id}}"></a> -->
|
||||||
<img src="{{$item.thumb}}" class="contact-photo{{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" />
|
<img src="{{$item.thumb}}" class="contact-photo{{$item.sparkle}}" id="wall-item-photo-{{$item.id}}" alt="{{$item.name}}" loading="lazy"/>
|
||||||
<!-- <a rel="#wall-item-photo-menu-{{$item.id}}" class="contact-photo-menu-button icon s16 menu" id="wall-item-photo-menu-button-{{$item.id}}">menu</a> -->
|
<!-- <a rel="#wall-item-photo-menu-{{$item.id}}" class="contact-photo-menu-button icon s16 menu" id="wall-item-photo-menu-button-{{$item.id}}">menu</a> -->
|
||||||
<ul role="menu" aria-haspopup="true" class="wall-item-menu menu-popup" id="wall-item-photo-menu-{{$item.id}}">
|
<ul role="menu" aria-haspopup="true" class="wall-item-menu menu-popup" id="wall-item-photo-menu-{{$item.id}}">
|
||||||
{{$item.item_photo_menu_html nofilter}}
|
{{$item.item_photo_menu_html nofilter}}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user