javascript - 为什么我的程序表现为好像在服务器上找不到图像？

我已经有一个库，可以用javascript加载图像构建元素，如下所示：

$(window).load(function() {
    $("#getElement").click(function() {
        for (var i = 1; i <= 10; i++) {
            var ancla = document.createElement("A");
            var img = document.createElement("IMG");
            var text = document.createTextNode("");
            img.src = 'images/tile' + i + '.jpg';
            img.id = "image";
            img.appendChild(text);
            ancla.href = 'images/tile' + i + '.jpg';
            ancla.className = "boxing";
            ancla.appendChild(text);
            document.getElementById("gallery").appendChild(ancla);
            ancla.appendChild(img);
            loadimage('images/tile' + i + '.jpg');
        }
    });
});

我想提出一个条件，即加载画廊的图像，如果它们存在于服务器或它们存储的任何地方。为此，我在脚本中声明了一个名为“warning”的全局变量，在加载库的每个图像的函数中使用该变量，该变量是布尔值，如果至少找到一个图像，则变为true；如果没有找到图像，则变为false。这个函数是：

var req, image, imagepath;
var warning = false;

function d(o) {
    return document.getElementById(o);
}

function loadimage(imgpath) {
    image = d("image");
    image.style.display = "none";
    imagepath = imgpath;
    req = getreq();
    req.onreadystatechange = imagexists;
    req.open("get", imagepath, true);
    req.send(null);
}

function imagexists() {
    if (req.readyState == 4) {
        if (req.status == 200) {
            warning = true;
            image.style.display = "block";
            image.src = imagepath;
        } else {
            image.style.display = "none";
            warning = false;
        }
    }
}

function getreq() {
    if (window.XMLHttpRequest) return new XMLHttpRequest();
    else if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
}

在click函数的for语句之后，我将条件的代码

if (warning == true) {
    $("#gallery").justifiedGallery({
        filter: false,
        rowHeight: 180
    });
} else {
    $("#dynamicCont").load('noImage.txt');
}

这是代码不能正常工作的地方，因为即使函数loadimage（）找到了一个图像，它总是在条件的else中输入我有什么遗漏吗？或者用其他方法让它正常工作？

最佳答案

可能发生的是这段代码：

if (warning == true) {
    $("#gallery").justifiedGallery({
        filter: false,
        rowHeight: 180
    });
} else {
    $("#dynamicCont").load('noImage.txt');
}

在您对服务器的请求完成之前正在运行。请记住，这是一个异步请求。
只需将代码移到回调函数中，如下所示：

function imagexists() {
  if (req.readyState == 4) {
    if (req.status == 200) {
      image.style.display = "block";
      image.src = imagepath;

      $("#gallery").justifiedGallery({
        filter: false,
        rowHeight: 180
      });

    } else {
      image.style.display = "none";
      $("#dynamicCont").load('noImage.txt');
    }
  }
}

这样就不需要警告布尔值了。