Question

我正在尝试使用for循环在div中加载一系列图像，当文件不存在时，for循环中断。这段代码似乎不起作用。

我测试了很多其他但没有成功。有什么提示吗？

HTML：

<div id="project_img">
</div>

JavaScript的：

function load_projects()
  var project_array = new Array();
  var project_name;

  for(var i = 0; i < 7; i++) {
    project_array.push(new Image());

    project_name = "project_" + i;

    project_array[i].src = "images/" + project_name + ".png";
    project_array[i].id = project_name;

    $("#project_img").append(project_array[i]);

    $("#" + project_name).error(function() {
      alert(i);
      i = 7;
    })
  }
}

$(document).ready(function() {
  load_projects();
});

Answer 1

试试这个

function drawImage(i) {

project_array.push(new Image());

var project_name = "project_" + i;

project_array[i].src = "images/" + project_name + ".png";
project_array[i].id = project_name;

$("#project_img").append(project_array[i]);

$("#" + project_name).load(function() {
   if ( i + 1 < 7)
     drawImage(i + 1);  
}) ;  
 }

$(document).ready(function() {
  drawImage(0);
});

var project_array = new Array();

Answer 2

问题是，在for循环结束后（从0到7运行）将调用错误回调。

如果要在加载当前图像时没有错误的情况下开始加载下一个图像，则必须更改策略：您需要成功回调，然后开始加载下一个。如果图像已成功加载，则可以使用jQuerys load方法设置回调：

$("...").load(function() { ... });

如果已加载当前图像并且未显示所有图像，请开始加载下一张图像：

$("#" + project_name).load(function() {
    if (i < 7) {
        load_projects(i + 1);
    }
});

因此不再需要for循环。完整的代码是：

var project_array = new Array();

function load_projects(i) {
    project_array.push(new Image());
    project_array[i].id = "project_" + i;
    project_array[i].src = "images/" + project_array[i].id + ".png";

    $("#project_img").append(project_array[i]);

    $("#" + project_array[i].id).load(function() {
        if (i < 7) {
            load_projects(i + 1);
        }
    });
}

$(document).ready(function() {
    load_projects(0);
});

不是必要的，但如果您需要，可以再次添加错误回调：

    ...
    $("#" + project_array[i].id).error(function() {
        alert('error at ' + i);
    });
    ...

另见jsfiddle。（我在那里添加了一个现有图像。）

对于遇到不存在的图像时的循环中断

2 个答案: