Проблемы с бесконечной прокруткой и кладкой jQuery

Я пытаюсь создать тему tumblr, и я использую плагины masonry и бесконечной прокрутки для 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}

Любая помощь приветствуется. заранее спасибо.

* Я также хотел бы отметить, что я специально сократил URL-адреса файлов js, чтобы публикация выглядела лучше, в моей актуальной теме 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"]
Источник

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 метод консоли иногда не определяется, если не включены средства разработчика и / или функции отладчика сценариев; таким образом, веб-приложение, которое отлично работает на компьютере разработчика, может потерпеть неудачу при использовании на рабочем компьютере, на котором отключены Инструменты разработчика и / или Отладчик сценариев.

Ваш первый инстинкт как разработчика может заключаться в том, чтобы удалить операторы консоли из вашего кода - или код любых библиотек, которые вы используете, которые используют 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 Lite в любом браузере, с которым вы работаете, если window.console имеет значение null или не определено.

В качестве альтернативы вы можете проверить, не включена ли отладка в разделе параметров самого плагина прокрутки jQuery Infinite:

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

В идеале это, вероятно, было бы лучшим решением, но я предпочитаю первое, так как знаю, что оно помогает мне избежать ловушки отказа от тестирования в браузерах без отладчиков.

Дополнительную информацию см. В документации jQuery Ininite Scroll, в частности, в разделе параметров.

Источник
Другие вопросы по тегам