Question

i have two links

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

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

1. I use JQuery to load them into a Div when the links are clicked.

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

2. When the second link is clicked I empty the div

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

3. and load the second file in;

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

The problem, page1.html has alot of images in it, even after the second link is clicked and the #content div is emptied, the browser keeps downloading the images from page1.html and this slows down the request to page2.html significantly.

How can i stop the content from the first load() from making requests to the browser and speed up the page response?

Thank you infinity!

Answer 1

I don’t think you’ll be able to use load. I think you’ll need to use the ajax function.

From the docs:

$.ajax() returns the XMLHttpRequest that it creates. In most cases you won’t need that object to manipulate directly, but it is available if you need to abort the request manually.

It’s more code, but shouldn’t be that bad. You will probably need to tweak this code (it’s untested), but I think the concept will work.

var xhr;

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