#javascript #jquery #tumblr #infinite-scroll
#javascript #jquery #tumblr #бесконечная прокрутка
Вопрос:
Я использую gumroad.js на tumblr с бесконечной прокруткой
<script type="text/javascript" src="https://gumroad.com/js/gumroad.js"></script>
Это создает окно проверки наложения (модальное) при нажатии кнопки. Для первых 15 сообщений он загружается нормально. Но как только остальные кнопки загружаются при бесконечной прокрутке, они не загружаются с функциональностью js.
Скрипт находится в <head>
Нужно ли перезагружать файл при каждом обратном вызове бесконечной прокрутки?: function(newElements) {
Редактировать
Я только что заметил, что проигрыватель soundcloud также исчезает после бесконечной прокрутки. Это оба пользовательских класса. Они отображаются в инспекторе как имеющие классы, которые все еще работают, но файлы js не обрабатываются.
Комментарии:
1. AFAIK, вам нужно будет вызывать javascript каждый раз, когда вы добавляете новые записи в DOM.
2. итак, загружайте весь js-файл каждый раз, когда заполняется новое содержимое? Как вы это делаете при обратном вызове?
3. Это странно. Я просмотрел документы и не смог найти метод добавления / обновления, поэтому я полагаю, что вам придется вызывать JS-файл каждый раз.
Ответ №1:
Известно, что бесконечная прокрутка вызывает проблемы со сценариями. Да, вам, вероятно, потребуется повторно инициализировать Gumroad в обратном вызове после каждой загрузки страницы. Я мало что знаю о Gumroad, но появился быстрый поиск
Gumroad.init()
как метод повторной инициализации кода.
Кто-нибудь может поправить меня, если я ошибаюсь, но включение этой строки в обратный вызов должно сработать!
Редактировать:
Мы не можем предотвратить Gumroad.js от создания дубликатов кнопок после каждого запуска init() , так что нам просто нужно будет стереть все кнопки и позволить им повторно инициализироваться. Также невозможно отключить обработчики кликов, и поэтому вам нужно будет клонировать привязки, чтобы удалить их. После каждого обратного вызова с бесконечной прокруткой вы захотите запустить этот код, чтобы вернуть все ссылки gumroad в нормальное состояние, а затем вызвать Gumroad.init() повторную инициализацию. Я не уверен, используете ли вы jQuery, но если да, то это самый простой способ.
Используя их демонстрацию в качестве модели:
jQuery
$('.gumroad-button').each(function() {
$(this).replaceWith($(this).clone().children().remove().end());
});
Gumroad.init();
Ванильный javascript
for (var i = 0, a = document.getElementsByTagName("a"); i < a.length; i ) {
if (a[i].className.indexOf("gumroad-button") > -1) {
var clone = a[i].cloneNode();
clone.appendChild(document.createTextNode(a[i].lastChild.nodeValue));
a[i].parentNode.replaceChild(clone, a[i]);
}
}
Gumroad.init();
Примечания
.end() требуется для возврата к клонированному элементу после выбора дочерних элементов для удаления
.remove() не удаляет текстовые узлы, поэтому после клонирования будет удалена только часть кнопки «значок» (оптимально).
Если вы используете ванильный javascript, вам нужно будет скопировать текстовый узел («Buy my product») после его клонирования. Но вместо глубокого клонирования (также клонирования всех дочерних элементов) с использованием метода DOM Node.cloneNode (путем передачи в true to .cloneNode(true) для клонирования привязки, а Затем Удаления ненужных дочерних элементов (т. Е. значка), как в jQuery, Вы можете просто мелко клонировать только привязку, а затем скопировать текст.
Опять же, нам нужно клонировать и заменить элемент привязки ссылки, чтобы избавиться от дублирующего обработчика кликов, иначе, когда вы нажимаете на кнопку, он фактически дважды выполнит модальное наложение Gumroad.
Комментарии:
1. Это работает! — для вновь загруженного содержимого. К сожалению, это создает дубликат существующего (уже загруженного) содержимого в ‘function (newElements) {‘
2. Также возникает точно такая же проблема с проигрывателем soundcloud html5. Есть какие-либо предложения?
3. Извините, я не очень хорошо знаком с сервисом Gumroad, но не могли бы вы пояснить, что вы подразумеваете под дублированием содержимого? Вы имеете в виду, что он создает две кнопки Gumroad после загрузки каждой страницы?
4. Да, при загрузке новой страницы создается еще одна кнопка поверх старой.