Question

我有一段jquery在我的博客上加载新帖子，问题是它运行两次意味着帖子重复。我还想找到一种方法，让用户在文档底部仍然只有50像素的情况下运行它。（图中很简单）。

在调整代码之前，我在获取代码的网站上报告了该错误： http://blog.hycus.com/2011/03/15/infinite-scrolling-like-new-twitter-with-php-mysql-jquery

一条评论建议使用.data（），但我不确定这是怎么回事。此代码从一个单独的js文件运行，其中包含正文文本中的链接。 Firebug报告了两个帖子请求，最后我发布了两次博客帖子。

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop() === $(document).height() - $(window).height()){
            $('div#loadmoreajaxloader').show();
            $.post("blog/loadmore", {pid: $(".blogpost:last").attr("id")}, function(html){
                if(html){
                    $("#bloglist").append(html);
                    $('div#loadmoreajaxloader').hide();
                }else{
                    $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                }
            });
        };
    });
});

我不能回答我自己的问题......我解决了它：

这似乎解决了我的问题，如果有人有更好的解决方案，请告诉我。

还尝试了一些事情来使页面加载在到达页面末尾之前发生（我想如果（$（window）.scrollTop（）+ 50 === $（document）.height（） - $（window）.height（））可能会做到这一点）但是它们没有用。

var lid = $(".blogpost:last").attr("id");
$(document).ready(function() {
$(this).scrollTop(0);

$(window).scroll(function() {
    if ($(window).scrollTop() === $(document).height() - $(window).height()) {
        if(lid !== $(".blogpost:last").attr("id")){
            $('div#loadmoreajaxloader').show();
            $.post("blog/loadmore", {
                pid: $(".blogpost:last").attr("id")
            }, function(html) {
                if (html) {
                    $("#bloglist").append(html);
                    $('div#loadmoreajaxloader').hide();
                } else {
                    $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                }
            });
            lid = $(".blogpost:last").attr("id");
        }
    };
});

}）;

Answer 1

查看该代码，我并不特别喜欢它的设置方式。该脚本需要对元素进行一些缓存，因此您不会一遍又一遍地调用相同的选择器。

我在inproc匿名函数回调中使用了onDOMReady（进程中）变量。这是在顶层设置的，但是由于匿名函数提供的闭包，该变量将保持对包含函数可用。在这里，我测试它是否true。

您将看到我将所有jQuery调用移至开头并将其添加为变量。这称为缓存，有助于防止在同一脚本中反复发出相同的请求。效率更高。请注意，$('div#id')可以使用，但不必为id添加前缀;只需从id开始，例如$('#id')。之前的任何事情都是非常不必要的，IMO。

我还设置了200px预加载距离。 50px并不像你想象的那么高;它几乎没有注意到它的不同之处。

超时完全是为了延迟加载内容，以便您可以测试滚动。打开Firebug以查看console.log()消息。

此脚本对测试相关的变量和函数很重要，但您应该能够删除任何“出于测试目的”或其中的一些变体，并使其正常工作。

// For test purposes.
var i = 0;

$(document).ready(function(){
    var inproc = false,
        id,
        $win = $(window),
        $doc = $(document),
        $bloglist = $("#bloglist"),
        $loadmore = $('#loadmoreajaxloader'),
        // For test purposes.
        dummycontent = $('.dummycontent').html(),
        loadtimeout = false;

    // Note, load is for testing; it goes with the setTimeout().
    var callbackBlogLoaded = function(html){
        var self = this;

        // For testing purposes.
        if (loadtimeout !== false) {
            loadtimeout = false;

            setTimeout(function(html){
                callbackBlogLoaded.call(self, html);
            }, 3000);

            return false;
        }

        inproc = false;

        // For test purposes.
        i++;
        html = dummycontent;
        if (i > 5) html = '';

        if (html) {
            // For test purposes.
            $bloglist.append('<p style="color: red; font-weight: bold;">i is ' + i + ' of 5 total</p>' + html);
            $loadmore.hide();
        } else {
            // <center> is deprecated; use a class on a P or DIV instead.
            $loadmore.html('<p class="center">No more posts to show.</p>');
        }
    };

    // For test purposes.
    $bloglist.append($('.dummycontent').html());

    $win.scroll(function(){
        // You need to subtract the scroll-load pad distance from the
        // right-side height calculation, not .scrollTop().
        if ($win.scrollTop() > ($doc.height() - $win.height() - 200)){
            if (inproc == true) {
                // For testing purposes.
                console.log('Content load blocked: In process with another request.');

                return false;
            }

            inproc = true;
            id = $bloglist.has(':last').attr('id');

            // For test purposes
            id = 10;
            loadtimeout = true;

            $loadmore.show();

            // The /echo/html/ is for testing purposes.
            $.post("/echo/html/", { pid: id }, callbackBlogLoaded);
        };
    });
});

http://jsfiddle.net/xUsEA/2/

基于滚动位置的jquery邮政编码两次触发

1 个答案: