获取 javascript 预加载图像的大小

Question

我正在尝试将服务器上生成的许多图像预加载到一个小网站上。预加载是使用 setWindowTimeout 完成的，并使用 Image 对象，设置 onload 回调，然后应用新的请求 uri。

对于某些请求，服务器可能必须发出图像“未更改”的信号，我通过发送完成的一个小 1x1 像素 gif 来做到这一点（似乎我需要发送实际图像，返回空内容将导致 Image 对象以免在加载时触发）。在我的 onload 处理程序中，我想确定所获取图像的大小，然后确定是否应该使用给定图像更新视觉图像。

下面是我当前解决方案的一个片段（输出是一个 div 来帮助调试）：

        refresh: function() {
        var newSrc = '/screenshot.ashx?tick=' + new Date().getTime();
        var imgObj = new Image();
        var self = this;

        // this is called when load is done
        imgObj.onload = function() {
            //if (imgObj.complete) 
            //  return;
            if (imgObj.width > 1 && imgObj.height > 1) {
                output.innerHTML += '<br/>Updating image:' + newSrc;
                img.src = newSrc; //fiddler shows no reload here, read from cache
            }
            else {
                output.innerHTML += '<br/>Empty image:' + newSrc;
            }
            self.setupNewRefresh();
        };

        output.innerHTML += '<br/>Loading image:' + newSrc;
        imgObj.src = newSrc;
    },

我似乎有两个问题：

a）首次调用该函数时 imgObj.complete 为 false，但仅调用一次（因此我的评论它出来）和

b）我似乎不能依赖加载时图像的宽度或高度属性。从我获取 1x1 像素的测试来看，它有时会读出 50，这似乎是创建新 Image() 时的默认值，有时它会读出正确的大小 1。

我的最终目标是拥有一小块 javascript 逻辑定期向服务器查询新图像，如果没有发生任何新情况（1 像素图像），则不执行任何操作或加载新图像。我可能在这里采取了错误的方式，或者忽略了重要的属性或电话，所以我很高兴收到反馈。

编辑：根据 mplungjan 的建议，我改为预加载到隐藏的 div 中，这帮助我解决了问题 b)。尽管如此，仍然没有解决问题a)；报告完成 = false 一次并且不会再次调用

Answer 1

我将继续回答我自己的问题。

将图像预加载到 DOM 中的隐藏元素而不是代码级元素中是实际获得正确大小的技巧（感谢 mplungjan）。 a) 问题，即整个事件，仍然没有解决。

作为旁注，我最终使用 XMLHttpRequest 代替，因为它允许查看返回的有效负载的大小。