An Easy Way to Load Content on an Event Without AJAX

Let's say, hypothetically, that you have a million elements on your page, I said hypothetically. And each element has a picture or any other form of data that's being called over the inter webs, it's costly to load ALL those elements with their respective data right? It could turn an intial page size Of ~2MB to something really big like 1024MB(haha), this also really hinders page load times. We gonna have a look into how to load data on demand with some events... and a little hackery.
This is my story.

In this snippet I will cover and attempt to explain how to load data on an event with some jQuery.

We aren't going to be doing much setup so we'll jump straight into the code and logic. We'll just be working with HTML and very little CSS, if any, and jQuery. We'll start with our DOM first.

Create an HTML file in text editor of your choice but I recommend Visual Studio Code, it's light weight and highly customizable and stuff. If you're like me and you don't know what the skeleton of a HTML body looks like then go to htmlshell and include jQuery.

In your *shiny* new document add these elements within your <body>:


            
                <div class="show-img">Show</div>
                <img data-img="https://dummyimage.com/200x200/eee/000000"/>
                <div class="show-img">Show</div>
                <img data-img="https://dummyimage.com/200x200/ddd/000000"/>
                <div class="show-img">Show</div>
                <img data-img="https://dummyimage.com/200x200/ccc/000000"/>
                <div class="show-img">Show</div>
                <img data-img="https://dummyimage.com/200x200/bbb/000000"/>
                <div class="show-img">Show</div>
                <img data-img="https://dummyimage.com/200x200/aaa/000000"/>

Noice.

It doesn't look "dynamic" now because we're basically hard coding these div elements but if you're using processors like PHP or Razor or anything that will build or add HTML elements, they will be building your DOM dynamically.

In every second line of code you'll notice that we added a URL to a data-img attribute. These URLs will redirect you to dummy images that you can find at... dummyimage.com I guess. We'll be using these images for illustrative purposes.

Because we don't want to load the images immediately when the page loads we store the the URLs of the images in the div's data-img attribute. You can go about retrieving data in other ways like querying a DB based on the div's ID or whatever of course but we'll do it this way for this example.

data-img isn't really an attribute, the data part is though. The img part is user defined and you're able to call it whatever you like, like "data-the-place-holder-for-my-image" if you really want but it gets a little tricky when querying data attributes with more hyphens in them. More info at jQuery.

Now we'll proceed to adding the jQuery. The jQuery portion isn't really "WOW!", it will only be a few lines of code to give you an idea of how to load the desired content after the DOM has already loaded.

If you haven't included jQuery, do so now right before the closing </body> tag by adding: <script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>.
Then open a <script type="text/javascript"></script> block directly underneath the inclusion of the jQuery.
In that script block add these few lines of code:


            
                var imgURL;
                $(".show-img").click(function(){
                 imgURL = $(this).next().data("img");
                 $(this).next().attr("src", imgURL);
                })

In the first line we create an empty variable that will hold our URL for our image, we will use this URL to alter our <img/> src attribute later.
In line 2 we attach an onClick event to our "Show" divs. Upon clicking on these divs, we fire an event that will handle our logic for each respective div click.
In line 3 we assign our URL to our imgURL variable. Because all of our <div>Show</div>'s and <img data-img=""/>'s follow each other sequentially, we can always assume that a <img data-img="..."/> will follow a <div>Show</div>.
- So when we click on "Show", which is "this" in $(this), we get the context of the item we clicked on or rather the element we attached our click event to.
- Then we get our next element in the DOM in relation to "Show", which will always be our following <img data-img="..."/> tag, by chaining .next() to our $(this).
- We now access our data attribute by chaining .data("img") to our $(this).next().
In line 4 we now alter our src attribute so that it can point to our URL that we got in the previous line with the same kind of chaining, only this time we chained .attr("src", imgURL) to our already familiar $(this).next() instead of .data("img"). The .attr() method or function can either read or write depending on the amount of parameters passed, in our case we want to alter/write therefore we pass two. So we describe which attribute we want to alter (src) and state what we want it to change to (imgURL).

And that is it. I've added a working example below. Have a looksee.

This was a very basic example and a little hacky but I just wanted to demonstrate that loading data after the DOM has loaded is possible and maybe even simple?

I hope this snippet proved insightful and that you learned as much as I did. Please feel free to comment and ask any questions or even leave suggestions.
Thanks for reading.

Download Project

An Easy Way to Load Content on an Event Without AJAX

Scenario

Overview

Straight Into It

HTML

jQuery