What is the best way to preload images from an array within another array?

I am encountering an issue with preloading images.

for(y=0;slide_image.lenght;y++){
   for(x=0;slide_image[y].lenght;x++){
      var preload_image=new Image();
      preload_image.src=slide_image[y][x];}
}

When I use preload_image.src=slide_image[x] alone, it works fine. But when I combine the two, it doesn't. Could this be a JavaScript bug?

Here is the slide_image array:

var slide_image = new Array();

slide_image = [
    ['1/1.png', '1/2.jpg', '1/3.jpg', '1/4.jpg', '1/5.png'],
    ['2/text_1.png', '2/1.jpg', '2/2.jpg', '2/3.jpg', '2/4.jpg', '2/5.jpg', '2/6.jpg', '2/7.jpg'],
    ['3/1.jpg', '3/2.jpg', '3/3.jpg', '3/4.jpg', '3/5.jpg', '3/6.jpg']
];

Firebug and Firefox debugger are not showing any errors. I am unable to figure out why this code is not working.

javascriptarraysimage-preloader

Answer №1

You made a mistake with the length parameter and your usage of for loops is incorrect. Make sure the middle argument in the loop is a conditional expression that determines when the loop should stop.

If you correct the length parameter and iterate until your loop counters are less than the array's length, the updated code will look like this: 


for (y = 0; y < slide_image.length; y++) {
    for (x = 0; x < slide_image[y].length; x++) {
        var preload_image = new Image();
        preload_image.src = slide_image[y][x];
    }
}

Answer №2

to begin with, you incorrectly spelled Length

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step-by-step guide on implementing a border-bottom for an active link

Is there a way to apply a border-bottom to btn_articles and btn_posts when one of them is clicked? I attempted to use the active class but it did not have the desired effect. Any suggestions or solutions would be greatly appreciated. let btn_articles = ...

javascriptcss

Iterating recursively through a tree structure to update properties using Mongoose

I have a unique structure resembling a tree that I've set up to store comments. Each "comment" acts as a node with a "parent" property linking it to another "comment" node. Additionally, I've included a "replyCount" field on each node to keep tra ...

javascriptnode.jsmongodbmongoosemongoose-schema

Which specific class appears to be absent from the code snippet provided above?

class Test { int findUnique(int arr[],int n) { int result=0; for(int i=0;i<n;i++) { int sum=0; x=(1<<i); for(int j=0;j<n;j++) { if(arr[j]&x) sum++; } if ...

javaarrays

Difficulty encountered when trying to customize a polymer element that has been expanded (paper-slider)

I've been customizing the Polymer paper-slider element to handle an enumerated list and cycle through these values in the slider instead of just showing numeric values. However, I'm struggling with getting the styles to align properly. When you r ...

javascripthtmlcsspolymer

In what scenarios is it more suitable to utilize style over the sx prop in Material-UI?

When it comes to MUI components, the style and sx prop serve similar purposes. While the sx prop provides some shorthand syntaxes and access to the theme object, they essentially function the same way. So, when should you opt for one over the other? ...

javascriptreactjsmaterial-ui

Inquiry regarding delays in updating and retrieving data with Mongoose in Node.js

I recently faced an issue related to the CRUD development process. Whenever I update a property and check the response in Postman, it always shows the previous data. For instance, after clicking send on Postman, it shows "weeks" : "11" instead of "10". Che ...

javascriptnode.jsmongodbmongoosepostman

Create two arrays from a given list of arrays in PHP

I am working with an array that looks like this: $arr = ['A','B','C', 'D']; Can someone guide me on how to split it into pairs similar to the following format? $output = [ 0 => [ 0 => 'A', ...

phparrays

Sorting through a JavaScript array

I am facing a peculiar problem while trying to filter an array in TypeScript. Here is the structure of my object: Sigma.model.ts export class Sigma { sigmaId: number; name: string; userId: number; starId: string; } `` The starId property contains com ...

javascriptangulartypescript

Error: Discord bot encountered a TypeError while attempting to access the property 'id' of an undefined value

After revisiting a previous Discord bot package designed to track website updates, I encountered an issue. The code was originally scraped and last edited about 8 months ago with success. However, upon running node index.js, the following error occurred. ...

javascriptnode.jsdiscord

D3.js: Exploring the beauty of layered legends

I have a question regarding creating legends with triangle shapes. Specifically, I am trying to create two triangles representing "Yes" and "No". However, when I run the code below, the triangles end up overlapping each other. In an attempt to separate t ...

javascriptd3.js

How to Retrieve Upload Progress via HTTP Request in PHP

Is there a way to monitor the progress of file uploads by accessing the HTTP request in PHP? If so, how can this be achieved when uploading files into a MySQL database? require('../connect_db.php'); //Collect all necessary data $name = $dbc-> ...

javascriptphphtmlmysql

What is the best way to pass an array through router navigate function?

I've searched for a solution in other questions, but nothing has helped me... My goal is to redirect to a URL like this: this.router.navigateByUrl('/products'); I want to pass an array and retrieve it in the component with the active link ...

javascriptangulartypescriptangular6angular2-routing

How to extract a specific part of a string with regular expressions

I am currently working on a function to search for a specific substring within a given string. // the format is <stringIndex>~<value>|<stringIndex>~<value>|<stringIndex>~<value> var test = "1~abc1|2~def2|1~ghi3|4~jk-l4 ...

javascriptregex

Issue with loading dynamic content on a webpage using HTML and JavaScript through AJAX

I am currently using the jQuery UI Tabs plugin to dynamically load HTML pages through AJAX. Here is the structure of the HTML code: <div id="tabs"> <ul> <li><a href="pageWithGallery.html" title="pageWithGallery">Gallery< ...

javascriptjqueryajaxjquery-plugins

Creating a universal header for all webpages in Angular JS by dynamically adding elements using JavaScript DOM manipulation techniques

I have successfully created a json File containing an array of "learnobjects", each including an id, name, and link. Check out my plnkr example var myMessage = { "learnobjects": [{ "id": "1", "name": "Animation-Basics", "link": "animation_bas ...

javascripthtmlangularjsjsondom

When is it appropriate to utilize a view in EmberJS?

As a new user of EmberJS, I am navigating through the API and core components of the framework. One aspect that is challenging for me to fully comprehend is knowing when to utilize an Ember.View as opposed to an Ember.Component. My current understanding is ...

javascriptember.js

Removing a portion of an item with the power of RxJS

I possess the subsequent entity: const myObject = { items:[ { name: 'John', age: 35, children: [ { child: 'Eric', age: 10, sex: 'M' }, { ...

javascriptangulartypescriptrxjs

Tips for dynamically inserting a tabbed element into a list using AngularJS

I am trying to dynamically add elements with tabs in the list, but I encounter a problem where the device info gets overridden from the last user. You can see the issue here: https://i.sstatic.net/O1uXK.jpg This is how my Tabs item looks like in HTML: & ...

javascriptjqueryangularjsangularjs-directive

Executing function inside an Angular factory

I am currently working with an Angular factory that contains various functions. My goal is to use myService to retrieve data, and upon successful retrieval, call another function within the factory: myApp.factory('myFactory', function($http) { ...

javascriptangularjs

Fetching data in React using AJAX

I am in the process of developing a React Component that will display data retrieved from an AJAX call. Here's my scenario - I have a Jinja Flask back end hosted on AWS API Gateway, which requires custom headers and the Authorization header to serve H ...

javascriptreactjsflaskiframejinja2