Jump to content

Community

Lazy Load side bar widgets


sobrenome
 Share

Recommended Posts

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 by Adlago
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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}}

 

Link to comment
Share on other sites

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/

1248307934_LoadMore.thumb.jpg.4b66ca3bbc2a30ae7b84aa531aa272e5.jpg

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.

Link to comment
Share on other sites

  • 10 months later...
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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy