Check if a number X of images exists and put them in an array

Question

I'm trying to check with jQuery if an image exists in my domain for then put them in an array. I have that code:

jQuery(document).ready(function($) {
    var images = new Array();
    var flag = true;
    var i = 0;
    var x = 1;
    while(flag) {
        $.ajax({
            url:'http://localhost/testImages/images/picture-1-' + x + '.jpg',
            type:'HEAD',
            error: function() {
                flag = false;
                return flag;
            },
            success: function() {
                images[i] = '<?php echo $productSlug . "-1-"; ?>';
                images[i] += x + '.jpg';
                return images[i];
            }
            i++;
            x++;
        });
        alert(flag);
    }
});

When I run the page I must force close firefox because I had some error with load charges. I have the alert(flag) to know the state of that variable and wait for the false. I tried commenting the while loop and replacing 'x' for a number that does not exists in my images name and the flag variable always returns true.

I think that the problem is in the ajax code but I don't have much experience with it.

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Felix Kling, Aug 16 '13 at 14:49

score 0 · Answer 1 · answered Aug 16 '13 at 15:20

You have bad syntax.

        i++;
        x++;

Should be inside the success function. Also, your while loop will never stop until one of the requests is an error, which may or may not happen.

To ensure what it looks like you are trying to do occurs, you have to make the code "block" on the request, making it synchronous. Use async:false as part of the ajax arguments.

score 0 · Answer 2 · answered Aug 16 '13 at 15:21

Can you try this? I think moving the incrementations into the success callback might help. i think also you only need one.

while(flag) {
        $.ajax({
            url:'http://localhost/testImages/images/picture-1-' + x + '.jpg',
            type:'HEAD',
            error: function() {
                flag = false;
                return flag;
            },
            success: function() {
                images[i] = '<?php echo $productSlug . "-1-"; ?>';
                images[i] += x + '.jpg';
                i++;
                x++;
                return images[i];

            }

        });
        alert(flag);
    }

I'd say that scanning your filesystem in this manner is not the most elegant approach. You can fire off an AJAX call that might eventually return false, but in the interim, the browser could continue to fire off additional calls since AJAX is asynchronous.

A server-side web service would be ideal here, if that is an option for you. There is also the File API, which might be a better approach, but doesn't have complete browser support: http://caniuse.com/fileapi

UPDATE

You don't need to write return images[i]; in your success callback, as you aren't actually returning the array to anything. Given your current architecture, you would probably also want to start processing your image array in your error handler, as that is the cue there are no more files of interest, but I again would suggest trying to find another way to do this if at all possible.

UPDATE #2

And Nick is absolutely correct, you should flip this over to synchronous, which will obviate the issue of synchronicity I mentioned previously (how the heck did I miss that?!)

Writting the incrementations in the success callback does something more that before, but now the error callback does not work because the flag variable always has the true value. EDIT: I solved it, i had a problem in the URL. — , Aug 19 '13 at 07:31
EDIT2: Now I found another error. When the loop is looking for an image, if 'x' is equal to a number that not exists in my images it takes that URL as success and the calls the error callback. — , Aug 19 '13 at 07:55

Check if a number X of images exists and put them in an array

2 Answers2