Practical tips for utilizing drawImage once all images in an array have been fully loaded

Question

Practical tips for utilizing drawImage once all images in an array have been fully loaded

I am having trouble rendering images using the drawImage function after they are loaded. I attempted to solve the issue by using setTimeout, but it does not work consistently.

Below is my code:

    while(FocusItem.length>0)
    {
        FocusItem.pop();
    }

    ftx=canvas.getContext('2d');

    focusImageBackground = new Image();
    focusImageBackground.src = "./images/odaklanma/odaklanmaBackground.jpg";

    if(RandomSoru==15)
        finishSoru=true;

    if(finishSoru)
    {
        RandomSoru = Math.floor((Math.random() * 15)+1);
        tempRandomSoru=RandomSoru;
    }

    if(RandomSoru==tempRandomSoru)
    {
        RandomSoru = Math.floor((Math.random() * 15)+1);
    }

    var soru = new Object();
    soru["image"] =  new Image();
    soru.image.src = './images/odaklanma/level/'+RandomSoru+'/soru.png';
    soru["x"] = 341;
    soru["y"] = 140;
    FocusItem.push(soru);

    var dogru = new Object();
    dogru["image"] =  new Image();
    dogru.image.src = './images/odaklanma/level/'+RandomSoru+'/dogru.png';
    dogru["x"] = xDogru;
    dogru["y"] = 280;
    FocusItem.push(dogru);

    var yanlis = new Object();
    yanlis["image"] =  new Image();
    yanlis.image.src = './images/odaklanma/level/'+RandomSoru+'/yanlis.png';
    yanlis["x"] = xYanlis1;
    yanlis["y"] = 280;
    FocusItem.push(yanlis);

    var yanlis2 = new Object();
    yanlis2["image"] =  new Image();
    yanlis2.image.src = './images/odaklanma/level/'+RandomSoru+'/yanlis1.png';
    yanlis2["x"] = xYanlis2;
    yanlis2["y"] = 280;
    FocusItem.push(yanlis2);

}

if(focusImageBackground.complete){
    if(FocusItem[0].image.complete && FocusItem[1].image.complete && FocusItem[2].image.complete && FocusItem[3].image.complete)
    drawFocus();
    else
        setTimeout(drawFocus,600);
}
else
    focusImageBackground.onload=function(){
        if(FocusItem[0].image.complete && FocusItem[1].image.complete && FocusItem[2].image.complete && FocusItem[3].image.complete)
            drawFocus();
        else
            setTimeout(drawFocus,600);
    }


function drawFocus(){
ftx.drawImage(focusImageBackground,0,0);

for (var i=0; i<FocusItem.length; i++){
    FocusItem[i].image.onload=function(){
        ftx.drawImage (FocusItem[i].image, FocusItem[i].x, FocusItem[i].y);
    }

}

}

javascript arrays image render onload

Answer 1

Answer №1

If you preload all your images before executing the rest of your code, you can ensure they are all loaded. The following simplified method demonstrates how to load an array of image URLs and track their loading progress.

Here is a concise example (excluding extraneous code) that showcases how to efficiently handle image loading using a callback function:

function loadImagesSequentially(srcs, callback) {
   var images = [], img;
   var remainingCount = srcs.length;
   
   for (var i = 0; i < srcs.length; i++) {
       img = new Image();
       images.push(img);
       
       img.onload = function() {
           --remainingCount;
           
           if (remainingCount === 0) {
               callback(srcs);
           }
       };
       
       img.src = srcs[i]; // Ensure setting .src after defining onload handler
   }
   
   return images;
}

// Sample array of image filenames
var fileNames = ["image1.png", "image2.png", "image3.png"];

// Generate full URLs array
var urls = [];
for (var j = 0; j < fileNames; j++) {
    urls.push('./images/directory/' + fileNames[j]);
}

// Load all images and trigger callback when all are loaded
var loadedImages = loadImagesSequentially(urls, function() {
    // Handle loaded images here e.g., rendering them on screen
});

This code snippet was inspired by my previous response available at: Cross-browser solution for a callback when loading multiple images?

Answer 2

If you preload all your images before executing the rest of your code, you can ensure they are all loaded. The following simplified method demonstrates how to load an array of image URLs and track their loading progress.

Here is a concise example (excluding extraneous code) that showcases how to efficiently handle image loading using a callback function:

function loadImagesSequentially(srcs, callback) {
   var images = [], img;
   var remainingCount = srcs.length;
   
   for (var i = 0; i < srcs.length; i++) {
       img = new Image();
       images.push(img);
       
       img.onload = function() {
           --remainingCount;
           
           if (remainingCount === 0) {
               callback(srcs);
           }
       };
       
       img.src = srcs[i]; // Ensure setting .src after defining onload handler
   }
   
   return images;
}

// Sample array of image filenames
var fileNames = ["image1.png", "image2.png", "image3.png"];

// Generate full URLs array
var urls = [];
for (var j = 0; j < fileNames; j++) {
    urls.push('./images/directory/' + fileNames[j]);
}

// Load all images and trigger callback when all are loaded
var loadedImages = loadImagesSequentially(urls, function() {
    // Handle loaded images here e.g., rendering them on screen
});

This code snippet was inspired by my previous response available at: Cross-browser solution for a callback when loading multiple images?

Practical tips for utilizing drawImage once all images in an array have been fully loaded

Answer №1

Similar questions

Encountering a problem with scrolling the modal to the top

Receiving an abundance of alert notifications triggered by the search functionality of jsTree

Plugin for managing responses other than 200, 301, or 302 in forms

Automatically populate select boxes with values from a different source using PHP

Tips for setting a default value for the local file in React Native

What is the best way to calculate the total number of results using ajax?

Changing the text of a link when hovering - with a transition

Server experiencing slow performance with Node.js formidable file uploads

What to do when your Numpy array exceeds RAM capacity: Store to disk or use an out-of-core approach?

Utilizing Vue 2 and Axios to toggle visibility of a div based on the response of an Axios request

Using PHP within Drupal, how can I show or hide a link as needed in PHP and Drupal?

Setting a variable for a JavaScript function to insert a video - a step-by-step guide

Understanding the concept of "this" within a callback situation

Tracking a razor ajax form using pace.js has never been easier with these simple steps

Instructions for sending an email through a form while displaying a pop-up message

Unable to verify POST $http request using $httpBackend

Stylesheets from node_modules cannot be imported without using the tilde (~) character

Restrict input to only text characters in a textbox using AngularJS

Handy Node.js package for building a JSON API in a Ruby on Rails application

Guide on Executing a Callback Function Once an Asynchronous For Loop Completes