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

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

本文关键字：输出 一次 数组元素 为什么      更新时间：2023-09-26

这段代码有什么问题：

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

演示

为什么它不一次输出所有数组元素？同时，每次我按下运行按钮时，它都会输出 n+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();

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

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

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

相关文章：