This content originally appeared on Ugly Duck and was authored by Ugly Duck
In my previous post about switching my Jekyll blog over to PHPetite, I briefly mentioned how I only loaded in article images if the user clicked or tapped the empty file element.
In this post, I’m going to quickly breakdown the update I’ve done to my blog’s images since then and how you can easily implement the same thing in your own project.
Update
As pointed out by Gabriel in this Github issue, this concept breaks things slightly for RSS users. Since then, I have just set the default images on this blog to display: none and render them as block elements when their specific section is loaded into the DOM visibly.
The example below is remaining the same as it was, to still provide context for this post.
Live Demo
Before we jump head first into the details, let’s take a look at what we will be creating:
Pretty neat, eh? Well let’s get into the nitty gritty.
The Code
Personally, I place everything into a figure element to keep things contained and clean - but this isn’t required by any means. We then include our img and figcaption elements. That’s it.
<figure>
<img src="./no-image.svg" onclick="this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.png'" alt="Aqua UI buttons">
<figcaption>
Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source.
<a href="https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.png">View full size image</a>.
</figcaption>
</figure>The Image Element
This is where the magic happens. By default all images will target the default placeholder image: no-image.svg. This image is just 16KB in size and only needs to load in once.
Next we include an inline onclick attribute, which targets the current image’s src attribute and changes it based on the URL provided. (Note: I use Cloudinary for my blog’s image storage, but you could even host your images relative to your root directory if you wanted)
Now when a user clicks on the placeholder image, the inline onclick pulls in the correct image in it’s place.
Disabled JavaScript
For users who have JavaScript blocked or disabled we have a decent backup. By including a direct link to the image URL in the figcaption element, we give the user the ability to still view the image in a separate browser tab.
You could get extra fancy and include some noscript tags in your project that maybe render a different placeholder image mentioning they have JavaScript disabled etc, but for my needs that would be overkill.
Cool - But Why Do This?
Bandwidth is a limited resource for a lot of users around the world. As designers and developers it’s best to respect this fact and only load in elements as the user requires them. Every little bit helps.
This content originally appeared on Ugly Duck and was authored by Ugly Duck
Ugly Duck | Sciencx (2021-03-25T00:00:00+00:00) Click to Load Website Images. Retrieved from https://www.scien.cx/2021/03/25/click-to-load-website-images/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.