Detecting Image Loading with Javascript

Question

Detecting Image Loading with Javascript

My website is filled with numerous images categorized into 5 different groups, causing it to load slowly.

To improve loading times, I have assigned each image a "data-src" attribute containing its actual source. Then, when a specific category is selected (clicked), I update the source attribute of all images in that category by looping through them.

Here's an example of how I structure my HTML:

<img loading="lzay" class="post_image" data-src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg" src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg">

In my JavaScript code, I iterate through the selected images within a for loop like so:

for(i = 0; i< selection.length; i++){
            let data_src = selection[i].children[2].getAttribute("data-src");;
            selection[i].children[2].src = data_src;
        }

I am now facing a challenge where I need to determine when all the images from a particular category have finished loading. Even though there is additional code that should execute after the for loop finishes, I want to ensure that it only runs once every image in the category has loaded onto the page.

javascript ajax image

Answer 1

Answer №1

Here's a quick solution I put together for you. Give it a try and see if it does the trick. Let me know if you encounter any issues.

index.html

<img id="pic1" src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg"/>
<img id="pic2" src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg"/>
<img id="pic3" src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg"/>
<script type="text/javascript" src="app.js"></script>

app.js

const pic1 = document.getElementById("pic1");
const pic2 = document.getElementById("pic2");
const pic3 = document.getElementById("pic3");

const picsArray = [
  pic1,
  pic2,
  pic3
]

let picsLoaded = 0;

for (let j = 0; j < picsArray.length; j++) {
  picsArray[j].onload = function () {
    picsLoaded++;
  }
  if (picsLoaded >= picsArray.length) {
    // All images have been loaded successfully
  }
}

Answer 2

Here's a quick solution I put together for you. Give it a try and see if it does the trick. Let me know if you encounter any issues.

index.html

<img id="pic1" src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg"/>
<img id="pic2" src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg"/>
<img id="pic3" src="https://i.ibb.co/FswR5KB/Pics-Art-06-22-07-48-49.jpg"/>
<script type="text/javascript" src="app.js"></script>

app.js

const pic1 = document.getElementById("pic1");
const pic2 = document.getElementById("pic2");
const pic3 = document.getElementById("pic3");

const picsArray = [
  pic1,
  pic2,
  pic3
]

let picsLoaded = 0;

for (let j = 0; j < picsArray.length; j++) {
  picsArray[j].onload = function () {
    picsLoaded++;
  }
  if (picsLoaded >= picsArray.length) {
    // All images have been loaded successfully
  }
}

Detecting Image Loading with Javascript

Answer №1

Similar questions

Sorting data in a Footable table by an unfinished line

I'm unable to resolve the issue regarding the message "Property or method is not defined on the instance but referenced during render."

Unable to attach eventName and callback to addEventListener due to the error message stating 'No overload matches this call'

What is the best way to incorporate component-specific CSS styles in React?

ngRepeat does not iterate through an array

importing a text file into the appropriate input field on an HTML form

Having trouble choosing a subitem from a dropdown menu in Vuejs?

Using jQuery, how can I dynamically change the stacking order of an element when clicked?

Improving the functionality of the JavaScript key press function

Instructions for printing a page and closing the Print window using Selenium

Utilize CSS properties to pass as arguments to a JavaScript function

What could be causing the sluggishness of this ajax call?

Guide to retrieving fresh information from an API using a desktop application built on node and electron

Implement dropdown menus for category selection in Magento CE version 1.8.1.0

Searching for $or command in express.js

Transforming dates from JSON and showcasing them on a DataTable

Creating a .env file using Vanilla JavaScript to securely store and conceal tokens

Having trouble determining why the design is not displaying correctly

Using Spring 3.0 with Jackson: How to post a composite entity using AJAX and JSON

Practical steps for programmatically adding or removing md-disable-backdrop in md-sidenav