Problems with jQuery infinite scroll and masonry

2019-07-02 12:30发布

站内问答 / JavaScript
1778 1 6

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>

and this is my 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.

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

1条回答
爷、活的狠高调
2楼-- · 2019-07-02 12:52

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.

In the jquery.infinitescroll.js file, on or near line 171, you'll find the following code:

    // Console log wrapper
    _debug: function infscr_debug() {

        if (this.options && this.options.debug) {
            return window.console && console.log.call(console, arguments);
        }

    },

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.

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.

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:

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>

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.

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.

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)