所以我基本上将多个图像加载到多个 Canvas 上(每个 Canvas /ctx 一个图像 - 它是一个幻灯片)。我想确保在尝试将图像绘制到 Canvas 上之前加载每个图像。
这是代码...
- 在示例 1 中,我使用了 3 个 onload 事件(每个图像一个)
- 在示例 2 中,我使用了一个 onload 事件,但它是 for 循环中调用的最后一张图像
问题:我可以使用示例 2 并确信如果加载了最后一张图片,那么之前的图片也必须加载吗?
另外---- 我已经尝试过了,但是这一切都可以在 for 循环中完成吗?我无法让它工作。 参见示例 3
例1 3 onload事件
var img=[0,'slide1','slide2','slide3'];
for (var i=1;i<=3;i++) {
img[i] = new Image();
img[i].src = '/images/slide' + i + '.png'
}
img[1].onload = function() { // checks to make sure img1 is loaded
ctx[1].drawImage(img[1], 0, 0);
};
img[2].onload = function() { // checks to make sure img2 is loaded
ctx[2].drawImage(img[2], 0, 0);
};
img[3].onload = function() { // checks to make sure img3 is loaded
ctx[3].drawImage(img[3], 0, 0);
};
例子2只有最后一个onload事件
var img=[0,'slide1','slide2','slide3'];
for (var i=1;i<=3;i++) {
img[i] = new Image();
img[i].src = '/images/slide' + i + '.png'
}
img[3].onload = function() { // checks to make sure the last image is loaded
ctx[1].drawImage(img[1], 0, 0);
ctx[2].drawImage(img[2], 0, 0);
ctx[3].drawImage(img[3], 0, 0);
};
例3for循环中的一个onload来完成所有的onload事件
var img=[0,'slide1','slide2','slide3'];
for (var i=1;i<=3;i++) {
img[i] = new Image();
img[i].src = '/images/slide' + i + '.png'
img[i].onload = function() { // checks to make sure all images are loaded
ctx[i].drawImage(img[i], 0, 0);
};
}
我假设我不能执行示例 3,因为在 for 循环第二次运行时可能不会加载图像,并为下一个图像重写 onload 事件,从而删除前一个图像的 onload 事件。正确吗?
最佳答案
由于闭包,您将遇到最后一个 for 循环的范围问题。为了使这样的事情起作用,您需要通过将您的功能分配封装在它自己的功能中来打破闭包。 This article解释得很好。
理想情况下,您的最后一个 for 循环看起来像这样:
var images = [0,'slide1.png', 'slide2.png', 'slide3.png'];
// Assign onload handler to each image in array
for ( var i = 0; i <= images.length; i++ ){
var img = new Image();
img.onload = (function(value){
return function(){
ctx[value].drawImage(images[value], 0, 0);
}
})(i);
// IMPORTANT - Assign src last for IE
img.src = 'images/'+images[i];
}
此外,请记住,在为某些 IE 版本定义了 onload 处理程序之后,您需要分配 img.src 属性。 (这个小花絮上周花了我一个小时的故障排除时间。)
关于javascript - 如果我用 for 循环加载多张图片,我只需要一个 img.onload 函数吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7641588/