javascript - jQuery の無限スクロールと組積造の問題

Question

tumblr テーマを作成しようとしていますが、jquery 用の masonry プラグインと無限スクロールプラグインを使用しています。石積みはうまく機能しています。ただし、無限スクロールをまったく機能させることができません。ここに私のjQueryコードがあります:

<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../masonry.js"></script>
<script type="text/javascript" src="../jquery.infinitescroll.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('#content').imagesLoaded(function(){
$('#content').masonry({
itemSelector: '.post',
columnWidth: 260});
});
$('#content').infinitescroll({
    navSelector  : '#nav',
    nextSelector : '#nav a',
    itemSelector : '#content div.post',          
    },
    function( newElements ) {
    var $newElems = $( newElements );
    $('#content').masonry( 'appended', $newElems, function(){$newElems.fadeIn('slow');}   );
  });
});
</script>

これは私のHTMLです：

 <div id="content">
   {block:Posts}
   {block:Photo}
<div class="post">
<img src="{PhotoURL-250}" width="250" />
</div>
   {/block:Photo}
   {/block:Posts}
 {block:Pagination}
<div id="nav">{block:NextPage}<a href="{NextPage}"></a>{/block:NextPage}</div>
 {/block:Pagination}

どんな助けでも大歓迎です。前もって感謝します。

*投稿の見栄えを良くするために、意図的に js ファイルへの URL を短縮したことにも注意してください。私の実際のテーマでは、URL は正しいです。

これは、デバッグを追加した後にコンソールに表示されたものです (正直なところ、それが何を意味するのかよくわかりませんが、役に立てば幸いです)

Testing console
["determinePath", 
Array[2]
0: "/page/"
1: ""
length: 2
__proto__: Array[0]
] jquery.infinitescroll.js:171
["Binding", "bind"] jquery.infinitescroll.js:171
["math:", 77, 644] jquery.infinitescroll.js:171
["heading into ajax", 
Array[2]
0: "/page/"
1: ""
length: 2
__proto__: Array[0]
] jquery.infinitescroll.js:171
["Using HTML via .load() method"] jquery.infinitescroll.js:171
["contentSelector", 
<div id="content" style="position: relative; height: 689px; " class="masonry">…&lt;/div>
] jquery.infinitescroll.js:171
["math:", 292, 644] jquery.infinitescroll.js:171
["heading into ajax", 
Array[2]
] jquery.infinitescroll.js:171
["Using HTML via .load() method"] jquery.infinitescroll.js:171
["Error", "end"] jquery.infinitescroll.js:171
["Binding", "unbind"]

score 5 · Accepted Answer

一部のブラウザーは、window.console のサブセットのみをサポートするか、まったくサポートしないことで有名です。console.info のみをサポートするブラウザーもあれば、info、debug、log、warning、error などをサポートするブラウザーもあります。

jquery.infinitescroll.js ファイルの 171 行目またはその近くに、次のコードがあります。

    // Console log wrapper
    _debug: function infscr_debug() {

        if (this.options && this.options.debug) {
            return window.console && console.log.call(console, arguments);
        }

    },

Internet Explorer では、開発者ツールやスクリプトデバッガー機能が有効になっていない限り、console メソッドが定義されないことがあります。したがって、開発者のコンピューターでは問題なく動作する Web アプリケーションでも、開発者ツールやスクリプトデバッガーが無効になっている実稼働コンピューターで使用すると、ひどく失敗する可能性があります。

開発者としての最初の本能は、コードからコンソールステートメントを削除すること、または使用しているライブラリのコードから console.log を削除することかもしれません。さらに悪いことに、コンソールステートメントをまったく避けて、代わりにアラートを使用したくなるかもしれません。

console.log ステートメントはトラブルシューティングとデバッグプロセスにとって非常に重要であるため、コンソールステートメントが本番コードに干渉しないようにするために使用できる 1 つの手法は、すべての Web ページにコンソールオブジェクトのデフォルト定義を含めることです。この問題が発生します。

この JavaScript は<head>、ページのセクションに含まれている場合、window.console とそのメソッドが定義されていないことを検出すると、それらを空の関数として定義します。

<script type="text/javascript"> 
// override loggers to avoid throwing errors
if(window.console == null || window.console == undefined || !window.console) {
           console = { log: function() {}, info: function() {}, warn: function() {}, error: function() {}, trace: function() {}, debug: function() {} };
           //var fbscript = document.createElement("script");
           //fbscript.src = "https://getfirebug.com/firebug-lite-beta.js";
           //fbscript.setAttribute("type","text/javascript");
           //document.getElementsByTagName("head")[0].appendChild(fbscript);
} else if(!console.debug) {
         console.debug = function(text) { if(console.log) console.log("D: "+text); };
}
</script>

さらに、4 行のコメント付き JavaScript があり、window.console が null または定義されていない場合、コメントを外すと、使用しているブラウザに Firebug Lite が読み込まれます。

または、jQuery 無限スクロールプラグイン自体のオプションセクションでデバッグがオンになっていないことを確認することもできます。

     debug        : true,                        
             // enable debug messaging ( to console.log )

理想的には、これはおそらくより良い解決策ですが、デバッガーのないブラウザーでテストしないという罠を回避するのに役立つことがわかっているため、前者を好みます。

詳細については、jQuery Ininite Scroll のドキュメント、具体的にはオプションセクションを参照してください。

javascript - jQuery の無限スクロールと組積造の問題

1 に答える 1

Related

Reference