So, what will I make? I’m honestly not entirely sure. I am planing to start with a couple of Unity games and I am considering resuming work on some previous ideas. From there, I want to work on a lower level, and I have ideas. But, I do not only want to make games and demos. I want to experiment and make new, different things. Maybe I’ll write fiction, compose music, make art. Who knows? I don’t!
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.
varobserver
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.
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.
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.
We took photos of Jet, LLoyd, Daniel, Me, Andy, and Edmund. And finally enjoyed the reception.
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.
We’re Off To Rent A Boat. A Paddleboat. Along The River We Go
