ajax infinate scroll to preload content

Question

I have an infinate scrolling function that loads data via ajax. I would like to load the next set of data or at least, images in advance - preload the next page of content.

I have tried adding .load instead of .ajax - but it still seems to load the data directly not from a 'cached' version.

Any ideas appreciated.

jQuery(document).ready(function($) {
        var count = 2;
        var total = <?php echo $wp_query->max_num_pages; ?>;
        var ready = true; //Assign the flag here
        var processing;

        $(window).data('ajaxready', true).scroll(function() {
                if ($(window).data('ajaxready') == false) return;

                if  ($(window).scrollTop() == ($(document).height() - $(window).height())){
                    $(window).data('ajaxready', false);
                    if (count > total){
                        return false;
                    }else{
                        loadArticle(count);
                    }
                    count++;
                    }

        });

        function loadArticle(pageNumber){
              $('a#inifiniteLoader').show('fast');
                $.ajax({
                    url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
                    type:'POST',
                    data: "action=infinite_scroll&page_no="+ pageNumber + '&loop_file=loop',
                    success: function(html){
                      $('a#inifiniteLoader').hide('1000');
                      $(".newsfeed").append(html);   // This will be the div where our content will be loaded
                      console.log('fire');
                    //stop multiple firing
                      $(window).data('ajaxready', true);
                    }
                });
            return false;
        }

});

Answer 1

First I should say what is infinite scroll:

Traditionally, the user would have to click on next page or previous page to visit older post content. However, recently there is a new trend started by popular sites (such as facebook and twitter) in which they automatically load the next page content once the user hits the bottom of the post. This technique has proven to show an increase in time spent on page by the user because the new content loads automatically.

How to Add Infinite Scroll in WordPress

First thing you need to do is install and activate the Infinite Scroll plugin.

Upon activation, a new menu option will be added under your settings tab called Infinite Scroll. On almost 90% of the blog sites, this should work without changing a single setting. However, if you have a relatively custom designed blog, then you will need to adjust the “Selectors”. Go the plugin’s setting page and click on the selectors tab.

plugin

Documentation 1

documentation 2