2

我正在尝试将服务器上生成的许多图像预加载到一个小型网站。预加载使用 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 为假，但只调用一次（因此我将其注释掉）和

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

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

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

4

1 回答 1

1

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

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

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

于 2010-07-26T09:20:13.407 回答