Lazy loading theme header

WP lazy loading using intercooler.js 01

Lazy loading images in WordPress with intercooler.js

An experiment

This is an experiment born out of an opportunity: I’m developing a custom theme for a client and I’ve decided to use intercooler.js for all AJAX interactions since it’s so easy.
The theme will have an heavy graphic component and many images almost on any page and beside the usual image optimization it makes sense to use a lazy loading technique.
The opportunity is that intercooler.js is already loaded on the page by the wp-intercooler plugin and since it packs a functionality, the ic-trigger-on attribute, that can be used to do something when an element scrolls into view it makes sense to give it a try and see if I could use that to trigger lazy loading.

Testing set up

A new theme featuring only the index.php template, the wp-intercooler and wp-routes plugins active on the site and no attempt whatsoever to give the page any style beside the the bare-bones one.

// file index.php <?php get_header(); ?> <?php $ic_active = function_exists( 'ic_load' ) ? 'active' : 'not active'; $wp_routes_active = function_exists('respond') ? 'active' : 'not active'; ?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <header class="centered padded"> <h2>Here are some images</h2> <p>Some will be immediately visible and some will not.</p> <p>If <a href="https://github.com/lucatume/wp-intercooler">wp-intercooler</a> and <a href="https://github.com/lucatume/wp-routes">wp-routes</a> plugins are active on the site are then lazy loading of images should happen.</p> <p>intercooler.js is <b><?php echo $ic_active ?></b></p> <p>wp-routes is <b><?php echo $wp_routes_active ?></b></p> </header> <div class="empty-space centered"> <p>Big empty space, scroll down and see lazy loading happening.</p> </div> <div class="lazy-img centered" ic-trigger-on="scrolled-into-view" ic-src="/lazy-load-image?url=<?php echo urlencode( 'http://lorempixel.com/800/400/sports/1' ) ?>"> </div> <div class="empty-space centered"> <p>Another empty space, keep scrolling.</p> </div> <div class="lazy-img centered" ic-trigger-on="scrolled-into-view" ic-src="/lazy-load-image?url=<?php echo urlencode( 'http://lorempixel.com/800/400/sports/2' ) ?>"> </div> <div class="empty-space centered"> <p>Yeah. More empty space, go on.</p> </div> <div class="lazy-img centered" ic-trigger-on="scrolled-into-view" ic-src="/lazy-load-image?url=<?php echo urlencode( 'http://lorempixel.com/800/400/sports/3' ) ?>"> </div> <div class="empty-space centered"> <p>Last one. Last scrolling effort.</p> </div> <div class="lazy-img centered" ic-trigger-on="scrolled-into-view" ic-src="/lazy-load-image?url=<?php echo urlencode( 'http://lorempixel.com/800/400/sports/4' ) ?>"> </div> </main> <!-- #main --> </div><!-- #primary --> <?php get_footer(); 

What’s relevant here is the way images are lazily loaded using the intercooler.js ic-trigger-on attribute and a GET route to the back-end.

<div class="lazy-img centered" ic-trigger-on="scrolled-into-view" ic-src="/lazy-load-image?url=<?php echo urlencode( 'http://lorempixel.com/800/400/sports/1' ) ?>"> </div> 

In plain english it means

When this element is scrolled into view make a request to /lazy-load-image appending the image url as query parameter; when that response gets back fill the div with the content of that response.

Image lazy loading

Handling the request

In the theme functions.php file I’m handling that request using wp-routes with the code below

// file functions.php if ( function_exists( 'respond' ) ) { respond( 'GET', '/lazy-load-image', function () { echo "<img src='{$_REQUEST['url']}'>"; } ); } 

I’m simply returning the image markup filling it with the requested URL; when the request completes the div will be changed, in the case of the third image, to

<div class="lazy-img centered" ic-trigger-on="scrolled-into-view" ic-src="/lazy-load-image?url=/lazy-load-image?url=http%3A%2F%2Florempixel.com%2F800%2F400%2Fsports%2F3"> <img src="http://lorempixel.com/800/400/sports/3"> </div> 

Network tab

The code contemporary to this post is tagged 0.0.1 on GitHub.

Next

I’m using lorempixel.com to pull images in this first testing of the idea but I will move to using WordPress uploaded images and add some responsive goodness.

I appreciate your input