jQuery-плагины бесконечной прокрутки топ 10


Оглавление (нажмите, чтобы открыть):

Статьи

jScrollPane Келвина Лака была изначально разработана в декабре 2006. Это плагин jQuery, предоставляющий вам пользовательские полосы прокрутки, согласовано работающие со всеми современными браузерами. Вы можете видоизменять полосы прокрутки, используя простой CSS, но они прилично ухудшаться там, где JavaScript отключен.

Эта страничка написана на французском языке, поэтому воспользуйтесь онлайн-переводчиком для чтения на вашем родном языке. Скачивание доступно для плагинов.
Главная цель данного плагина — добавить полосу прокрутки в необходимое для вас место, просмотр любого контента, большего размера страницы (видимое место на экране), например. Он просто необходим для пользователей, не желающих использовать полосы прокрутки, установленные по умолчанию. Имеется и функция управления прокруткой, но она отключена.

Небольшие полосы прокрутки могут использоваться для просмотра контента. Данная программа разработана при использовании скрипта jQuery library. Это динамичная облегченная утилита, предоставляющая веб-разработчикам удобный метод улучшения пользовательского интерфейса сайта. Он может перемещаться горизонтально или вертикально, а также при помощи колесика, большого пальца, или курсора. Размер уменьшен до 2,29 kb.

Скроллер пользовательского контента был разработан совместно с jquery и css, поэтому поддерживает работу с колесиком мышки, делая просмотр очень легким. Имеет полностью настраиваемую полосу прокрутки. Данный скрипт применяет jQuery UI и Brandon Aaron jquery плагины для колесика мышки. Очень прост для конфигурации и видоизменения при работе с css.

Данные полосы прокрутки совершенно видоизменяемы, их поведение, работа и дизайн полностью предсказуемы. Данный скрипт использует плагин ‘jquery.corner’ для привлекательных закругленных углов кросс браузера , а также плагин ‘jquery.drag’ для более надежного выполнения переходов.

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

Данный инструмент предоставляет HTML5 широкий диапазон изменения всех браузеров по вашему вкусу: как их поведения, так и дизайна. Этот небольшой плагин весит всего 2.2 Kb. Диапазон ввода в данном случае используется для контроля переходов по разделам. Немного больше кодировки и вы сможете получить сайт наподобие сайта Apple.

Джис Бейд разработал данную пользовательскую полосу прокрутки как мини-приложение jQuery UI после ознакомления с полосой прокрутки Google Wave, который увеличил функции и улучшил стиль полосы прокрутки по сравнению со стандартными браузерными полосами. Градация фона CSS3 предоставляет возможность изменения фона по вашему усмотрению. Таким образом, если вам необходима поддержка Internet Explorer и вы хотите создать сайт, радующий глаз, запланируйте создание ваших собственных фоновых изображений.

C плагином jQuery, предоставляющим персонализацию, возможна разработка дизайна полосы прокрутки вертикального положения совместно с CSS.

Данный плагин подразумевает один отдел установленной высоты (#перелистывающая панель в моем примере), который содержит определенно расположенный отдел (#перелистывающий контент), содержащий контент для перехода.

Делаем “ленивую” прокрутку на jQuery

Сколько я себя помню, веб-разработчики всегда обращались к старой-доброй пагинации в случае, когда им необходимо было отобразить большое количество контента. Не поймите меня неправильно, пагинация до сих пор является эффективным способом отображения контента, но в этой статье мы поговорим о другом подходе — “ленивой” прокрутке, также известной под названием “бесконечной прокрутки” и “отказом от пагинации”. С помощью этой техники подгрузка контента производится с помощью AJAX, когда пользователь прокручивает страницу до места, где загруженный контент заканчивается. Ленивая прокрутка используется некоторыми гигантами интернета, такими как Facebook и Pinterest. В этом посте мы попробуем реализовать свой плагин для ленивой загрузки на jQuery.

Преимущества и недостатки

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

Ленивая загрузка эффективна не во всех ситуациях. Например, в случаях, когда пользователь переходит по ссылке, а затем хочет вернуться на предыдущую страницу с помощью истории браузера, он теряет позицию в той части, которая была подгружена с помощью AJAX. Одним из способов решения подобной проблемы — открывать все ссылки в новом окне или вкладке.

Недостаток, который следует из вышесказанного — у пользователя нет возможности запомнить свою позицию в части документа, которая была подгружена с помощью AJAX. Представим, что вы хотите поделиться чем-нибудь со страницы с ленивой подгрузкой со своим другом по электронной почте. Вы не сможете этого сделать, так как ссылка приведет вас обратно к вашей изначальной позиции. Так что, прежде чем бросаться внедрять ленивую загрузку на вашем сайте, подумайте о юзабилити такого решения иненно в рамках вашего сайта.

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

Начинаем

Начнем с наброска очень простой страницы. Самые важные части страницы показаны в коде ниже. Полные файлы можно посмотреть в исходниках.

Основные замечания

Если вы приглядитесь к документу, что мы создали, то увидите, что новые посты будут загружены при клике на кнопку “загрузить еще”. Вот пункты, которые мы будем реализовывать:

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

Шаблоны ответа AJAX

В идеале необходимо объявить переменную, в которой мы будем хранить номер страницы, и с помощью этого номера определять URL, на который мы будем отправлять запрос. В нашем демонстрационном примере у нас будут три таких страницы: 2.html, 3.html и пустая страница 4.html.

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

Добавляем полученные данные на страницу

Сначала вернем обратно те изменения, которые мы проделали, пока запрос еще выполнялся, то есть, показать кнопку “загрузить еще”, и спрятать информационный текст. Во-вторых, необходимо вставить полученные данные на страницу, после тех элементов, что уже есть на странице. Заметьте, что для упрощения в этом примере мы получаем данные HTML сразу, как результат запроса. Можно отсылать ответ в формате JSON, добавив в него дополнительные переменные, как статус или сообщение. Код ставки данных представлен ниже:

Обрабатываем вариант, когда данные закончились

Как только вы достигнете последнего поста, вам нужно показать пользователю, что больше постов нет. Сделать это можно различными способами. Можно отсылать статус в виде встроенного в ответ кода или сообщения. Так как мы напрямую используем разметку HTML в этом примере, то пустой ответ в нашем случае будет говорить о том, что данные закончились.

Заключение

В данном демонстрационном примере мы привели очень базовый вариант обработки ленивой загрузки. Конечно же, можно сделать гораздо лучше, если постараться. Для начала, можно вообще избавиться от кнопки, и отправлять запрос, когда пользователь прокрутит страницу до конца. Это избавит пользователя от дополнительной необходимости нажимать кнопку, и в целом ускоряет процесс просмотра информации. Во-вторых, можно просто отсылать чистые данные в формате JSON, а разметку создавать налету, используя jQuery, например:

И, наконец, ответ в JSON может содержать сообщение, говорящее, прошел ли запрос корректно; данные; а также информацию о том, есть ли еще посты для загрузки. В данном случае это более эффективный способ отправлять результат.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/implementing-lazy-scroll-jquery/
Перевел: Станислав Протасевич
Урок создан: 6 Апреля 2014
Просмотров: 47133
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Реализация бесконечной прокрутки на JavaScript

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

Кратко о бесконечном скроллинге

Так, например, Facebook загружает новые статьи по мере того как проматываете страницу вниз. Это приводит к более быстрой загрузке всего сайта, так как пропадает необходимость загрузки всего контента сразу. И для достижения подобного, Facebook использует технику, называемую бесконечным скроллингом.

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

Реализация

Код, представленный далее, проверяет, достиг ли пользователь конца элемента при скроллинге и, если, да, то загружает новый контент:

50 полезных плагинов JQuery 2012 года

29 декабря 2012 | Опубликовано в Веб-дизайн | 12 Комментариев »

jQuery плагины являются одними из самых необходимых компонентов при построении сайта, да и вообще любого веб-приложения. Именно они позволяют вам расширить свой функционал. В этой статье перечислены самые полезные плагины за 2012 год. Для более удобного поиска все плагины разделены на следующие категории: Web Page Layout — плагины, плагины для навигации, Form Plugins, плагины для создания слайдеров, плагины для диаграмм и графиков, эффекты для изображений и другие. Также среди этих плагинов есть плагины, которые помогут вам в создании ваших адаптивных приложений.

Page Layout плагины

equalize.js — это плагин для jQuery, который позволяет создавать блочную структуру сайта. Он позволяет выравнивать высоту и ширину любого элемента.

Новый плагин для адаптивных макетов.Freetile позволяет создавать элементы любого размера, при этом необходимость создания фиксированного размера столбцов сетки отпадает.

Gridster.JS jquery плагин для построения drag and drop — сетки. Также с помощью него можно динамично удалять и добавлять элементы из сетки.

Мастер Йода рекомендует:  Алиса — всё по этой теме для программистов

Zoomooz.js — это простой в использовании jQuery-плагин для увеличения любого элемента веб-страницы. Вы можете легко добавить zoom-эффект, просто добавив класс «zoomTarget» к любому HTML-элементу. Увеличение можно сбросить, кликнув на страницу. Плагин был протестирован в Internet Explorer 9, Safari 3 +, Firefox 3.6 +, Opera и Chrome.

Wookmark — плагин для создания динамичного многоколоночного шаблона.

jQuery HiddenPosition — плагин, который позволяет добавлять любой элемент, даже если он является скрытым.

Stellar.js — JQuery-плагин, который обеспечивает эффект параллакса для элементов.

Плагин jQuery, который добавляет эффект реального переворачивания страниц при переходе между разделами. Используется аппаратное ускорение. Работает на планшетах и смартфонах.

Плагин для адаптивной типографики. Он позволяет вам использовать селектор, генерирующий идеальный размер шрифта.

Позволяет построить анимированные перемещения по сайту, включая все возможные трансформации

Плагины для навигации

HorizontalNav — это jQuery плагин, который растягивает горизонтальное меню, чтобы она соответствовала всей ширине контейнера. Если Вы когда-либо пытались создать эффект правильной натяжки меню навигации на CSS контейнер у проекта, то Вы однозначно знаете насколько это тяжело сделать для кросс-браузерной совместимости. Данный плагин делает это с легкостью.

stickyMojo – это легкий, быстрый и гибкий плагин «липучей» боковой панели на jQuery. Он работает с Firefox, Chrome, Safari и IE8 + (неплохо поддерживает старые версии IE).

ddSlick — плагин, который позволяет создавать выпадающие меню с изображениями и описаниями.

Плагин для простой организации раскрывающихся панелей. Плагин поддерживает работу с куки для хранения состояния панелей. Среди опций есть возвратные функции для настройки процесса открывания и закрывания секций.

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

Формирующие плагины

Плагин позволяет определять уровень сложности пароля.


JQuery-плагин для визуализации процесса загрузки файлов. Он поддерживает drag&drop и создает моментальные превью для фотографий.

Плагин, который определяет и проверяет номера кредитных карт. Он позволяет вам определить тип кредитной карты.

Плагин для фильтрации данных. Вы можете фильтровать данные по тегу и по нескольких тегам и категориям.

Плагин, который проверяет ввод электронной почты на правильность по заранее подготовленному списку (сюда можно включить самые популярные почтовые сервисы mail.ru, yandrex.ru, gmail и т.п. ).

Плагины для создания слайдеров и каруселей

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

iosSlider

iosSlider — плагин для адаптивного кроссбраузерного слайдера.

RSlider — полноэкраннный адаптивный слайдер. О н будет автоматически подстраиваться под ширину вашего экрана.

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

BookBlock — jQuery-плагин, который можно использовать для создания компонентов в виде буклетов, которые позволят вам создавать навигацию наподобие «переворачивающихся страниц». Здесь можно задействовать любой контент, будь то изображения или текст. Плагин трансформирует структуру только при необходимости (другими словами, только при переворачивании страницы) и использует наложения и тени для придания реалистичности.

Adapter — легкий слайдер контента, который предоставляет простой интерфейс разработчикам для создания красивой 2D или 3D анимации перелистывания слайдов. В настоящее время имеется поддержка 3D свойств в браузерах webkit и Firefox. Все 2D переходы были протестированы в IE6 + и других современных браузерах.

Непрерывная карусель с несколькими полезными возможностями. Она легко настраивается и поддерживает даже старые браузеры.

Rhinoslider — довольно гибкий jQuery плагин слайдшоу. Предлагаются не только разнообразные эффекты, но и есть возможность добавления собственных стилей, эффектов и функций к слайдеру.

Sequence – это jQuery-плагин для прокрутки контента оригинальным образом и предоставляет вам полноценный контроль. Можно использовать любой тип контента; он будет прокручиваться бесконечно. Здесь используется семантическая разметка, а также поддерживаются адаптивные шаблоны и устройства, основанные на технологии touch.

Glisse.js — простая, адаптивная и легко настраиваемая JQuery-фото-галерея.

Плагины для диаграмм и графиков

Morris.js представляет собой облегченную библиотеку, которая использует JQuery и Raphaël, чтобы облегчить рисование графиков временных рядов.

JQuery Org Chart представляет собой плагин, который позволяет создавать древовидные структуры с вложенными элементами. Данные вводятся во вложенный неупорядоченный список, что делает плагин невероятно простым в использовании.

Плагины для типографики

Bacon.js является JQuery плагином, который позволяет обернуть текст вокруг кривой Безье или линии.

Textualizer — jQuery плагин для создания красивых эффектов над текстом. Поддерживается работа в: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4)

SlabText — очень полезный JQuery-плагин, который построчно разбивает заголовки перед изменением размеров каждой строки, чтобы заполнить доступное пространство по горизонтали.

trunk8 — это плагин усечения текста в JQuery. Позволяет сократить большой блок текста на меньшую часть для предварительного осмотра.

Плагины для создание различных эффектов для изображений

Это плагин для jQuery, который использует фильтры на CSS3 для создания tilt-эффекта.

Плагин для реализации эффекта адаптивных изображений.

jQuery-плагин, который позволяет легко создавать карты-изображения. С помощью этого инструмента, любая карта-изображение может быть подсвечена или выбрана, а также картой можно управлять различными способами. Он работает на всех основных браузерах, в том числе Internet Explorer 6, он не использует Flash, и не требует ничего кроме jQuery. Некоторые продвинутые эффекты требуют поддержки HTML5, но он все равно будет работать в старых браузерах.

Плагин позволяет странице изменять src-атрибуты изображений в соответствии с шириной контейнера, а PHP-файл автоматически создает новые/измененные в размере изображения. Изображения создаются только тогда, когда они запрашиваются в первый раз, и этот процесс не будет повторяться при последующих запросах, что положительно сказывается на производительности.

Backstretch — простой плагин, который позволяет добавлять фоновое изображение изображение на любую страницу.

И другие.

Плагин для плавных трансформаций и переходов. Вместо работы с таймерами, плагин использует CSS3 трансформации.

Noty — это jQuery плагин, с помощью которого без особых проблем и сложностей можно легко на своем сайте или блоге создать уведомления типа: information, error, alert, success, warning, или просто заменить стандартные уведомления на сайте, при регистрации например. Абсолютно каждое уведомление можно настроить, чтобы оно выводилось поочередно.

JQuery-плагин позволяет легко помещать маркеры на карте сайта с помощью Google Map API V3.

Плагин, который позволяет легко добавлять интерактивные карты на вашем сайте. Вы получите мощную API карту, настраиваемые маркеры и обработчик-событий.

Jплагин, который использует Scalable Vector Graphics (SVG) для рендера векторных карт. Он работает во всех браузерах, поддержка в старых версиях IE 6-8 осуществляется через VML.

Простой в использовании JQuery плагин для социальных виджетов сетей. В настоящее время он поддерживает Facebook, Twitter и Google+.

Tooltipster представляет собой легкий и простой в стиле JQuery плагин, который поможет вам легко создавать всплывающие подсказки.

BigVideo.js — jQuery плагин, который упрощает адаптирование фонового видео на веб-страницу. Вы можете использовать одно или несколько видео или использовать плагин в качестве проигрывателя, с отображением плей-листа.

С помощью плагина calendario вы сможете для своего сайта организовать замечательный календарь, в котором будут отмечаться все вам важные материалы и праздники, которые можно с легкостью задать самостоятельно.

Бесконечная прокрутка на WordPress с помощью плагина Ajax Load More

Ничего так не затягивает, как лента новостей на Facebook. Даже сейчас, сидя в попытках написать пост, эта штука не дает мне покоя! Это (частично) потому, что Facebook использует бесконечную Ajax прокрутку для своей новостной ленты. Вместо того, чтобы нажать на Читать дальше или кнопку Далее, страница просто продолжает загружаться.

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

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

Преимущества бесконечной прокрутки на WordPress

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

  • Больше просмотров страниц — NBC News обнаружили , что с помощью бесконечной прокрутки ленты ПК-пользователи посмотрели на 20% больше страниц за одно посещение. Точно так же установил сайт газеты Time , что 21% пользователей посмотрел вторую часть содержания с помощью бесконечной прокрутки.
  • Показатель «ненужных просмотров» — газета Time также снизила показатель отказов на 15% , когда они применили бесконечную прокрутку.
  • Преимущества для пользователей. Не все могут с этим согласиться. Но, некоторые эксперты заявили, что бесконечная прокрутка повышает UX, предлагая пользователям больше соприкосновения с материалами, требуя при этом меньше нажатий.

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

Большинство социальных сетей полагаются на бесконечную прокрутку. По этой причине твиты и посты на них — все имеют одинаковую важность.

Кроме того, некоторые крупные новостные организации с энтузиазмом ухватились за идею бесконечной прокрутки своей новостной ленты.

Недостатки бесконечной прокрутки на WordPress

Есть, безусловно, и некоторые потенциальные недостатки:

  • Отсутствие футера — при переходе к бесконечной прокрутке вы не можете прокрутить страницу вниз к футеру. Конечно, ничего страшного здесь нет, но надо принять это во внимание, если вы используете футер вашего сайта для получения важной информации. Например, если вы используете сноски для вставки информации, вам нужно будет найти новый способ для ее отображения.
  • Дерганная полоса прокрутки – то, что больше всего не любят пользователи. Поскольку сайт постоянно загружается, полоса прокрутки в браузере будет двигаться взад и вперед. У некоторых может возникнуть чувство обмана и это приведет к негативному впечатлению.
  • Нет ощущения «завершения». Исследователи компании Nielsen обнаружили, что пользователям на самом деле нравится чувство «завершения», когда они достигают конца страницы. Бесконечная прокрутка делает это ощущение невозможным.

Кроме того, в разделе «Преимущества» мы сказали, что бесконечная прокрутка пригодна тогда, когда у вас есть много равноценных сообщений в блоге. Что ж, обратное тоже верно.

Если ваши посты в блоге имеют различный смысл (например, путеводители на 2000 слов или просто короткое сообщения на 300 слов), то бесконечная прокрутка, вероятно, не является хорошей идеей для вашего сайта.

Как добавить бесконечную прокрутку на WordPress

Чтобы добавить бесконечную прокрутку на WordPress, вы можете использовать бесплатный плагин Ajax Load More . Плагин имеет множество дополнений, которые могут повысить его функциональность, но для того, чтобы добавить простую бесконечную прокрутку на ваш сайт, достаточно и обычной версии.

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

Настройки плагина

Установите и активируйте Ajax Load More , как и любой другой плагин.

После того, как он активируется, вы увидите новый раздел меню на боковой панели. Перейдите к Ajax Load More → Repeater Template для создания своего шаблона.

Ваш шаблон показывает, как должны выглядеть сообщения, когда они будут в бесконечной прокрутке. Для его редактирования необходимы некоторые знание PHP. Но для большинства пользователей достаточно и стандартного шаблона:

Важно отметить то, что стандартный шаблон будет показывать только фрагменты постов, а не полные сообщения. Если вы хотите отобразить полные сообщения, вам нужно заменить the_excerpt() на the_content()

Если вы разбираетесь в PHP, вы можете затем изменить этот шаблон. В другом случае, вполне нормально оставить стандартный шаблон.

Создайте шорткод для отображения постов в бесконечной прокрутке

Далее, вам нужно создать шорткод, который вы будете использовать для отображения бесконечной прокрутки. Перейдите к Ajax Load More → Shortcode Builder :

Здесь вы можете много чего настроить. В основном это настройка контента, что будет в бесконечной прокрутке, и его функционирование. Я не могу пересчитать все, но вот некоторые поля, которые вы определенно захотите заполнить:

  • Типы постов — стандартный шаблон будет содержать только Записи. Но вы также можете включать Страницы или другие типы кастомных постов.
  • Категории — вы можете включать и исключать только определенные категории.
  • Автор — интересная особенность: вы можете добавить бесконечную прокрутку для конкретного автора.
  • Количество постов на странице — установите, сколько сообщений Ajax Load More должно загружаться каждый раз при обновлении.
  • Пауза — это, безусловно, важная особенность. Для правильной бесконечной прокрутки сделайте значение False. Если пометить его как True, пользователи должны будут щелкнуть кнопку «Load More», чтобы получить больше сообщений.
  • Прокрутка — вы включаете эту функцию, и сообщения автоматически загружаются, когда читатели прокручивают их вниз.
Мастер Йода рекомендует:  My heart will beat on! Сердце на CSS для неисправимых романтиков

Осмотрите все настройки. Как минимум, убедитесь, что вы настроили все вышесказанное. После того, как вы все установите, скопируйте шорткод с правой стороны страницы:

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

При публикации этой страницы, вы должны увидеть бесконечную прокрутку на WordPress!


Итоги

Бесконечная прокрутка не подходит для каждого сайта на WordPress. Но если ваш сайт публикует примерно одинаковый контент, вы можете улучшить свой показатель отказов и количество посещений страниц, добавив бесконечную прокрутку. По крайней мере, стоит попробовать!

Ajax Load More — самый простой способ добавить бесконечную прокрутку в WordPress. Вам не нужно никаких дополнительных настроек, если вы просто используете плагин для стандартной бесконечной прокрутки. Нет ничего сложного и в установке: 15 минут — и ваш сайт на WordPress заработает с бесконечной прокруткой.

Источник: wplift.com

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Средний рейтинг: 4.9 / 5. Количество голосов: 9

Бесконечный скролл с автоматической загрузкой контента

Дата публикации: 2013-10-24

От автора: постраничная навигация неотъемлемый атрибут любого хорошего сайта. Так как обычно на сайте выводится большое количество разнообразной информации и вывести все это на одной странице – можно, но не желательно, по причине большой нагрузки на сервер и замедления работы сайта в целом. Поэтому в данном уроке, мы с Вами рассмотрим еще один вид постраничной навигации – бесконечный скролл с автоматической загрузкой контента.

1. Постановка задачи

Итак, давайте рассмотрим следующий пример. Есть вот такой сайт, на главной странице, которого выводятся обычные статьи:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

В нем уже реализован простой механизм постраничной навигации, а именно, на каждой странице, выводится ровно 10 статтей (это количество определяется в конфигурационном файле). Затем если через адресную строку передать параметр page, с номером нужной страницы, то будут отображаться статьи соответствующие данной странице.

Нам же необходимо создать так называемый бесконечный скролл, то есть, если опустить ползунок вертикального скролла в самый низ страницы – выполнится автоматическая загрузка контента и будут отображены статьи соответствующие следующей страницы. И эти статьи будут как бы продолжением контента всего основного сайта. Дальше пользователь продолжает чтение статей, тем самым опять же опускает скролл в самый низ страницы и опять же будет выполнена подгрузка контента. Конечно, загружать контент нам нужно будет асинхронно, поэтому мы будем использовать метод AJAX.

2. Обзор работы тестового сайта

Итак, весь исходный код тестового сайта я в этой статье приводить не буду, так как он довольно большой, да и в исходниках к данном уроку Вы сможете их посмотреть. Главный файл данного сайта – это index.php, который, собственно и выводит на экран весь контент данного сайта. Давайте рассмотрим фрагмент кода данного сайта, а именно код PHP файла index.php:

Как Вы видите, вначале подключаем конфигурационный файл, в котором выполняется соединение с базой данных и определяется константа COUNT_PER_PAGE – количество статей выводящихся на одной странице. И, файл, functions.php – в котором содержится функция получения статей из базы данных, в соответствии с выбранной страницей (к ней мы еще вернемся).

Далее, собственно определяем какую страницу необходимо загрузить (постраничной навигации), то есть, проверяем наличие в суперглобальном массиве GET ячейки page, если данная ячейка, есть и содержит в себе числовое значение – то мы создаем переменную $page в которую и записываем данное значение. Если же данной ячейки нет, или в ней содержится не числовой значение, то в переменную $page – сохраняем значение 1 (по умолчанию отображаем первую страницу постраничной навигации). Дальше собственно вызываем функцию get_posts(), которая возвращает массив со статьями.

Теперь давайте рассмотрим файл functions.php:

В базе данных не обнаружено таблицы проверте настройки

Как Вы видите функция принимает всего два параметра: $page – номер страницы, которую необходимо отобразить, и $count_per_page – количество статей отображаемых на одной странице (конечно данный параметр можно было и не передавать, а использовать константу из конфигурационного файла, но так будет универсальнее). Данная функция выполняет SQL запрос по выборке данных из базы данных и что бы реализовать механизм получения определенных статей, в соответствии со страницами, необходимо в запросе использовать инструкцию LIMIT, и задать собственно начало выборки и количество выбираемых статей. Для того что бы определить начало выборки мы воспользуемся следующим выражением:

То есть от номера, который мы передаем параметром данной функции мы вычитаем 1 и умножаем на количество статей выводимых на одной странице постраничной навигации. К примеру, если мы хотим открыть вторую страницу, то что получается: $page = 2, минус 1, получаем 1, затем умножаем на 10 (количество статей на одной странице) и получаем 10, значит в инструкцию попадает два значения: LIMIT 10,10, что означает выбрать 10 статтей из базы данных, начиная с 10. Дальше выполняем данный SQL запрос и возвращаем массив со статьями.

3. Добавляем вспомогательный HTML код

Перед тем как начать писать код, для бесконечного скролла, давайте добавим вспомогательный HTML код:

Блок div с классом load необходим, для индикации процесса отправки информации на сервер. То есть изначально, данный блок скрыт, но когда идет обращение к серверу, данный блок будет отображаться на экране. На фоне этого блока будет установлена анимационная картинка (gif). Сразу же давайте добавим стили данному блоку:

Блок div с классом pager – информационный, он необходим, что бы мы с Вами видели, какая страница сейчас отображается. Сразу же давайте добавим стилей к данному блоку (данный блок я просто выведу в произвольном месте сайта, так как скорее всего его вообще не нужно показывать пользователю, но на этапе разработки скрипта он очень полезен).

4. Логика на javaScript

Теперь необходимо написать код на языке javaScript, для работы бесконечного скролла: поэтому давайте первым делом скачаем библиотеку jQuery с официального сайта и сохраним в папке js. Также создадим пустой файл script.js и также сохраним его в папке js. Оба эти файла подключим к нашему сайту:

Теперь откроем файл script.js и добавим в него следующий код:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Итак первым делом необходимо узнать нет ли в адресной строке параметра page с номером отображаемой страницы. Для этого мы используем свойство search объекта location, которое содержит в себе GET параметры передаваемые через адресную строку. Но если адресная строка имеет вид: http://localhost/lessons/pager/index.php?page=2&move=4, то свойство search содержит строку: ?page=2&move=4.

Значит, используя метод slice, мы с Вами исключим знак вопроса из полученной строки. И сразу же, используя метод split разобьем ее в массив, который сохраним в переменной param. Разбивать конечно же будем по символу &. То есть в переменно param содержится массив вида:

А нам необходимо получить значение параметра page. Значит, используя цикл for, создадим массив result, у которого названия ячеек – это названия GET параметров, а значения – это соответственно значения этих же GET параметров:

Теперь проверим, есть ли в массиве result ячейка, page, и если есть то ее значение запишем в переменную page. Если же данной ячейки нет, то в переменную page сохраняем значение 1 (по умолчанию). Далее, выберем при помощи jQuery блок с классом pager, отобразим его на экране, при помощи метода show() и добавим содержимое данному блоку (текст данного блока), значение переменной page, используя для этого метод text().

Дальше объявим переменную block и сохраним в ней значение FALSE. Данная переменная будет использоваться для блокировки скрипта. То есть если в данной переменно будет сохранено значение TRUE, значит, работа следующего участка кода будет блокирована (о котором мы с Вами поговорим дальше). Далее следует вот этот участок кода:

Сотрите выбираем элемент window и вызываем метод scroll(). Который задает функцию обработчик события scroll – перемещение ползунка скролла. То есть когда пользователь переместит ползунок скролла, выполнится функция, описанная в данном методе. Далее проверим, если ползунок скролла находится в самом низу страницы и блокировка скрипта не включена, то мы первым делом блокируем скрипт: block = true;

Затем показываем блок с классом load, используя метод fadeIn(), со скоростью 500 миллисекунд и после завершения всех анимационных эффектов, выполнится функция описанная во втором параметре метода fadeIn(). В этой функции мы первым делом увеличиваем значение переменой page на единицу, так как нам нужно отобразить следующую страницу. Затем обращаемся к методу ajax и передаем ему следующие параметры:

url — путь к фалу на сервере к которому мы обращаемся, в данном случае это index.php;

type – тип запроса, при помощи которого мы передаем данные, в нашем случае это тип GET;

data – данные, которые передаются на сервер. Передаем параметр page – значение новой отображаемой страницы и параметр move со значением 1, необходимый для формирования ответа от сервера.

success – функция которая выполнится после успешного выполнения запроса. Данная функция принимает параметром page переменную html – ответ от сервера, который мы с Вами сформируем далее. Если же ответ от сервера пришел и не равен false, то в данном ответе будет содержаться html код следующей страницы постраничной навигации. Поэтому используя метод appendTo(), мы добавим данный код в блок с идентификатором posts после его содержимого (как последний дочерний элемент). Далее мгновенно скроем данный код (значение переменной html) и сразу же покажем при помощи метода fadeIn(). Дальше изменяем содержимое блока с классом pager используя метод text(), то есть текущее значение переменной page выводим в данном блоке. Далше скрываем блок с классом load и разблокируем работу скрипта, то есть в переменную block записываем значение false.

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

Для определения того что ползунок скролла находится в самом низу экрана, используем следующие значения:

$(window).height() – высота окна браузера;

$(document).height() – высота документа (другими словами высота нашего сайта).

$(window).scrollTop() – значение ползунка скрола. То есть высота на которую поднимается контент сайта вверх, за пределы видимой части браузера при перемещении ползунка скролла.

Значит если $(window).height() + $(window).scrollTop() больше либо равно $(document).height() (высоте документа), значит можно утверждать, то ползунок находится в самом низу браузера.

Бесконечная прокрутка Супер плагин WordPress

Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress! Сегодня вы узнаете как можно очень просто и быстро сделать на своём сайте бесконечную прокрутку любых типов записей. Вы сможете сделать бесконечную прокрутку для страниц, записей, медиафайлов, изображений, чата, аудиозаписей, ссылок, галерей, видео и т.д.

Мастер Йода рекомендует:  5 упущений программистов в системах безопасности

Вы сможете добавить бесконечную прокрутку на любую страницу с помощью простого шорткода. Создать шорткод можно прямо из меню визуального редактора WordPress.

Бесконечная прокрутка записей плагин WordPress

Установить Супер плагин Ajax Load More – Infinite Scroll вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Далее, после установки и активации плагина, перейдите на страницу: Ajax Load More – Settings . Здесь вы сможете настроить основные параметры плагина.

Для начала нужно настроить основные параметры:

– Container Type, здесь можно изменить тип контейнера, но не обязательно.

– Container Classes, можно добавить классы для контейнера, не обязательно.

– Disable CSS, можно отключить CSS стили плагина, чтобы использовать свои стили. Не обязательно.

– Button/Loading Style, здесь вам нужно выбрать стиль загрузки контента. У вас на выбор два варианта – кнопка или бесконечная прокрутка. Нажмите по полю “Chasing Arrows”, чтобы выбрать подходящий для вас вариант.

– Button Classes, можно добавить классы для кнопки. Не обязательно.

– Ajax Security, защита URL адресов от злоупотребления Ajax запросов. Рекомендуется включить.

– Top of Page, на начальной странице загрузки, переместить окно браузера пользователя в верхнюю часть экрана. Это может помочь предотвратить загрузку ненужных сообщений.

– Dynamic Content, отключить динамическое население категорий, тегов и авторов в шорткод Builder. Рекомендуется , если у вас есть необыкновенное количество категорий, тегов и / или авторов.

– Editor Button, можно скрыть кнопку для создания шорткодов из визуального редактора WordPress, на странице редактирования записи или страницы.

– Error Notices, уведомления об ошибках. Рекомендуется включить.

Далее, мы будем создавать шорткод для добавления на сайт бесконечной прокрутки. Вы можете создать шорткод на странице – Shortcode Builder .

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

Что в первом, что и во втором варианте, настройки абсолютно одинаковые, сейчас мы их разберём:

– Template, шаблон оставьте по умолчанию, ничего менять здесь не надо.

– ID, если вы собираетесь добавлять бесконечную прокрутку на несколько страниц, с разными типами вывода записей, то вам нужно указать здесь уникальный идентификатор, чтобы шорткоды отличались. Нажмите под полем на вкладку – Generate Unique ID, чтобы добавить уникальный ID.

– Container Type, можно указать тип контейнера. Не обязательно.

– Container Classes, можно добавить классы для контейнера, не обязательно.


– Label, можно добавить свою надпись на кнопку, если в основных настройках вы выбрали кнопку. Если вы выбрали бесконечную прокрутку, здесь можно ничего не менять.

– Loading Label, здесь можно указать надпись, которая отображается на кнопке во время загрузки контента.

– Images Loaded, загружать изображения перед загрузкой основного содержимого. Не обязательно включать данную функцию.

– Pause, не загружать сообщения пока пользователь не нажмёт на кнопку.

– Enable Scrolling, включите данный параметр, чтобы включить бесконечную прокрутку. При прокрутки страницы записи будут автоматически подгружаться, то есть на кнопку жать не надо.

– Scroll Distance, расстояние от нижней части экрана, чтобы вызвать загрузку сообщений. (По умолчанию = 150)

– Maximum Pages, максимальное количество страниц для загрузки во время прокрутки. (0 = без ограничений)

– Pause Override, разрешить прокрутку, чтобы переопределить параметр Pause и запустить загрузку сообщений при прокрутке.

– Transition Type, можно выбрать стиль загрузки перехода.

– Transition Speed, скорость перехода в миллисекундах.

– Transition Container, удалить контейнер загрузки, не рекомендуется!

– Destroy After, удалить ajax загрузку после загрузки определённого количества страниц (укажите количество в поле). Не обязательно!

– Posts Per Page, укажите здесь сколько будет загружаться записей или страниц за один раз.

– Post Type, выберите здесь, какие типы записей вы хотите добавить в бесконечную прокрутку.

– Post Format, можно выбрать формат сообщений. Выберите стандартный формат, для вывода значений по умолчанию.

– Category, можно включить или исключить определённые категории. Ничего не выбирайте, тогда будут использоваться все категории.

– Date, можно указать дату, для запроса по дате архива, чтобы выводились записи из определённого архива. Не обязательно.

– Custom Fields (Meta_Query), можно выводить определённые пользовательские поля, указав здесь их данные. Не обязательно! Оставьте без изменений!

– Author, можно выбрать автора, чтобы выводились только его записи. Не обязательно!

– Search Term, здесь можно указать слово или слова, по которым будут выводиться записи. То есть, если в записи есть такое слово, значит запись будет показана. Не обязательно!

– Post Parameters, здесь можно включить или исключить определённые записи, указав их ID. Можно выбрать статус записи, например, опубликованные или нет.

– Ordering, здесь можно выбрать, по каким параметрам сортировать записи при выводе их в бесконечной прокрутке. Можно оставить по умолчанию.

– Offset, здесь можно задать смещение. Например, если указать 5, то первые 5 записей будут пропущены.

– Custom Arguments, через точку с запятой список разделенных пользовательских значений. Могут быть использованы для запроса по параметрам, не доступных в шорткоде. Не обязательно!

Далее, после создания шорткода, скопируйте готовый шорткод.

Шорткод необходимо добавить на страницу, где будет бесконечная прокрутка. Если в шорткоде вы выбрали тип записей post, то в бесконечной прокрутке будут выводится последние записи и т.д. Всё очень просто! Плагин лично проверял, всё работает!

Кстати, забыл рассказать, на вкладке “Repeater Templates” отображается код шаблона записей, которые будут отображаться в бесконечной прокрутке. Доступен только один шаблон, можно заказать дополнительные темы, но уже платно. Если вы разбираетесь в коде, то вы можете его изменить под себя.

JQuery плагин с бесконечной прокруткой

Я пытаюсь настроить бесконечную прокрутку на сайте, который я разрабатываю с Coldfusion, я новичок в javascript и jquery, поэтому у меня возникли некоторые проблемы, связанные с этим. Нужно ли иметь пагинацию на моем сайте, чтобы использовать плагин бесконечной прокрутки, или есть ли способ сделать это без него?

8 ответов

Для этого вам не нужен плагин с бесконечной прокруткой. Чтобы определить, когда прокрутка достигает конца страницы, с помощью jQuery вы можете сделать

Я использую ответ Хуссейна с запросами AJAX. Я изменил код так, чтобы он запускался с 300px вместо 10px, но он начал вызывать умножение моих добавлений до того, как завершился запрос AJAX, поскольку вызов прокрутки срабатывает гораздо чаще в диапазоне 300px, чем в диапазоне 10px.

Чтобы исправить это, я добавил триггер, который будет отображаться при успешной загрузке AJAX. Мой код выглядит примерно так:

затем в своем ответе AJAX я установил для scrollLoad значение true .

Я создал небольшой пример Хусейна, чтобы создать виджет jQuery. Он поддерживает localStorage для временного сохранения добавленных результатов, а также имеет функцию паузы, чтобы периодически останавливать добавление, требуя щелчка для продолжения.

Дайте ему попытку:

Если у вас есть какая-то ссылка, например ваш нижний колонтитул, вы можете использовать этот код, скажем, у вас есть div нижнего колонтитула с идентификатором #footer:

Также, если вы хотите получить дополнительную информацию, ознакомьтесь с инструкциями по созданию бесконечной прокрутки в руководстве по jquery http://dumpk.com/2013/06/02/how-to-create-infinite-scroll-with-ajax-on-jquery/

Кто-то попросил объяснений, так вот объяснение

здесь $ (document) .height () -> — высота всего документа. В большинстве случаев это равно элементу текущего документа.

$ (window) .height () -> высота окна (браузера) означает высоту всего, что вы видите в браузере.

$ (window) .scrollTop () -> Свойство Element.scrollTop получает или задает количество пикселей, на которое содержимое элемента прокручивается вверх. Элемент scrollTop — это измерение расстояния от вершины элемента до его самого видимого содержимого. Если содержимое элемента не генерирует вертикальную полосу прокрутки, тогда его значение scrollTop по умолчанию равно 0.

добавьте $ (window) .scrollTop () с $ (window) .height (), теперь проверьте, равен ли результат вашей высоте документа или нет. если оно равно, значит, вы достигли конца. мы добавляем также 100, потому что я хочу проверить до 100 пикселей снизу документа (примечание 0

Я написал эту функцию, используя идеи Хусейна и Ника, но я хотел, чтобы она использовала обещания для обратного вызова. Я также хотел, чтобы область бесконечной прокрутки находилась на фиксированном элементе div, а не только в окне, если элемент div отправлялся в объект параметров. Пример этого есть во второй ссылке ниже. Я предлагаю использовать библиотеку обещаний, такую как Q, если вы хотите поддерживать старые браузеры. Метод cb может быть или не быть обещанием, и он будет работать независимо.

Если вы хотите, чтобы подача временно прекращалась, вы можете вернуть false в методе cb. Полезно, если вы достигли конца канала. Его можно запустить снова, вызвав метод возвращенного объекта infiniteScroll ‘setShouldLoad’ и передав true и example, чтобы согласиться с приведенным выше кодом.

Бесконечная прокрутка на Jquery

Друзья, подскажите пожалуйста как быть.

Есть код бесконечной прокрутки

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

А именно, на странице index.php сделать 3-4 ссылки, нажимая на которые меняется значение table в файле ajax.php вот строка

Например есть 4 таблицы с данными машина, мотоцикл, ведро, нос. при первом запуске скрипт выгружает данные из таблицы машина и работает с ней. После нажатия на остальные ссылки, соответственно переключается на работу с ними.

Буду очень благодарен за помощь.

Javascript
29.07.2014, 18:25

Прокрутка комментариев на JQuery
Привет. Дано: есть комментарии на сайте. Добавляются комментарии в линию (горизонтально) На.

Циклическая прокрутка слайдера / jQuery
Здравствуйте! Как сделать циклическую прокрутку слайдера? То есть если у меня X слайдов, то нужно.

Прокрутка страницы средствами jquery
Здравствуйте друзья. Подскажите, пожалуйста, как средствами jquery или css сделать так, чтобы при.

Бесконечная прокрутка изображений
Подскажите пожалуйста, как сделать «бесконечную» прокрутку изображений var galleryItems = null;.

Почему не получается бесконечная прокрутка на js?
У меня полоса крутит до последней фотографии и останавливается, а как сделать чтобы она по клику.

29.07.2014, 18:25

Плавная прокрутка до якоря без jQuery
Приветствую. Пишу на JS без jQuery. Нигде не могу найти, как задать скорость выполнения функции.

Прокрутка на jQuery: прокрутить на 60 пикселей выше, чем элемент с нужным id
Есть код прокрутки до нужного id Как сделать чтобы прокручивалось выше на 60 пикселей до id ? .

Бесконечная прокрутка
Здравствуйте, есть ListBox, в который динамически подгружаются элементы. Есть ли методы определить.

jquery топ Есть ли бесконечный плагин прокрутки с кнопкой загрузки больше?

самые нужные плагины для wordpress (4)

Привет, кто-нибудь знает, где я могу получить бесконечный плагин прокрутки, который имеет кнопку, которую вы нажимаете, прежде чем загружать больше сообщений?

вот что они ищут (посмотрите на более кнопку в правом нижнем углу)

В текущей версии Infinite Scroll Plugin (2.1.0) вы можете просто приостановить загрузку элементов, а затем возобновить и проверить, нужно ли загружать новый контент нажатием кнопки (или что-то еще):

В основном у вас должно быть css- переполнение: прокрутка и больше кнопки должны добавить больше html для вашего контейнера Div с помощью jquery append — http://api.jquery.com/append/

Если вы ищете бесконечный свиток, это одно, но просто кнопка More не требует плагина.

Функция .load сделает вызов AJAX к предоставленному URL, и дополнительный селектор просто вытащит этот конкретный согласованный элемент. В этом случае, если параметр? Page на вашей странице отображения управляет смещением в запросе, чтобы вытащить нужные элементы, то при загрузке URL-адрес будет добавляться следующий набор элементов при каждом вызове.

Конечно, вы можете создать уникальную страницу AJAX, которая просто вернет фрагменты HTML для следующего набора элементов, но это немного больше зависит от вашей архитектуры. Однако вы сохраните пропускную способность / время выполнения, выполнив это.

На странице документации плагина бесконечного прокрутки jQuery:

В 1.4 вы можете запускать загрузку следующей страницы контента по своему усмотрению. Сначала вы отключите поведение по умолчанию. И затем запускайте следующую попытку, когда захотите.

Добавить комментарий