Defer offscreen images

[Nophelet]

This is an easy way to load images after time onload.

1. Open template -> core_global_global_includeJS

2. Add this script at the bottom

<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 = init;
</script>

3. For your images which you want loads after that time onload, change to a template code img src.

If your code is type for example

<img src = "{code ips images}" alt="">

change the code so

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" dota-src="{code ips images}" alt="">

4. For articles image, find code in template

<div class="cCmsRecord_image">
				<a href="{$record->url()}" title="{lang="read_more_about" sprintf="$record->_title"}"><img class="ipsImage" src="{file="$record->_record_image_thumb" extension="cms_Records"}"></a>
			</div>

and replace with this

<div class="cCmsRecord_image">
				<a href="{$record->url()}" title="{lang="read_more_about" sprintf="$record->_title"}"><img class="ipsImage" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" dota-src="{file="$record->_record_image_thumb" extension="cms_Records"}"></a>
			</div>

5. For avatars: Open template  core_global_userPhoto, and replace everything with this code

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

Note: If you are already using a script to defer images loaded with "background-image:url...", then read an article about combined use of defer images.