From 3f6a9546ec13063d0d5bdf21d30a93d3e8aa6050 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:22:21 -0400 Subject: Rebuild changes based off latest barf --- build/posts/load-image-on-click/index.html | 69 ------------------------------ 1 file changed, 69 deletions(-) delete mode 100644 build/posts/load-image-on-click/index.html (limited to 'build/posts/load-image-on-click/index.html') diff --git a/build/posts/load-image-on-click/index.html b/build/posts/load-image-on-click/index.html deleted file mode 100644 index be35faf..0000000 --- a/build/posts/load-image-on-click/index.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - - - Click to Load Website Images - - - - - - - -
-

Click to Load Website Images

-

2021-03-25

-

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="/placeholder-image.webp" onclick="this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons">
-    <figcaption><b>Click the placeholder to load in the real image</b><br>
-        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.webp">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: placeholder-image.webp. 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.

- \ No newline at end of file -- cgit v1.2.3-54-g00ecf