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

Adding a class to a navigation item based on the route path can be achieved by following

What is the best way to retrieve an AJAX response in advance of sending it to a template when utilizing DATAT

Angular 2 property accessor designed similar to Linq style

In search of an effortless method to effortlessly select numerous elements using a handy bookmarklet

Condense categories

An issue occurred while attempting to execute a function in AngularJS

the value contained in a variable can be accessed using the keyword "THIS"

Is it possible to trigger multiple button clicks using JQuery simultaneously?

JavaScript - Retrieve a nested property within an object using an array of strings

Does React trigger a re-render when setState is called even if the state value remains unchanged?

Ensuring that a service is completely initialized before Angular injects it into the system

Having trouble with Lerna bootstrap? You might be running into the dreaded npm error code E401

Is Joi's existence a myth?

Analyzing Varied Date Formats

Error: The function Stripe.customers.cancel is not recognized in Stripe version 14.18.0

Transfer a script from a view to application.js in Rails: Guide and Instructions

JavaScript does not function properly with dynamically loaded content

Differences between utilizing computed variables versus useState and useEffect

Send data from an AJAX request to a Laravel controller

Tips for implementing lazy loading for a section of a template in Angular 2