title: How can I load AJAX data in the background, without a performance impact?
body: <p>I have a very large product catalog, that I'm trying to load in "Pages" of, say, 10 items at a time.</p>
  
  <p>Now, if a user opens my catalog, and spends 30 seconds browsing the first "page", I want my app to keep loading data from the server - so that by the time the user goes to a different page, odds are high that its data will be already loaded to their browser.</p>
  
  <p>I've managed to do so with a recursive Ajax.Request, that after a page is loaded, loads the next page.</p>
  
  <pre><code>Controller.prototype.loadVarieties = function(varietyNames){
      //Loads varieties from the catalog, checks if more varieties need to be loaded, and keeps loaded them.
      new Ajax.Request("../GetVarieties.php", {
                  method: 'get',
                  parameters: {'varietyNames': varietyNames.toJSON()},
                  onSuccess: function (response) {
                      this.model.parseCatalog(response.responseText);
                      var varietyNames = this.model.getVarietiesToLoad();
                      if(varietyNames.length != 0){
                          this.loadVarieties(varietyNames);
                      }
                  }.bind(this)
              });
  }
  </code></pre>
  
  <p>Unfortunately, this is causing performance problems - the browser responds to user input very slugglishly until the entire catalog is loaded. (At which point, I may as well either load the entire catalog, or not do background loading).</p>
  
  <p>What could I do to implement low-priority background loading of the data? Is it even possible? Should I give up and just do lazy loading?</p>