Question

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

对于某些请求，服务器可能必须发出图像“未更改”的信号，并且我是通过发送一个小的1x1像素gif来做的（似乎我需要发送一个实际图像，返回空内容将导致Image对象不会触发onload）。在我的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）;报告完成=假一次，不再被调用

获取javascript预加载图像的大小

1 个答案: