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

Question

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

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

我可以做类似的事情：

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

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

我找到了一种预加载图像的方法，但没有找到将其应用到网页的方法（实际上来自堆栈溢出）。我可以：

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

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

坦克寻求任何帮助。

score 0 · Accepted Answer

加载后，将图像 src 设置到您在幕后加载的相同位置，它将（理论上）从缓存中拉出并显示给用户。

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

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

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

1 回答 1