获取javascript预加载图像的大小

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

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

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

refresh:function（）{
var newSrc='/screenshot.ashx？tick='+new Date（）.getTime（）；
var imgObj=新图像（）；
var self=这个；
//加载完成时调用此函数
imgObj.onload=函数（）{
//如果（imgObj.完成）
//返回；
如果（imgObj.width>1和&imgObj.height>1）{
output.innerHTML+='
更新图像：'+newSrc；
img.src=newSrc；//fiddler在这里不显示重载，从缓存读取
}
否则{
output.innerHTML+='
空图像：'+newSrc；
}
self.setupNewRefresh（）；
};
output.innerHTML+='
正在加载图像：'+newSrc；
imgObj.src=newSrc；
},

我似乎有两个问题：

a） 第一次调用函数时imgObj.complete为false，但只调用了一次（因此我将其注释掉），并且

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

我的最终目标是有一小块javascript逻辑，定期向服务器查询新图像，如果没有新图像发生（1像素图像），则什么也不做，或者加载新图像。我可能走错了方向，或者忽略了重要的属性或电话，所以我很高兴收到反馈

---

编辑：根据mplungjan的建议，我将其预加载到一个隐藏的div中，这有助于解决问题b）。但问题a）仍然没有解决方案；reports complete=false一次，不再调用

我继续回答我自己的问题

将图像预加载到DOM中的隐藏元素而不是代码级元素中是获得正确大小的诀窍（感谢mplungjan）。a）问题，即完整事件，仍未解决

---

作为补充说明，我最终使用了XMLHttpRequest，因为它允许查看返回的有效负载的大小。

似乎您确实需要将图像加载到dom中才能查看实际大小。我使用了一个隐藏的div来实现这一点。您正在加载调用中为src属性指定一个值。。。（img.src=newSrc；）我认为这不是必需的。当图像出现时，它会自动从缓存重新加载。把它留给浏览器。

        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;
    },