[英]Problems with jQuery infinite scroll and masonry
我正在尝试创建一个tumblr主题,我正在使用jonery的砌体和无限滚动插件。 砖石工作得很好。 但是,我无法让无限卷轴工作。 这是我的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"]
有些浏览器因仅支持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中,除非启用了Developer Tools和/或Script Debugger功能,否则有时不会定义控制台方法。 因此,在开发人员计算机和/或脚本调试器被禁用的生产计算机上使用时,在开发人员的计算机上运行完美的Web应用程序可能会失败。
您作为开发人员的第一直觉可能是从代码中删除控制台语句 - 或者使用console.log的任何库的代码。 更糟糕的是,您可能会试图避免使用控制台语句,而是使用警报。
由于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 Lite,如果window.console为null或未定义。
或者,您可以检查以确保在jQuery Infinite滚动插件本身的选项部分中没有打开调试:
debug : true,
// enable debug messaging ( to console.log )
理想情况下,这可能是一个更好的解决方案,但我更喜欢前者,因为我知道它可以帮助我避免在没有调试器的浏览器中测试的陷阱。
有关更多详细信息,请参阅jQuery Ininite Scroll文档 ,特别是选项部分。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.