当遇到不存在的图像时，For循环中断

For loop breaks when it encounters an image that doesn't exist

本文关键字：For 循环 中断 图像 遇到 不存在      更新时间：2023-09-26

我试图在使用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();
});

问题是，错误回调将在for循环完成后被调用(从0运行到7)。

如果你想在加载当前图像没有错误的情况下开始加载下一张图像，你必须改变你的策略:你需要一个成功的回调，它开始加载下一张。jquery的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。(我已经添加了一个现有的图像)

试试这个

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();
相关文章：