Image Array Using JavaScript ?

[blyk]

Hi ,
I have been trying to load multple images using JS for loop but no luck.
Here is my code pen. http://codepen.io/blyk/pen/fLHFa

I have been trying to load images from my system.
Here is the zip file http://www.fileconvoy.com/dfl.php?id=gd448097f35434c0899945593485ab566fbd436c05

Help !

[dyr]

What’s not working properly? I see various images when I move my mouse around.

[blyk]

Yes I know it is working when I load images without loop but when I use loop, which I have commmented in javascript, it doesn’t change any image.

The problem is loop. I don’t know how to use for loop for loading multiple images if the destination folder is same and only file numnder change in a sequence.

Please download my source folder it has everything. (images, css, js, and html)

var img = new Array(19);

for(var i=0;i<19;i++){ 
img[i] = new Image(); 
img[i].src = 'images/ME' + i + '.jpg'; }

$(document).mousemove(function(e){
  for(var i=0;i<20;i++){
    if( i*100 < e.pageX){
       $("#gallery").attr('src', image[i].src);
    }
    }
});

[noahgelman]

A couple glaring issues.

1. My first question would be why on earth are you using an array of images? If you’re just using its src attribute just make an array of strings. You already have an actual image element so there’s no reason to make an array of images since you’re not actually using them as images. It just complicates things.

2. You don’t need a loop here. You iterating over ‘i’ and comparing it to the mouse position and changing the image accordingly. THIS IS VERY BAD. And this is why. If the mouse position is at 1000 then this line “if( i*100 < e.pageX){” is going to trigger 10 times. You’re changing the image src 10 times every time the mouse moves!!!!! If the mouse in towards the right, its going to trigger even more!

How to fix:

Forget the loop, you don’t need it. Just check the mouse position and grab the image needed. Here is an updated Pen.

What I did was simplify the array. Lookin’ much sexier.

Next was I removed the loop. On mouse move I set the xPos variable equal to the mouse x mouse position.

I then get that number, divide it by 100 (thats how big you wanted the gap between changing images), and then I rounded down.

Given mouse position 50, it would be divided by 100 which equals 0.5, rounded down is 0, so it grabs the first item in the array.

Given mouse position 1000, it would be divided by 100 which equals 10, rounded down is still 10, so it grabs the 11th item in the array.

Hopefully this fixes everything for you and makes it much simpler.

[noahgelman]

As a side note, with 100px gaps between image changes you won’t be able to see all 20 without a monitor that’s at least 2000px wide.

If you want, you can grab the window size, divide it by the array length, and then use that value instead of 100. That way you’ll always be able to see all the images no matter how big or small their browser is.

You can also reset that value every time the window is re-sized so it’ll always work.

It depends on what you’re using this for.

[blyk]

@noahgelman : First of all thank you so much :)

1. Why have I used for loop? Answer: I thought JS is like other programming languages where you load the multiple images (path of the images, precisely) one by one using for loop in a array and then used array element for calling the images, since they all are already been stroed in the array.

2. So actually what I was trying to do that is to create an array of images (path of the images, precisely) using loop where I am creating and storing the path with the incremental “i” in the array element. ‘images/name’ + i + ‘.jpg’ . So if I load images from my system one by one where source folder is same and numbers are used for file naming then I dont have to create image array with path.

3. I was just trying to short this

   var image = [ ‘http://i.share.pho.to/b1ffafc9_o.gif&#8217;, ‘http://i.share.pho.to/4c75238c_o.gif&#8217;, ‘http://i.share.pho.to/b1ffafc9_o.gif&#8217;, ‘http://i.share.pho.to/d22e67e3_o.gif&#8217;, ‘http://i.share.pho.to/39c9969d_o.gif&#8217;, ‘http://i.share.pho.to/9eb5d59d_o.gif&#8217;, ‘http://i.share.pho.to/fe34205c_o.gif&#8217;, ‘http://i.share.pho.to/3ad27729_o.gif&#8217;, ‘http://i.share.pho.to/1e1c2646_o.gif&#8217;, ‘http://i.share.pho.to/29b5cde3_o.gif&#8217;, ‘http://i.share.pho.to/157a9e78_o.gif&#8217;, ‘http://i.share.pho.to/851c99e8_o.gif&#8217;, ‘http://i.share.pho.to/1c0d73f0_o.gif&#8217;, ‘http://i.share.pho.to/dc19e9d2_o.gif&#8217;, ‘http://i.share.pho.to/9b40003c_o.gif&#8217;, ‘http://i.share.pho.to/d8363256_o.gif&#8217;, ‘http://i.share.pho.to/b0ea204e_o.gif&#8217;, ‘http://i.share.pho.to/844af0cd_o.gif&#8217;, ‘http://i.share.pho.to/582e4ec0_o.gif&#8217;, ‘http://i.share.pho.to/a9887def_o.gif&#8217; ]

to this

 var image = new Array(20); 
for(int i=0;i<20;i++) 
{ 
image[i] = "http://i.share.pho.to/a9887def_" + i + ".gif"; // file path if only the index changes where rest of the url remains same (assumption) 
}

or to this

    var image = new Array(); 
    for(int i=0;i<20;i++){ 
    image[i] = new Image(); 
    image[i].src = "images/names" + i + ".jpg"; // file path 
    }

but I think this one is the correct way of doing this

var[] image;
for(int i=0;i<20;i++){
  image[i] = "images/names" + i + ".jpg";
}

[noahgelman]

I’m going to respond to each of your points but first I’m going to sum up what your code did in your first example.

1. You create an array of images
2. When the user moves their mouse:
   a. Get the left position of the mouse
   b. Loop through you’re entire array of images
   c. Replace your image with the one in the array
   • Continue to do so till the equation adds up to greater than your left value

The problem with the above is that every single mouse move event you make, causes you to loop though your array. You’re looping through it over and over and over and replacing the image src over and over and over.

Your code can replace the image src over a dozen times in move single mouse move event. It’s incredibly heavy code.

The base problem isn’t that the loop exists, it is that you’re running the loop and replacing the image src a million times.

Now, to address your points:

1. Like I stated above, you’re running the loop and replacing the image src a million times. So you used the For loop incorrectly. It’s a bonus that the for loop isn’t needed at all. Get away from it.

2. I’m going to break this down one line at a time:

So actually what I was trying to do that is to create an array of images (path of the images, precisely)
– Ok. we’re on the same page. In my example I ignored creating image objects and went straight for storing the paths

using loop where I am creating and storing the path with the incremental “i” in the array element.
– No. Stop. You don’t need to do this. It doesn’t help you

‘images/name’ + i + ‘.jpg’ . So if I load images from my system one by one where source folder is same and numbers are used for file naming then I dont have to create image array with path.
– No. You’re so attached to this For loop you’re not seeing the big picture here.

STOP
USING
THE
FOR
LOOP

It’s fat and slow and entirely unneeded. Please view my codepen again.

[blyk]

@noahgelman : Thanks for your patience and respons. :) :) :)

I am new to JS & CSS and I am learning this step by step and ofcourse I would make mistakes and error becasue I don’t know it compeletly.

Now, I caught the error which was nagging me.

Error: When I had defined the > var img = new Array(19) I forgot to put the semicolan at the end of this statement so when I did made the changes it worked.

And Thank you for explaining me for loop becuase I have seen many tutorials for programming JS but none of them mentioned when to use or cons or drawbacks of this. Thank you so much again :)

[amardeepsingh]

Its good

[Author]

Posts