javascript - 缺乏对 AJAX 预加载的理解(附示例)

Question

我正在通过 jQuery 的 .load() 交换页面内容例如，在 page1.html 上我有:

$('#wrapper').fadeOut(2500, function() {
  $(this).load('page2.html', function() {
      $(this).fadeIn(2500);
  });
});

page2.html content 包含一些相当大的图像，我试图在 page1.html 上预加载它们通过$.get() :

$.get('img/largeImage1.jpg');
$.get('img/largeImage2.jpg');
// etc...

从我读过的所有内容来看，我的做法是正确的。问题是，在 Firefox 中，当我第一次尝试显示 largeImage2.jpg 时(它最初是用 CSS 隐藏的)，它会短暂地显示为损坏的图像。在 page2.html 上的图像标签中进行硬编码(或通过不同方法“预加载”)时，不存在损坏的图像，即放置 <img src="img/largeImage2.jpg" style="display: none;"> 页面某处。

为什么 $.get() 没有方法工作？难道我做错了什么？为什么 Firefox 在加载图像之前会显示几分之一秒的损坏图像？是 jQuery 的 .load()清空浏览器的缓存/缓冲区，这样我的预加载尝试就没用了吗？怎么回事？

Answer 1

我怀疑 $.get 并没有真正按照您的想法行事。如果图像不在 DOM 中的某个地方，浏览器就没有理由缓存它。 $.get 只是将资源作为 AJAX 流获取，并不将其插入到 DOM 中。

参见 this SO answer来自一些看起来更安全的预加载替代方法。