通过AJAX加载内容和预加载图像？

Question

假设我有以下代码：

$(function() {
    $('a').click(function(e) {
        e.preventDefault();
        var h = $(this).attr('href');
        $('#content').load(h);
    });
});

那实际上并没有加载图片，只是加载了内容，那么如何加载实际的图片呢？有些人似乎不理解：我的意思是它确实加载了图片，但并没有“预加载”，这意味着您会看到逐个加载图片。编辑：假设href等于somepage.html，并且该页面上有图像和内容，则它将加载图像和内容，但实际上它根本没有预加载图像，您仍然会逐个看到图像加载。那么如何在请求本身中预加载图像呢？

- daryl

---

任何从 $(this).attr('href') 加载的 img 标签都应该能够加载图像，没有任何理由不行。你在错误控制台上（或 JavaScript 控制台，取决于浏览器）看到了什么错误吗？ - Chris Laplante

@SimpleCoder 我猜你并没有完全理解问题的本质，是的，图片已经被加载了，但并没有进行“预加载”，这意味着你正在观察图片的加载过程。 - daryl

这些图片在它们的 src 中是否使用了相对路径，可能无法从你加载内容的 HTML 页面中正确引用文件？ - David Thomas

你应该明确指定你想要预加载图片。现在的问题措辞有点令人困惑。 - Chris Laplante

因此，图像会在onready $(function()中调用，该函数在页面加载后触发，您希望在onready之前加载图像？ - jk.

@SimpleCoder，我觉得我们都受到了侮辱。我认为这很荒谬，因为OP说：“实际上它并没有加载图片，只是加载内容，你如何加载实际的图片？” - jk.

Answer 1

尝试这个：

1. 隐藏 #content div，并调用它的 load 方法。这将在不可见的情况下加载内容，以便用户不会看到图片在之后加载。
2. 绑定每个图像的 load 事件处理程序，当它们全部触发时，重新显示 #content div。

参考此答案：AJAX 响应中如何确定图像何时完成加载。它会向您展示需要做什么。

- Chris Laplante

---

有趣的方法，让我再试一下。谢谢。 - daryl

他需要为每个图像绑定单独的事件处理程序吗？使用$('#content').load(function(){...});不是可以让他知道所有图像何时加载完毕吗？注意：我不是在谈论jQuery的AJAX load方法。他使用它来加载带有图像的HTML。我说的是重载的load函数：http://api.jquery.com/load-event/。这将在`#content`内的所有元素完全加载后触发... - Joseph Silber

他仍然需要为每个图像绑定一个处理程序。我认为在#content上添加事件处理程序不起作用，因为load事件不会冒泡。 - Chris Laplante

Answer 2

点击此处查看如何预加载您的图像的示例；

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

- Roger