jQuery无限滚动和砌体的问题 [英] Problems with jQuery infinite scroll and masonry

问题描述

我正在尝试创建一个tumblr主题，我正在使用jonery的砌体和无限滚动插件。砖石工作得很好。但是，我无法让无限卷轴工作。这是我的jQuery代码：

I'm attempting to create a tumblr theme and I'm using the masonry and infinite scroll plugins for jquery. the masonry is working just fine. however, i cannot get the infinite scroll to work at all. here's my jQuery code:

<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}

非常感谢任何帮助。提前谢谢。

Any help is greatly appreciated. thanks in advance.

*我还要注意，为了让帖子看起来更好，我在实际的主题上缩短了js文件的URL这些网址是正确的。

*I would also like to note that the i shortened the URLs to the js files on purpose just to make the post look better, on my actual theme the URLs are correct.

这是我添加调试后控制台显示的内容（说实话，我真的不知道这意味着什么，但希望它有所帮助）

This is what the console displayed after i added a debug (To be honest i don't really know what it means but hopefully it helps)

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

推荐答案

有些浏览器因仅支持window.console的一个子集甚至根本不支持而臭名昭着。有些浏览器仅支持console.info，而其他浏览器仅支持信息，调试，日志，警告，错误以及其他浏览器。

Some browsers are notorious for supporting only a subset of window.console or even not at all. Some browsers support only console.info, while others support info, debug, log, warn, error, and possibly others.

在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中，控制台除非启用了Developer Tools和/或Script Debugger功能，否则有时不会定义方法;因此，在开发人员计算机和/或脚本调试器被禁用的生产计算机上使用时，在开发人员的计算机上运行完美的Web应用程序可能会失败。

In Internet Explorer, the console method is sometimes not defined unless the Developer Tools and/or Script Debugger features are enabled; thus, a Web application that runs perfectly fine on a developer's computer may fail miserably when used on a production computer where Developer Tools and/or the Script Debugger are disabled.

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

Your first instinct as a developer may be to remove the console statements from your code -- or the code of whatever libraries you're using that use console.log. Worse yet, you may be tempted to avoid console statements algoether and use alerts instead.

由于console.log语句对于故障排除和调试过程非常有价值，因此您可以使用以确保控制台语句不会干扰生产代码是在发生此问题的所有网页上包含控制台对象的默认定义：

Since console.log statements are very valuable to the troubleshooting and debugging process, one technique that you can use to ensure that console statements don't interfere with production code is to include a default definition for the console object on all of your web pages where this problem occurs:

这个JavaScript，当包含在你的页面的< head> 部分时，会将window.console和它的方法定义为空函数，如果它检测到它们没有已定义。

This JavaScript, when included in the <head> section of your pages, will define window.console and it's methods as empty functions, if it detect that they haven't been defined.

<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，当取消注释时，将加载Firebug Lite你正在使用的浏览器，如果window.console为null或未定义。

In addition, there are 4 lines of commented JavaScript that, when uncommented, will load Firebug Lite in whatever browser you're working with, if window.console is null or not defined.

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

Alternatively, you could check to make sure that you don't have debugging turned on in the options section of the jQuery Infinite scrolling plugin itself:

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

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

Ideally, this would probably be a better solution, but I prefer the former since I know it helps me avoid the trap of not testing in browsers with no debuggers.

参见 jQuery Ininite Scroll文档，特别是选项部分，了解更多详情。

See the jQuery Ininite Scroll documentation, specifically, the options section, for more details.

这篇关于jQuery无限滚动和砌体的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！