ajax无限滚动以预加载内容答案

【问题标题】：ajax infinate scroll to preload contentajax无限滚动以预加载内容
【发布时间】：2014-11-20 21:24:57
【问题描述】：

我有一个通过 ajax 加载数据的无限滚动功能。我想提前加载下一组数据或至少是图像 - 预加载下一页内容。

我尝试添加 .load 而不是 .ajax - 但它似乎仍然直接加载数据，而不是从“缓存”版本。

任何想法表示赞赏。

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;
        }

});

【问题讨论】：

标签： javascript ajax wordpress infinite-scroll preloader

【解决方案1】：

首先我要说什么是无限滚动：

传统上，用户必须单击下一页或上一页才能访问较旧的帖子内容。不过，最近有由流行网站（如 facebook 和 twitter）开始的新趋势一旦用户点击，它们就会自动加载下一页内容帖子的底部。该技术已被证明显示出增加由于新内容加载，用户在页面上花费的时间自动。

如何在 WordPress 中添加无限滚动

您需要做的第一件事是安装并激活Infinite Scroll plugin.

激活后，您的设置下将添加一个新菜单选项名为无限滚动的选项卡。在几乎 90% 的博客网站上，这应该可以在不更改单个设置的情况下工作。但是，如果您有一个相对定制设计的博客，那么您将需要调整 “选择器”。转到插件的设置页面，然后单击选择器标签。

plugin

Documentation 1

documentation 2

【讨论】：