与jQuery的无限滚动和砖石问题(Problems with jQuery infinite sc

2019-09-17 10:18发布

我试图创建一个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文件只是为了让帖子看起来更好,我的实际主题的网址是否正确。

这之后,我加入了调试显示哪些控制台(说实话我真的不知道这意味着什么,但希望它可以帮助)

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

Answer 1:

有些浏览器是臭名昭著的仅支持window.console的一个子集,甚至根本没有。 有些浏览器只支持console.info,而其他支持信息,调试日志,警告,错误和其它可能的。

在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无论库的代码。 更糟糕的是,你可能会避免控制台陈述algoether和使用警报来代替。

由于的console.log语句中的故障排除和调试过程中非常宝贵的,一个技术,你可以用它来确保控制台语句不符合生产代码干扰是包括所有网页的地方为控制台对象默认定义出现此问题:

这个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的是,取消注释时,会加载Firebug的精简版在任何浏览器中与您合作,如果window.console为空或没有定义。

或者,你可以检查,以确保你没有在jQuery的无限滚动的插件本身的选项部分打开调试信息:

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

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

见jQuery的Ininite滚动文档 ,具体而言,选项部分,更多的细节。



文章来源: Problems with jQuery infinite scroll and masonry