0

Tumblr に投稿した写真のフィードを作成するために、Tumblr の API を使用しています。私の考えは、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 と他のブラウザーの間に 1 ピクセルの違いがある場合があることを既に読んでいますが、それで問題が解決するようには見えませんでした。

私はこれが特定の質問であることを知っているので、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 に答える