3

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"]
4

1 に答える 1

5

一部のブラウザーは、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 のドキュメント、具体的にはオプション セクションを参照してください。

于 2012-05-23T02:25:56.653 に答える