Почему он не выводит сразу все элементы массива?

Question

Что случилось с этим кодом:

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

Почему не это вывести все элементы массива на один раз? В то же время, каждый раз, когда я нажимаю кнопку запуска, он выводит элементы массива n + 1. Как так?

Answer 1

Вот мой переписывают

DEMO останавливается, когда нет больше изображений найдено - в данном случае на 106 изображений

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(); 

Answer 2

Функция checkIfImageExists() является причиной. Я понимаю, что вы пытаетесь выполнить, но вы проверяете ширину, не задавая время загрузки изображения. Вы должны привязываться к onload и onerror для объекта изображения. (См. http://lucassmith.name/2008/11/is-my-image-loaded.html).

Если вы действительно хотите, чтобы эти изображения загружались асинхронно, этот цикл очень опасен, вам будет лучше, уже зная верхний предел, а не пытаться угадать. Если вы хотите асинхронно и имеете неизвестный макс ... тогда вы должны накладывать ограниченное количество изображений сразу для загрузки (а также добавлять некоторый тип setInterval. В противном случае с этой настройкой к моменту, когда ваш сервер вернет 404 для изображения, сценарий был бы уже пытался загрузить несколько тысяч недействительных изображений.

Если вам нужен пример кода, дайте мне знать, но это должно, по крайней мере момент вы в правильном направлении.