jQuery无限滚动和砖石的问题
Problems with jQuery infinite scroll and masonry
我正在尝试创建一个 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"]
一些浏览器因仅支持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 应用程序在禁用了开发人员工具和/或脚本调试器的生产计算机上使用时可能会惨败。
作为开发人员,您的第一直觉可能是从代码中删除控制台语句 - 或者您正在使用的任何使用控制台.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,当取消注释时,如果 window.console 为 null 或未定义,则会在您正在使用的任何浏览器中加载 Firebug Lite。
或者,您可以检查以确保没有在jQuery无限滚动插件本身的选项部分中打开调试:
debug : true,
// enable debug messaging ( to console.log )
理想情况下,这可能是一个更好的解决方案,但我更喜欢前者,因为我知道它可以帮助我避免在没有调试器的浏览器中进行测试的陷阱。
有关更多详细信息,请参阅 jQuery Ininite Scroll 文档,特别是选项部分。
- 在指令控制器中使用$attrs时出现问题
- 将PHP变量传递给jQuery时遇到问题
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 参数变量出现ngTable指令问题
- 剑道网格jQuery动画()问题
- 无限滚动更改ID问题
- 简单无限卷轴问题
- 无限循环串联问题
- 简单的 do/while 循环无限循环问题
- Tumblr 无限(无休止)滚动/自动页面脚本问题
- jQuery无限滚动和砖石的问题
- JavaScript范围问题导致无限循环
- 使用 Ionic 的 Angular JS 无限滚动问题
- 无限滚动(mysql,php&js)循环问题
- 离子列表无限滚动问题与Assinc请求
- 在从无限滚动加载页面的html5音频播放器上连续播放时出现问题
- 角度ux网格问题与无限滚动.如何通过编程设置限制
- 无限滚动分页javascript实现问题
- 无限循环的问题
- 问题与Yii无限滚动和谷歌AdSense