0

我正在使用 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 似乎不想加载图像。我已经在这里读到过，有时 Firefox 和其他浏览器之间存在 1px 的差异，但这似乎并没有解决问题。

我知道这是一个特定的问题，因此违反了 Stackoverflow 规范，所以我想我的一般问题（同时记住我自己的问题）是 Firefox 发生了什么以及 $(window).height() 和 $(document ）。高度（）？

4

1 回答 1

1

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

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

工作示例

也就是说，我认为您的具体问题与 if 语句无关……
我对其进行了测试，它似乎在 Firefox、Chrome 和 IE9 中同样有效。

工作示例 2

$(window).scroll(function () {
    if ($(window).scrollTop() +1 >= $(document).height() - $(window).height()) {
        $('body').css('background','red');
    }else{
        $('body').css('background','none');
    }
});
于 2013-09-06T01:35:30.277 回答