Hello! I studied Computer Science, and live in Bath. I write code, design games, and occasionally tweet.
Hello! I studied Computer Science, and live in Bath. I write code, design games, and occasionally tweet.

Lazy Loading Images, the Jekyll Way Sep. 10, 2018 in Jekyll, Text, Tutorial

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

Pumpkin Aug. 30, 2018 in Bath, Photos

Pumpkin

Goodbye Southampton, I'm Moving to Bath Aug. 13, 2018 in Bath, Photos, University

Goodbye Southampton.

University is over and it’s time to start the next 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!

No Cycling Allowed Aug. 6, 2018 in Photos, Sport

Military Training in Progress

My Southampton Graduation Ceremony Jul. 19, 2018 in Photos, University

My Graduation Ceremony 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 everyone went outside for a year photo.

After The Ceremony A Group Of My Friends The Reception

We took photos of Jet, LLoyd, Daniel, Me, Andy, and Edmund. And finally enjoyed the reception.

Interrailing into London Jul. 17, 2018 in Interrailing, London, Photos, Travel

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 Jul. 16, 2018 in Interrailing, Photos, Stockholm, Travel

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 Jul. 15, 2018 in Interrailing, Photos, Stockholm, Travel

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 Jul. 14, 2018 in Interrailing, Photos, Stockholm, Travel

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 Jul. 13, 2018 in Interrailing, Photos, Stockholm, Travel

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

Get an email when I post, zero spam     Get an email when I post     Newsletter