jQuery无限滚动和砌体的问题答案

【问题标题】：Problems with jQuery infinite scroll and masonryjQuery无限滚动和砌体的问题
【发布时间】：2012-05-23 00:55:23
【问题描述】：

我正在尝试创建一个 tumblr 主题，并且我正在使用 jquery 的砖石和无限滚动插件。砌体工作得很好。但是，我根本无法让无限滚动工作。这是我的 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">…</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"]

【问题讨论】：

您好 carizard，考虑添加您可能从调试器中看到的调试器输出和错误消息。这将帮助社区更轻松地引导您找到一个好的解决方案。祝你好运！
谢谢。我试试看。
好的，当我打开控制台时无限滚动有效，但在控制台未打开时无效。知道为什么会这样吗？我还将把控制台中显示的所有内容添加到我的帖子中。
什么浏览器？听起来你的代码中可能有一些控制台语句，当你的控制台关闭时，控制台语句是未定义的。在 Internet Explorer 中经常发生。
我正在使用 chrome。我已经解决了这个问题，谢谢你的帮助。

标签： javascript jquery tumblr jquery-masonry infinite-scroll

【解决方案1】：

有些浏览器因只支持 window.console 的一个子集而臭名昭著，甚至根本不支持。一些浏览器仅支持 console.info，而其他浏览器支持 info、debug、log、warn、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 中，有时未定义控制台方法，除非启用了开发人员工具和/或脚本调试器功能；因此，在开发人员计算机上运行良好的 Web 应用程序在禁用开发人员工具和/或脚本调试器的生产计算机上使用时可能会严重失败。

作为开发人员，您的第一直觉可能是从您的代码中删除控制台语句——或者您正在使用的任何使用 console.log 的库的代码。更糟糕的是，您可能会避免使用控制台语句，而使用警报。

由于 console.log 语句对于故障排除和调试过程非常有价值，您可以用来确保控制台语句不会干扰生产代码的一种技术是在所有您的出现此问题的网页：

当包含在页面的<head> 部分中时，此 JavaScript 会将 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>

此外，如果 window.console 为 null 或未定义，则有 4 行注释的 JavaScript 将在您使用的任何浏览器中加载 Firebug Lite。

或者，您可以检查以确保您没有在 jQuery Infinite 滚动插件本身的选项部分打开调试：

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

理想情况下，这可能是一个更好的解决方案，但我更喜欢前者，因为我知道它可以帮助我避免在没有调试器的浏览器中进行测试的陷阱。

有关更多详细信息，请参阅jQuery Ininite Scroll documentation，特别是选项部分。

【讨论】：

+1 有趣的题外话window.console :)