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/load-image-on-click/index.html | 69 ++++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 build/load-image-on-click/index.html (limited to 'build/load-image-on-click') diff --git a/build/load-image-on-click/index.html b/build/load-image-on-click/index.html new file mode 100644 index 0000000..be35faf --- /dev/null +++ b/build/load-image-on-click/index.html @@ -0,0 +1,69 @@ + + + + + + + + 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