javascript - 获取javascript预加载图像的大小

Question

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

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

下面是我当前解决方案的一个片段(输出是一个有助于调试的 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)；报告 complete = false 一次，不再调用

Answer 1

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

将图像预加载到 DOM 中的隐藏元素而不是代码级元素是实际获得正确尺寸的技巧(感谢 mplungjan)。 a) 问题，即完整事件，仍未解决。

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