0

这段代码有什么问题：

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

​<a href="http://jsfiddle.net/rEA7k/7/" rel="nofollow">演示

为什么它不一次输出所有数组元素？同时，每按一次运行按钮，它就会输出 n+1 个数组元素。怎么来的？

4

2 回答 2

1

这是我的重写

找不到更多图像时演示停止 - 在本例中为 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();
于 2012-06-17T21:29:31.273 回答
1

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

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

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

于 2012-06-17T19:13:44.390 回答