如何加速对同一div的连续JQuery load（）请求

我有两个链接

<a href="page1.html">page 1</a>
<a href="page2.html">page 2</a>

<div id="content">&nbsp;</div>

2.单击第二个链接时，我清空div

$('#content').html('');

3.并在中加载第二个文件

$('#content').load('page2.html');

问题，page1.html中有大量图像，即使在单击第二个链接并清空#content div后，浏览器仍会从page1.html下载图像，这会显著降低对page2.html的请求速度

如何阻止首次加载（）的内容向浏览器发出请求并加快页面响应速度

---

无限感谢你

我怀疑问题不在于load（）方法，而在于加载请求完成后更新DOM时生成的请求。一旦启动了对图像的请求，我认为除了重新加载页面之外，没有任何方法可以阻止处理这些请求。您可以在单击第二个链接时检查请求是否已被处理，并在请求仍在进行时重新加载页面，而不是使用AJAX。不过，我不确定这是否真的值得。

我认为您无法使用load。我想你需要用这个

从文档中：

$.ajax（）返回它创建的XMLHttpRequest。在大多数情况下，您不需要直接操作该对象，但如果您需要手动中止请求，则可以使用该对象

这是更多的代码，但不应该那么糟糕。您可能需要调整此代码（它未经测试），但我认为这个概念会起作用

var xhr;

$("a").click(function() { 
  if(xhr !== undefined) { xhr.abort(); } 
  xhr = $.ajax({
    url: this.href,
    success: function(data) {
       $("#content").html(data);
    }
  });
});

---

是否可以取消此页面的AJAX功能？据我所知，大多数浏览器在离开页面时都会停止加载页面（第1页）。AJAX的全部目的是开发响应性强的web应用程序。在这种情况下，AJAX似乎对这一目标适得其反。我的猜测是，除了

#content

div中的内容外，重新加载页面中的所有内容要比完成加载第1页快。

我可以建议删除问题标题中的“从缓存页面”吗？这有点误导：）谢谢，这让我更清楚地认识到了这个问题的本质：）我将查看lazy load jQuery插件，它似乎有一个图像加载控制系统：）我更新了这个问题，因为最初的问题基于错误的逻辑。谢谢！我想我可以在下一个onclick事件中使用函数abort（）{xhr.abort（）；}取消上一个ajax请求，是吗？这是我的想法-我不确定的是请求完成后xhr的值。事实上，我猜它不是未定义的。我将在代码中添加xhr=undefined，如果不需要的话，可以去掉它。你是对的，它不是未定义的。我可以问一下您最后一行“xhr=undefined”的用途吗；我们是否应该保持xhr不变，以便在下一次单击时，您的xhr.abort（）；行吗？我使用了你的代码，没有最后一行“xhr=undefined”，它确实加快了页面响应速度，非常感谢！我仍然对这行代码的用途感到好奇，顺便说一句：）实际上，大多数xhr代码可能都可以使用。你可以去掉if语句，把赋值给undefined。这是真的，我的Ajax实现是一个非常“适得其反”的过程。我想现在，我需要一个新的实现。一种在加载到浏览器缓存时将新图像从page1.html引入内容的方法，如果请求page2，可以提前取消该过程。这样不仅速度更快，还可以节省带宽，使页面加载更愉快。我将研究用于JQuery的lazyload插件以获得新的想法。我想你没有领会我文章的要点：我的建议是不要使用JQuery将数据加载到页面中（这是基本的“AJAX”技术），而是以更传统的方式加载一个全新的页面。这允许浏览器而不是您的脚本处理取消/不发送请求的操作，并且基于单击一些高图像密度页面，然后在它们有机会加载之前单击链接，它将工作（在Firefox、Safari、IE8和Chrome中，都在Windows上）。我理解，尽管我正在尝试创建一个客户端包含，它将取代php包含的需要。我知道这可能是错误的搜索引擎优化水平。尽管我下定决心要让它更有反应力。

var xhr;

$("a").click(function() { 
  if(xhr !== undefined) { xhr.abort(); } 
  xhr = $.ajax({
    url: this.href,
    success: function(data) {
       $("#content").html(data);
    }
  });
});