Премини към съдържание
  • Всичко което сервизираме

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

For other images, be creative or ask here.

Сподели мнението


Линк към мнението
Сподели в други сайтове

×
contactus
contactus
Важна информация

Поставихме "бисквитки" на устройството ви, за да направим този сайт по-добър. Можете да коригирате настройките си за "бисквитките" , в противен случай ще предположим, че сте съгласни да продължите.