当遇到不存在的图像时出现循环中断

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

来源

2011-10-18 Ray Tsai

我假设在函数load_projects（）后面缺少''''是一个错字？否则，我没有看到什么是坏的，for循环的作品，我得到了一堆无效的图像：http://jsfiddle.net/fEQgJ/ – deviousdodo

嘿感谢回复，是的for循环工作但我试图尽快停止for循环图像不存在，这就是为什么我改变i = 7 但循环不会停止，它仍然加载无效图像：s –

的问题是，该错误回调将被称为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); 
});

不neccessary，但如果你愿意，你可以再次添加错误回调：

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

也看到我的jsfiddle。（在那里我添加了一个现有的图像。）

来源

2011-10-18 07:09:02 scessor

谢谢！它真的很详细，为什么错误回调只会在for循环完成后运行，是不是嵌套在for循环中？ –

jQuery错误方法只添加一个回调并继续。事件将从函数外部触发，并仅在发现错误时调用回调。（然后for循环已完成。） – scessor

谢谢我认为我知道了=）只是再次检查错误（）描述，它解释说，'错误事件发送到元素，如图像，引用一个文件，并由浏览器加载“ –

试试这个

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

来源

2011-10-18 07:08:13 sathis

干杯兄弟！感谢您的输入 –

当遇到不存在的图像时出现循环中断

回答

相关问题