javascript – jQuery无限滚动和砌体的问题
作者：互联网
我正在尝试创建一个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 documentation,特别是选项部分.
标签：tumblr,jquery-masonry,javascript,jquery,infinite-scroll 来源： https://codeday.me/bug/20190902/1788694.html