Tell me more!
Ladder.loader() is an image loading function for static-structured sites. It runs on the client’s web-browser and loads images one at time, but gives you the power to prioritize the download queue by assigning images to tiers.
That means the images in the first tier will load one-by-one, top-to-bottom, and then the second tier will start to load, and so forth.
That’s why it’s called Ladder.loader(). It’s like a ladder, and it loads.
This approach provides a faster feeling loading experience than default batch loading and lets you set priorities, while keeping it simple.
Crucially, Ladder.loader() is also not a lazy-loader. Lazy-loaders load images based on the browser scroll position, which can minimize download volume if the user doesn’t view the whole page, but can easily get bogged down if one section is filled with images.
Ladder.loader() is a heavy-lifting, blue-collar kind of loader.
For what situations?
Ladder.loader() was written to use with static site generators like Hugo or Jekyll, but it can be used any time you are able to modify an image’s <img> tag, load the ladderLoader.js file, and call the Ladder.loader() function.
It’s good at getting images in front of people quickly on sites that have a lot of large image assets to load. If a browser starts trying to download 30 images at once, it can get pretty sluggish.
It’s totally client-side, so it can’t compress your images for you, but if you can host multiple sizes of an img you can tell Ladder.loader() which you’d like to download depending on device size. This works great with SSGs like Hugo that are able to process image files.
It has no dependencies, except ES6 JavaScript.
How?
Using Ladder.loader() has 2 requirements: 1) you’ll need to properly format the relevant <img> tags in the site’s raw HTML, and 2) you’ll need to call Ladder.loader() using JavaScript from the browser.
In HTML:
1) Assign your <img> tags to tiers by class, 2) assign the actual link to a data slot, 3) & fill the src with a temporary image.
<img class="first-tier" data-llsrc="/images/fullImage.jpg" src="/images/tempLoading.svg">
Also, you’ll need to import the ladderLoader.js in your header or footer. You can host the file yourself, or pull from a CDN.
<footer>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/benjfriedrich/ladderLoader.js@1.0/ladderLoader.min.js"></script>
</footer>
In JavaScript:
1) Define a tier using a 2-element array of stings containing a) the tier’s class, and b) the relevant data-attribute, or pass in the tier’s class as a string and ‘llsrc’ will be used as the default data-attribute.
['first-tier','llsrc']
2) pass as many of these arguments into Ladder.loader() as you want, in the order that you want them loaded,
Ladder.loader(['first-tier','llsrc'],['second-tier','llsrc'],['third-tier','llsrc'])
3) & then call Ladder.loader() at the appropriate time!
window.onload = Ladder.loader(['first-tier','llsrc'])
Pro-tips:
Remember you can pass functions that return strings as arguments. A common use for this would be to provide smaller versions of files to mobile devices.
In HTML:
<img class="first-tier" data-llsrcFull="/fullImage.jpg" data-llsrcMobile="/smallImage.jpg" src="/images/tempLoading.svg">
In JavaScript:
const isMobile = () => window.innerWidth <= 800 ? "llsrcMobile" : "llsrcFull";
window.onload = Ladder.loader(['first-tier',isMobile()])
Also, window.onload is an obvious moment to run a Ladder.loader(), but you can trigger it any way you want, and you could also trigger multiple instances of the function based on different conditions. It’s a really simple function, so you can be creative with it.