Question

我有两个链接

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

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

1。点击链接时，我使用JQuery将它们加载到Div中。

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

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

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

3。并加载第二个文件;

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

问题，page1.html中有很多图片，即使点击第二个链接并清空了#content div，浏览器也会继续从page1.html下载图片显着减慢了对page2.html的请求。

如何阻止第一个load（）中的内容向浏览器发出请求并加快页面响应？

谢谢无限！

Answer 1

我认为你不能使用负载。我想你需要使用ajax function。

来自文档：

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

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

var xhr;

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

Answer 2

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

Answer 3

是否有可能取消AJAX-ify这个页面？我知道的大多数浏览器在离开时都会停止加载页面（第1页）。 AJAX的重点是制作响应式Web应用程序。在这种情况下，AJAX似乎会对这一目标起反作用。我的猜测是，除了#content div中的内容之外，重新加载页面中的所有内容将比完成加载page1更快。

如何加快对Same div的顺序JQuery load（）请求

3 个答案: