Question

我想要加载几张图片。每个都连接到一个处理程序，用于检查是否所有图像都显示，如果是，则将它们显示在画布上。

目前在顶部有一个console.log（）的处理程序是：

POCKETWATCH.check_draw_clock = function()
    {
    console.log("check_draw_clock");
    POCKETWATCH.images_loaded_count += 1;
    if (POCKETWATCH.images_loaded_count ==
      POCKETWATCH.total_images_available * 2)
        {
        POCKETWATCH.draw_clock();
        }
    }

我开始加载图片：

console.log('Starting images.');
POCKETWATCH.clock_face = new Image();
POCKETWATCH.clock_face.onload = POCKETWATCH.check_draw_clock;
POCKETWATCH.clock_face.src = 'img/transparent-clock.png';
POCKETWATCH.hour_hand = new Image();
POCKETWATCH.hour_hand.onload = POCKETWATCH.check_draw_clock;
POCKETWATCH.hour_hand.src = 'img/hour-hand.png';
POCKETWATCH.minute_hand = new Image();
POCKETWATCH.minute_hand.onload = POCKETWATCH.check_draw_clock;
POCKETWATCH.minute_hand.src = 'img/minute-hand.png';
POCKETWATCH.second_hand = new Image();
POCKETWATCH.second_hand.onload = POCKETWATCH.check_draw_clock;
POCKETWATCH.second_hand.src = 'img/second-hand.png';
POCKETWATCH.dial_hand = new Image();
POCKETWATCH.dial_hand.onload = POCKETWATCH.check_draw_clock;
POCKETWATCH.dial_hand.src = 'img/dial-hand.png';
console.log('Images all started.');

此后的控制台没有错误，只是＆＃34;启动图像。＆＃34;和＆＃34;图像全部开始。＆＃34;，没有＆＃34; check_draw_clock＆＃34;并没有错误。图像是从我的另一个项目复制的，据我所知，有适当的文件系统权限等，图像都在那里。

如何在没有引用回调函数且没有报告错误的情况下获取加载图像的语句？

- UPDATE -

在回答第一个答案时，我评论了我现有的代码并添加了变异的内容：

['img/transparent-clock.png','img/hour-hand.png','img/second-hand.png','img/dial-hand.png'].forEach(function(src)
    {
    var img = new Image();
    // img.onload = POCKETWATCH.check_draw_clock;
    img.onerror = function(){ console.log("error"); };
    img.src = src;
    if (img.complete) { POCKETWATCH.check_draw_clock(); }
    console.log(POCKETWATCH.check_draw_clock);
    POCKETWATCH.check_draw_clock();
    });

这不是一种解决方案，而是用于诊断目的。最后一行实际代码记录了POCKETWATCH.check_draw_clock＆＃34;不是函数的错误，＆＃34;然后当我记录POCKETWATCH.check_draw_clock时，它记录了＆＃34; undefined＆＃34;。

我查看了我的代码，看看我是否重新定义了POCKETWATCH;在与应用程序关联的整个代码中，唯一定义POCKETWATCH的时间高于引用的代码，其中它被设置为{}。 check_draw_clock（）也只定义了一次。

FWIW。

Answer 1

检查图像是否已完整缓存

['img/transparent-clock.png','img/hour-hand.png','img/second-hand.png','img/dial-hand.png'].forEach(function(src){ 
    var img = new Image();
    img.onload = POCKETWATCH.check_draw_clock;
    img.onerror = function(){ console.log("error"); };
    img.src = src;
    if (img.complete) { POCKETWATCH.check_draw_clock(); }
});

Answer 2

一直到console.log check_draw_clock（），发现POCKETWATCH的定义是在我引用之后，而不是之前。现在记录是有意义的。

为什么我没有获得onload处理程序？

2 个答案: