Jump to content
  • All Servicing

Sign in to follow this  

Defer offscreen images

Recommended Posts


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

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

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>

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>

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

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

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.