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

你的checkIfImageExists（）函数是原因。我理解你要完成的是什么，但是你正在检查宽度而不给图像加载时间。您应该绑定到图像对象的onload和onerror。（有关详细信息，请参阅http://lucassmith.name/2008/11/is-my-image-loaded.html）。

如果你真的希望这些图像是异步加载的，那么这个while循环是非常危险的，你最好已经知道了上限而不是试图猜测。如果你确实想要异步并且有一个未知的最大值...那么你应该一次性加入有限数量的图像来加载（以及添加某种类型的setInterval。否则，使用这种设置，当你的服务器返回一个时）对于图像404，您的脚本已经尝试加载数千个无效图像。

如果您需要一个代码示例，请告诉我，但这至少应该指向正确的方向。

Answer 2

这是我的重写

找不到更多图像时

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

为什么不一次输出所有数组元素？

2 个答案: