javascript - jquery从php脚本预加载图像然后显示

Question

我已经四处寻找这个案例并接近了，但我在完成它时遇到了问题。

我有一个可以创建图表的 PHP 脚本。它通过创建一个 png img 然后使用标题将图像显示到页面来实现这一点。

我可以做这样的事情:

$('#img').attr('src', 'url.php?make_graph=1');

这有效。问题是，我有一些图表需要相当长的时间才能创建，甚至超过一分钟，而在发生这种情况时，图像只是空白，网页看起来什么也没做。

我找到了一种预加载图像的方法，但没有找到将其应用到网页的方法(实际上来自堆栈溢出)。我能做到:

$('<img/>', {
    'src': 'url.php....',
    'load': function(){ alert("loaded!"); }
}); 

所以我的问题是，我可以以这样的方式加载图像并以某种方式将其应用到页面上的现有图像吗？我不确定这句话是否很清楚......我错过了可以实际显示由脚本制作的预加载图像的部分。如果可能的话，我想避免保存图像或使用 iframe。

坦克寻求帮助。

Answer 1

加载后，将图像 src 设置为您在后台加载的同一位置，它将(理论上)从缓存中提取并显示给用户。

$("<img>", {
    "src": "url.php...",
    "load": function() {
        alert("loaded!");
        $("#foo").attr("src", "url.php...");
    }
});​

这是我整理的一个例子。它首先在页面上加载一张图像，然后在后台加载另一张图像。当您确认警报消息时，它将通过更改 src 来交换图像。我确认它使用 Chrome 开发工具从缓存中提取图像。 http://jsfiddle.net/uVFLD/1/

可能还有另一种方法来解决这个问题，但这是我想到的第一个解决方案。