Jump to content
  • Our Picks

    Repair headsets from different manufacturers

    Repair of telephone exchanges and equipment

    Repair of intercom systems and equipment

    Remove Render-blocking CSS

    We are repairing different inverters

  • Vote for us

Defer offscreen images


Recommended Posts

  • Owner

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('dota-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=" 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>

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>

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

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.

Link to comment
Share on other sites

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.

  • Create New...