Question

我使用Tumblr的API来制作我发布给Tumblr的照片。我的想法是拥有一个无限滚动功能，可以加载20个图像。

最初的20张图片被正确加载。这是我加载后续图像集的代码：

var o = 0;

$(window).scroll(function () {
    if ($(window).scrollTop() + 1 >= $(document).height() - $(window).height()) {
        o += 20;
        $.ajax({
            url: 'http://api.tumblr.com/v2/blog/howwesabah.tumblr.com/posts?api_key=PtoHvq51kOdQlzU6YclOfGOlTuwfm5Chf1cScFnFNhbHxWMDWH&offset=' + o,
            dataType: 'jsonp',
            success: function (results) {
                console.log(results);

                for (j = 0; j <= 19; j++) {
                    var photourl = results.response.posts[j].photos[0].alt_sizes[3].url;
                    var photolink = results.response.posts[j].short_url;
                    $('#tumblr #container').append('<div class="item"><img src="' + photourl + '"/></div>');
                }

            }
        });
    }
});

这在Chrome / Safari / Opera乃至IE中都没有问题。但是，当我滚动到文档的底部时，Firefox似乎并不想加载图像。 I've already read on here有时Firefox和其他浏览器之间存在1px差异，但这似乎无法解决问题。

我知道这是针对Stackoverflow规范的特定问题，所以我想我的一般问题（同时牢记我自己的问题）是用Firefox进行的，以及$（窗口）的等效性。 height（）和$（document）.height（）？

Answer 1

$(window).height();将返回可见窗口的高度。

$(document).height();将返回整个文档的高度，而不仅仅是可见部分。

<强> Working Example

那就是说，我认为你的具体问题不在于if声明......
我测试了它，它似乎在Firefox，Chrome和IE9中同样有效。

<强> Working Example 2

$(window).scroll(function () {
    if ($(window).scrollTop() +1 >= $(document).height() - $(window).height()) {
        $('body').css('background','red');
    }else{
        $('body').css('background','none');
    }
});

为什么$（window）.height（）和$（document）.height（）等价在Firefox中运行良好？

1 个答案: