функции script и css только на первой странице tumblr - PullRequest
Новая
       7

функции script и css только на первой странице tumblr

0 голосов
/ 29 июня 2018

У меня есть страница Tumblr, с бесконечной прокруткой и несколькими постами (фотографиями). Существует скрипт, который рандомизирует посты, но он работает только с постами, которые появляются на первой странице (поэтому, когда свиток берет посты со второй страницы, скрипт больше не работает). Кроме того, на сообщениях есть эффект наведения css, который отображает заголовок сообщения, но это также сказывается на сообщениях с первой страницы.

Что я могу сделать, чтобы скрипт и CSS работали по всей длине страницы.

Вот эта страница: https://www.vul -ne-ra-bil.ro /

А вот скрипт, который перемешивает сообщения: 

function shuffle() {
    var tiles = $(".photo:not('.shuffled')");
    for(var i = 0; i < tiles.length; i++){
        tiles[i].addClass('shuffled')
        var target = Math.floor(Math.random() * tiles.length -1) + 1;
        var target2 = Math.floor(Math.random() * tiles.length -1) +1;
        tiles.eq(target).before(tiles.eq(target2));
    }
}

$(document).ready(shuffle);

1 Ответ

0 голосов
/ 29 июня 2018

Вы привязываете действие shuffle к $(document).ready() jQuery, которое вызывается один раз, когда документ заканчивает загрузку. Библиотеки InfiniteScroll обычно работают путем запроса следующей страницы через AJAX и загрузки результатов на существующую страницу. Это не вызовет обратный вызов ready(), поэтому код shuffle не вызывается ни для одной страницы, загружаемой скриптом.

Чтобы исправить это поведение, посмотрите, поддерживает ли выбранная вами библиотека infiniteScroll добавление обратных вызовов. Затем вы можете выполнить функцию перемешивания после того, как скрипт завершит загрузку следующей страницы, например, onNextPage(shuffle). Я не могу добавить фрагмент к ответу, поскольку вы не указали, как реализовали бесконечную прокрутку.

То же самое относится к наведению, если оно связано с помощью JavaScript в обратном вызове .ready().

Соответствующие ссылки:

...