What should I do if one of my images fails to load after the previous one has loaded successfully?

Question

What should I do if one of my images fails to load after the previous one has loaded successfully?

My code is designed to create an animation using 3 canvases: one for the base image, one for the streamline wind map drawing, and another for an image covering part of the drawing. The following code displays the uploading of two images.

            var img = document.createElement("img");
            var cvrimg = document.createElement("cvrimg");
            img.src = "https://cors-anywhere.herokuapp.com/www.example.com/img.png";
            cvrimg.scr = "https://cors-anywhere.herokuapp.com/www.example.com/img-two.png";
            img.crossOrigin = "anonymous";
            cvrimg.crossOrigin = "anonymous";
            img.onload = function () {
                imgctx.drawImage(img, 10, 10);
                cvrimg.onload = function () {
                    console.log("maybe");
                    cvrctx.drawImage(cvrimg,10,10);
                    startDrawing(wdDataArr,wsDataArr,dataManArr,pastDataArr,onlineArr);
                }
            }

After adding some log statements to my code, I noticed that the cvrimg.onload function was not being called, and only one image was being queried in the network tab of the Chrome inspect tool.

Any tips or advice would be greatly appreciated by this aspiring programmer.

Thank you.

javascript image html5-canvas onload

Answer 1

Answer №1

When img.onload is called, the function for cvrimg.onload is defined. However, if cvrimg loads before img.onload, the function will not be called because it is not yet defined.

Furthermore, creating an element with

cvrimg = document.createElement("cvrimg")

results in a nonsensical <cvrimg> element being created.

Option 1 – loading images in parallel

let img = document.createElement("img"),
    cvrimg = document.createElement("img");

img.src = "https://cors-anywhere.herokuapp.com/www.example.com/img.png";
cvrimg.scr = "https://cors-anywhere.herokuapp.com/www.example.com/img-two.png";

img.onload = function() {
    console.log("img loaded");
    ...
}

cvrimg.onload = function() {
    console.log("cvrimg loaded");
    ...
}

Option 2 – loading images in series

let img = document.createElement("img"),
    cvrimg = document.createElement("img");

img.src = "https://cors-anywhere.herokuapp.com/www.example.com/img.png";

img.onload = function() {
    console.log("img loaded, loading cvrimg now");
    cvrimg.scr = "https://cors-anywhere.herokuapp.com/www.example.com/img-two.png";
    ...
}

cvrimg.onload = function() {
    console.log("cvrimg loaded");
    ...
}

Answer 2

When img.onload is called, the function for cvrimg.onload is defined. However, if cvrimg loads before img.onload, the function will not be called because it is not yet defined.

Furthermore, creating an element with

cvrimg = document.createElement("cvrimg")

results in a nonsensical <cvrimg> element being created.

Option 1 – loading images in parallel

let img = document.createElement("img"),
    cvrimg = document.createElement("img");

img.src = "https://cors-anywhere.herokuapp.com/www.example.com/img.png";
cvrimg.scr = "https://cors-anywhere.herokuapp.com/www.example.com/img-two.png";

img.onload = function() {
    console.log("img loaded");
    ...
}

cvrimg.onload = function() {
    console.log("cvrimg loaded");
    ...
}

Option 2 – loading images in series

let img = document.createElement("img"),
    cvrimg = document.createElement("img");

img.src = "https://cors-anywhere.herokuapp.com/www.example.com/img.png";

img.onload = function() {
    console.log("img loaded, loading cvrimg now");
    cvrimg.scr = "https://cors-anywhere.herokuapp.com/www.example.com/img-two.png";
    ...
}

cvrimg.onload = function() {
    console.log("cvrimg loaded");
    ...
}

What should I do if one of my images fails to load after the previous one has loaded successfully?

Answer №1

Similar questions

Don't waste time creating multiple popups for changing content - streamline your process

Exploring Javascript through Python using Selenium WebDriver

Node.JS program unexpectedly logging MySQL results to console and exhibiting erratic behavior

How can I download a PDF file in React.js using TypeScript on Next.js?

JavaScript code to find a date within a specified range

An API built with Mongoose, Express, and Node.js is currently only able to send a single image

Knockout Observable Array causing UI to freeze and not refresh properly

Whenever I try to include something within the `componentWillUnmount` function,

JavaScript Asynchronous Functions Not Handling Await Calls Correctly

Retrieve all the keys from an array of objects that contain values in the form of arrays

Problem with Bootstrap 3 navbar on mobile devices - not tappable or responsive

Displaying images in an Android app using Volley Library along with text strings

Creating a dynamic number of datasets in Chart JSWith Chart JS

Utilize Javascript ES6 to Sort Through Data in a Table

When using Asp.Net TextBox, the focus is lost after inputting the first character

Easily adding multiple field data with the same field name into a database can be achieved using Mongoose and Node.js (specifically Express

What is the point of utilizing angular.extend in this situation?

What could be the reason for the Nextjs fetch request returning undefined data?

Utilize the PHP variable HTTP_USER_AGENT to identify and analyze the user's browser

Is it possible to create a replicating text box in AngularJS that multiplies when entering input