Lazy Load side bar widgets

[sobrenome]

Why lazy load is not used by the side bar widgets for profile pictures?

[Adlago]

On 7/22/2019 at 12:23 AM, sobrenome said:

Why lazy load is not used by the side bar widgets for profile pictures?

Why lazy load is missing I have no answer, but if you want to speed up your site, I suggest you 'onload' loading avatars images.

Please see the edit below. I'm sorry for the inconvenience.

 

Edited July 23, 2019 by Adlago

[Fast Lane!]

11 hours ago, Adlago said:

Why lazy load is missing I have no answer, but if you want to speed up your site, I suggest you 'onload' loading avatars images.

You can do this by following the instructions:
1. Create a blank template name 'onload_av' in a group of 'analysis' as I already showed you in other topic.
2. Place this script on this template, and Save.

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('dota-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('dota-src'));
} } }
window.onload = setTimeout(init,100);
</script>

3. Open template core_front/userPhoto and replace the entire code with

{template="onload_av" app="core" location="global" group="analysis" params=""}
{{if $member->member_id and \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'members' ) )}}
{{$memberURL = ( $warningRef ) ? $member->url()->setQueryString( 'wr', $warningRef ) : $member->url();}}
	<a href="{$memberURL}" {{if $hovercard}}data-ipsHover data-ipsHover-target="{$memberURL->setQueryString( 'do', 'hovercard' )}"{{endif}} class="ipsUserPhoto ipsUserPhoto_{$size}{{if $classes}} {$classes}{{endif}}" title="{lang="view_user_profile" sprintf="$member->name"}">
		<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" dota-src='{$member->photo}' alt='{$member->name}'>
	</a>
{{else}}
	<span class='ipsUserPhoto ipsUserPhoto_{$size} {{if $classes}}{$classes}{{endif}}'>
		<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" dota-src='{$member->photo}' alt='{$member->name}'>
	</span>
{{endif}}

PS. 'dota-src' is not a typing error - this is another argument to avoid a possible 'data-src' conflict, that is used in IPS scripts.

That's it - did a test.
You have the option to change the delay time by changing the value of 100 in script (that is, milliseconds delay) for a longer time, eg 1000 or other, as it will work best for you)

How significant is this change?

[newbie LAC]

12 hours ago, Adlago said:

3. Open template core_front/userPhoto and replace the entire code with

{template="onload_av" app="core" location="global" group="analysis" params=""}

e.g. 40 photos on the page and 40 similar js-scripts

[Adlago]

3 hours ago, newbie LAC said:

e.g. 40 photos on the page and 40 similar js-scripts

Yes, you are right. I reviewed everything again and there is no issue with new version which is below. Including. I go back to data-src because the validator html5 finds an error in the argument dota-src.

1. Create a blank template name 'onload_av' in a group of 'analysis' as I already showed you in other topic.
2. Place this script on this template, and Save.

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

3. Open globalTemplate and place bottom after

{template="includeJS" if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""}

this

{template="onload_av" app="core" location="global" group="analysis" params=""}

4. Open template core_front/userPhoto and replace the entire code with

{{if $member->member_id and \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'members' ) )}}
{{$memberURL = ( $warningRef ) ? $member->url()->setQueryString( 'wr', $warningRef ) : $member->url();}}
	<a href="{$memberURL}" {{if $hovercard}}data-ipsHover data-ipsHover-target="{$memberURL->setQueryString( 'do', 'hovercard' )}"{{endif}} class="ipsUserPhoto ipsUserPhoto_{$size}{{if $classes}} {$classes}{{endif}}" title="{lang="view_user_profile" sprintf="$member->name"}">
		<img src='{expression="\IPS\Text\Parser::blankImage()"}' data-src='{$member->photo}' alt='{$member->name}'>
	</a>
{{else}}
	<span class='ipsUserPhoto ipsUserPhoto_{$size} {{if $classes}}{$classes}{{endif}}'>
		<img src='{expression="\IPS\Text\Parser::blankImage()"}' data-src='{$member->photo}' alt='{$member->name}'>
	</span>
{{endif}}

 

[Sovereign Grace Singles]

Is anyone else running into problems where avatars won't load in the Activity stream after hitting "Load More Activity"? The new threads that show don't load the avatars. https://www.christforums.com/discover/

Edited July 25, 2019 by Christforums

[Adlago]

4 hours ago, Christforums said:

Is anyone else running into problems where avatars won't load in the Activity stream after hitting "Load More Activity"? The new threads that show don't load the avatars. https://www.christforums.com/discover/

In this case, the "userPhoto" is loaded through a template

core_front_system/searchResult

and probably has no connection to the this JS in a global template.
PS. In your forum this is already fixed.

[sobrenome]

Is it possible to lazy load the whole widget itself? Lazy load side bar widgets, lazy load related topics?

[Adlago]

46 minutes ago, sobrenome said:

Is it possible to lazy load the whole widget itself? Lazy load side bar widgets, lazy load related topics?

Usually the widgets themselves do not delay loading a site. Delays cause images in these widgets, as well as avatars.

[sobrenome]

4 hours ago, Adlago said:

Usually the widgets themselves do not delay loading a site. Delays cause images in these widgets, as well as avatars.

Nowadays every byte matters for mobile!

[Adlago]

8 hours ago, sobrenome said:

Nowadays every byte matters for mobile!

If you use the image deferral method described above, then the script I use has a new version. In this new version there is a possibility to set different time for delayed loading images - for mobile and desktop.
From many tests I have found that for desktop enough time to delay images is in the range of 100 - 600 milliseconds, while for mobile this interval is from 1500 to 3000 milliseconds. Of course, these times depend on the amount of images used on each site. Ie Using the above-described changes in image loading codes and a new script, you can adjust the image delay time for mobile and desktop to achieve the optimally good result.
If you are interested, send me a PM and I will give you this script as a gift.
Of course this is just for you.