Hello! I studied Computer Science, now I live in Bath! I write code, design games, and occasionally tweet. Why not subscribe?

Lazy Loading Images, the Jekyll Way

Posted September 10, 2018. Text. 834 words.

Intersection Observer is a relatively new API with decent support that can have a huge impact on performance. It has many uses and can trigger all sorts of code but this article is simply looking into performance. With it, image lazy loading can be quickly and easily added to any site including static Jekyll sites.

To start, define a variable to store the Interaction Observer. For simpler deployment, the code below avoids using modern JavaScript features such as let and arrow functions.

var observer

Secondly, a function to load a given image. Here, a temporary image is created to load the image and if successful the source of the actual image is replaced.

function loadImage(image) {
	var i = new Image();
	i.onload = function() {
		image.classList.add('lazy-loaded')
		image.src = image.dataset.lazySrc
	}
	i.onerror = function() {image.classList.add('lazy-error')}
	i.src = image.dataset.lazySrc
}

Thirdly, a function to process intersections. It checks which images are currently intersecting.

function onIntersection(entries) {
	for (var e in entries) {
		if(entries[e].intersectionRatio <= 0) continue
		observer.unobserve(entries[e].target) // Stop watching
		loadImage(entries[e].target)
	}
}

Fourthly, lazyily loaded images are located and the code is run.

var images = document.querySelectorAll('img[data-lazy-src]')
if ('IntersectionObserver' in window) {
	observer = new IntersectionObserver(onIntersection, {rootMargin: '250px'})
	for(var i in images) {
		if(typeof images[i] === 'object' && 'classList' in images[i] &&
			 !images[i].classList.contains('lazy-loaded') &&
			 !images[i].classList.contains('lazy-error')) {
			observer.observe(images[i])
		}
	}
} else {
	for(var image in images) loadImage(image)
}

But, the code above can only lazy-load images with very specific markup. This is where this nasty piece of Liquid code comes in. Liquid is fundamentally a very limited language with no direct way to initialise arrays, weird syntax, and no regular expressions. So, instead of using regular expressions, we can instead create a nasty piece of splitting code which works just well enough for the job.

The HTML Jekyll generates from Markdown is simple and regular enough for the following code to work. I would not expect it to work for more complicated HTML. But it’s worth a shot!

{%- assign excerpt = content | split: '<img src="' -%}
{%- for e in excerpt -%}
	{%- if forloop.first == true -%}
		{{ e }}
	{%- else -%}
		{%- if e contains '" alt="' -%}
			{%- assign f = e | split: '" alt="' -%}
			{%- assign url = f | first -%}
			{%- assign g = f | shift | join: '" alt="' | split: '"' -%}
			{%- assign alt = g | first -%}
			{%- assign rest = g | shift | join: '"' -%}
			<noscript><img src="{{ url }}" alt="{{ alt }}" /></noscript><img class="script-required" src="#" data-lazy-src="{{ url }}" alt="{{ alt }}"{{ rest }}
		{%- else -%}
			{%- assign f = e | split: '"' -%}
			{%- assign url = f | first -%}
			{%- assign rest = f | shift | join: '"' -%}
			<noscript><img src="{{ url }}" /></noscript><img class="script-required" src="#" data-lazy-src="{{ url }}"{{ rest }}
		{%- endif -%}
	{%- endif -%}
{%- endfor -%}

Now I recommend styling the unloaded images with width and height. If known ahead of time it can be set explicitly. Failing that, I recommend setting a generic default using CSS.

img {
	min-width: 100px;
	min-height: 100px;
}

And finally with this in place, my site often enjoys a perfect score in Google Chrome Inspector Audit. It cleanly beats google.com which has a top score of 91 and even beats motherfuckingwebsite.com in every category but performance where it draws at 100.

(100) Performance, (100) Progressive Web App, (100) Accessibility, (100) Best Practices, (100) SEO

Get an email each week I post, zero spam             


Moving to Bath

Posted August 13, 2018. Bath, Photos. 67 words.

University is over and it’s time to start a new chapter of my life. After what was approaching nearly two decades in education, it’s finally time to enter the real world.

I’m moving to Bath where I’ll be working for Netcraft, a company which specialises in internet research, anti-phishing and security services.

I’m looking forward to it!

My Graduation

Posted July 19, 2018. Photos, University. 172 words.

My Graduation Ceremony

Four years later, and my time at university has come to a close. I have earned my Masters. My time here is at a close. It is a bitter-sweet day.

After The Ceremony A Group Of My Friends The Reception

After The Ceremony everyone went outside for a year photo. We took photos of Jet, LLoyd, Daniel, Me, Andy, and Edmund. And finally enjoyed the reception.

Interrailing into London

Posted July 17, 2018. Interrailing, London, Photos, Travel. 175 words.

The last day of our trip. In the evening we fly back. Our flight is delayed so I spend the night with a friend. Tomorrow I will take the trains back home and prepare for Graduation.


Were Off To Rent A Boat A Paddleboat Along The River We Go

We’re Off To Rent A Boat. A Paddleboat. Along The River We Go

Continue Reading...

Interrailing into Stockholm: Day 5

Posted July 16, 2018. Interrailing, Photos, Stockholm, Travel. 238 words.

The penultimate day. We see the metro system, a museum, and escape from an escape room.


We Explore The Subway This Is T Centralen We Get Off After One Stop

We Explore The Subway. This Is T Centralen. We Get Off After One Stop.

Continue Reading...

Interrailing into Stockholm: Day 4

Posted July 15, 2018. Interrailing, Photos, Stockholm, Travel. 303 words.

Theme park number two. We board the ferry and spend the day in Tivoli.


Walking Along The South Bank Looking On The Water We Wait At A Dock

Walking Along The South Bank. Looking On The Water. We Wait At A Dock.

Continue Reading...

Interrailing into Stockholm: Day 3

Posted July 14, 2018. Interrailing, Photos, Stockholm, Travel. 415 words.

A history lesson.


We Start The Day Heading To The Old Town Where We Join A Walking Tour

We Start The Day Heading To The Old Town Where We Join A Walking Tour.

Continue Reading...

Interrailing into Stockholm: Day 2

Posted July 13, 2018. Interrailing, Photos, Stockholm, Travel. 337 words.

A fairly relaxing day. We watch the changing of the guard, explore the city, and have a good time.


Stockholm Is Under Construction Walking Through The Bustling Streets Towards The Palace

Stockholm Is Under Construction. Walking Through The Bustling Streets Towards The Palace.

Continue Reading...

Interrailing into Stockholm: Day 1

Posted July 12, 2018. Interrailing, Photos, Stockholm, Travel. 212 words.

We leave Copenhagen and set off for Stockholm by train. The journey is long and the day is short. We explore.


Checking Out And Leaving For Stockholm Six Hour Later We Emerge From The Station And Find Two Statues

Checking Out And Leaving For Stockholm. Six Hour Later We Emerge From The Station. And Find Two Statues.

Continue Reading...

Interrailing into Copenhagen: Day 4

Posted July 11, 2018. Copenhagen, Interrailing, Photos, Travel. 313 words.

To the zoo! We see so many animals, and so many young animals. The view from the tower is pretty nice as well.


Its Me

Its Me

Continue Reading...

« Last Page 2 / 11 Next Page »
StatCounter Pixel