This page describes how Ascension implemented lazy-loading and also how to use it.

Lazy-loading is a technique that allows for images that are not in immediate view to skip loading. Instead, they will only be loaded when scrolling to them. This has lots of advantages, the biggest one being an increase in page performance. Because we're only loading images when we need them, the page loading time is much smaller than usual (a good thing).

Imagine having a web page with 3 large images in the middle, images that not immediately visible when we're loading the page. By not loading them, we're making sure that our page loads fast (very important for users who browse our page from data plans). If we scroll down the page then we need to see those images so that's when we load them.

Ascension uses a JavaScript plugin called LazySizes. It's super easy to use and you can read all about it on the official page. For now, here's a very simple example that will show you how to use it:

						                
						                    <img src="assets/img/placeholder/blank-image.png" data-src="assets/img/placeholder/main-image.jpg" class="lazyload" alt="Icon">
						                
						            

There are 2 things to remember here:

1. The .lazyload class. This is very important because that's how you mark which images you want to lazy-load.
2. The blank image + data-src combination. This allows you to set a super light blank image as the default src and then load the main image using the data-src attribute. The page will initially load the blank image (super fast because it's a very small image) and then start loading the main one at the right time (when we scroll to the image). It's also a good idea to make the blank image the same dimension as the main image because that will prevent elements below the image jumping up and down when the image switch occurs.