Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

Jump to content
  • All Servicing

    teleqremprplantniponoptimdetig
Sign in to follow this  
Nophelet

Defer offscreen images

Recommended Posts

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('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-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=" data-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=" data-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=" data-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=" data-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.

Share this post


Link to post
Share on other sites
Sign in to follow this  

×
×
  • Create New...