Why doesn't it output all array elements at once?

Question

What's wrong with this code:

var images = [];

function getImages() {
    var st = true;
    var i = 1;
    var url;
    var ob;

    while(st) {
        if(i < 10) {
            url = "http://rachel-b.org/gallery/albums/Events/2012/May%2008%20-%20Rachel%20Bilson%20Celebrates%20Edie%20Rose%20Home%20Collection/thumb_00" + i + ".jpg";
            ob = new Image();
            ob.src = url;
            st = checkIfImageExists(ob);
            images.push(ob);
        }

        if(i >= 10 && i < 100) {
            url = "http://rachel-b.org/gallery/albums/Events/2012/May%2008%20-%20Rachel%20Bilson%20Celebrates%20Edie%20Rose%20Home%20Collection/thumb_0" + i + ".jpg";
            ob = new Image();
            ob.src = url;
            st = checkIfImageExists(ob);
            images.push(ob);
        }

        if(i >= 100) {
            url = "http://rachel-b.org/gallery/albums/Events/2012/May%2008%20-%20Rachel%20Bilson%20Celebrates%20Edie%20Rose%20Home%20Collection/thumb_" + i + ".jpg";
            ob = new Image();
            ob.src = url;
            st = checkIfImageExists(ob);
            images.push(ob);
        }
        i++;
    }
}

function checkIfImageExists(o) {
    var e = document.createElement("img");
    e.style.display = "none";
    document.getElementsByTagName("body")[0].appendChild(e);
    e.src = o.src;
    var res = e.width;
    document.getElementsByTagName("body")[0].removeChild(e);

    console.log(res);
    if(res === 0) {
        return false;
    } else {
        return true;
    }
}

getImages();

function outPut() {
    for(var i = 0; i < images.length; i++) {
        console.log(images[i]);
    }
}

outPut();

DEMO

Why doesn't it output all array elements at once? At the same time, every time I press run button, it outputs n+1 array elements. How come?

Your code is hard to read: What does s mean? string? Why not call it url? checkSt()? It looks like it checks whether an image URL is not 404. I suggest calling the function checkIfImageExists. Try renaming all your variables to make it easier for people to read your code and to help you. Additionally: What exactly is your expected result and your actual result? I can see the actual result in your jsfiddle, but not your expected result. — yankee
– yankee, Commented Jun 17, 2012 at 18:07
@yankee as a result, i'd like to see all 106 elements in console.but i see much less(( — DrStrangeLove
– DrStrangeLove, Commented Jun 17, 2012 at 18:34

mplungjan · Accepted Answer · 2012-06-18 07:18:34Z

1

Here is my rewrite

DEMO stops when there are no more images found - in this case at 106 images

var images =[];
var baseUrl = "http://rachel-b.org/gallery/albums/Events/2012/May%2008%20-%20Rachel%20Bilson%20Celebrates%20Edie%20Rose%20Home%20Collection/thumb_";    
function pad(num) {
   var str = "00"+num;
   return str.substring(str.length-3);
}

function output() {
    for (var i=0;i<images.length;i++) {
      console.log(images[i].src)
    }
}
function getImages(){
  var ob = new Image();
  var url = baseUrl+pad(images.length+1)+".jpg"  
  ob.onload=function() {
    images.push(ob);
    getImages();      
  }    
  ob.onerror=function() {
    output();
  }    
  ob.src= url;
}
getImages();

edited Jun 18, 2012 at 7:18

answered Jun 17, 2012 at 21:29

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeff · Accepted Answer · 2012-06-17 19:13:44Z

Your checkIfImageExists() function is the cause. I understand what you are trying to accomplish but you are checking for a width without giving the image time to load. You should bind to onload and onerror for the image object. (See http://lucassmith.name/2008/11/is-my-image-loaded.html for more details).

If you really want these images to load asynchronously, this while loop is very dangerous, you'd be better off with already knowing the top limit rather than trying to guess. If you do want async and have an unknown max...then you should chunk into a limited amount of images at once to load (as well as add some type of setInterval. Otherwise, with this setup, by the time your server returns a 404 for an image, your script would have already tried to load several thousand more invalid images.

If you need a code example let me know but this should at least point you in the right direction.

Collectives™ on Stack Overflow

Why doesn't it output all array elements at once?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related