Уроки jQuery практика- делаем lazy load прокрутку
HTML-код
- Опубликовано: 28 сен 2024
- Мы продолжаем уроки jQuery практика и в этом видео мы вместе сделаем lazy load прокрутку своими руками. Вы везде можете встретить кнопку посмотреть еще или более старый контент или показать еще. Вот именно этим мы займемся в этом уроке jQuery. Как для практики я думаю всем будет интересно по jQuery. И даже как пример на jQuery тоже неплохой.
========================================================
ПОДПИШИСЬ на канал "Web Developer Blog" - goo.gl/Ai4OGa
И не пропускай новые видео!!!
========================================================
ПЛЕЙ-ЛИСТЫ МОЕГО КАНАЛА:
JavaScript практика - goo.gl/rxsyeX
Основы JavaScript - goo.gl/Cw7Vqv
Уроки Bootstrap 4 - goo.gl/65gmmS
Уроки Framework для верстки Foundation 6 - goo.gl/Yi2jfc
Рубрика "Основы за 10 минут" - goo.gl/QIvpDD
Верстка сайта на Foundation 6 - goo.gl/gVS45o
Основы препроцессора SASS - goo.gl/f4BDww
Уроки по Sublime text 3 - goo.gl/SjiKM2
Видео про заработок на RUclips - goo.gl/VxdirI
Создаем интернет магазин на PrestaShop - goo.gl/jop7M4
Уроки jQuery - goo.gl/tjAs41
========================================================
ПОДПИШИСЬ на Группу Вконтакте "Web Developer Blog" - goo.gl/6mO5GL
========================================================
Сделай урок по AJAX загрузке страниц. Контент подгружается, когда листаешь страницу вниз.
Хорошо!
Только без всяких там jQ!
динамическая подгрузка только видимых элементов очень кстати полезная фича. особенно актуально когда какой-то большой каталог с картинками на много мб..листаем вниз img подгружается.
одно из немногих видео, у которых работает код)) я подписан, но почему то только узнал)
Спасибо огромное. Отличный код, а как сделать что бы при нажатии на другую кнопку так же скрывался контент?
По моему это не совсем подходит для сайта. Было бы хорошо как то подгружать сами новости с помощью пхп, а не просто чтобы они изначально были скрыты, а потом их тупо показывать. Все таки это большая нагрузка. Проще тогда уже выводить пагинатор
Это как урок для практики jQuery, для проекта там уже надо смотреть под само ТЗ и требования)
Допустим в этих div находятся картинки и на странице 50 блоков. Будет ли влиять на скорость загрузки страницы? Или картинки будут грузится по мере подгрузки?
интересный урок, но мне кажется можно добавить какое-то изменение для кнопки когда скрытый контент закончится)
А так, спасибо!
Можно и так
вернее if ($('.class:hidden').length == 0) {$(.btn).hide()}
Как убрать клавишу, когда закончились элементы?
if (!products) {
$('#load_more').fadeOut(200);
}
Что-то наподобие этого хотелось бы сделать
Нашли ответ в итоге?
ИМХО: более качественного обучающего контента чем у тебя, из ныне активных каналов я не видел.
P.S. Не знаю, работаешь ли ты с CMS`ками, но если да, не мог бы ты записать пару уроков по натяжки верстки на WP(с переводом всех статических элементов в динамические, разумеется)? Я до сих пор не нашел актуального(по версии WP) и доведенного до логического конца урока(оставляют страницу статичной :с).
В любом случае, спасибо за то что ты делаешь.
Посмотрим, может и сделаю, не буду пока что обещать)
Интересно посмотреть урок как сделать калькулятор допустим для такси с расстояниями, классом машин, наличный безналичный расчёт.
Это долго очень, тут стрим с таким нужно делать)
опять круто !!! лойс
Спасибо огромное!
сделай больше видео про jQuery
Что именно?
чтонибуть труднинкое ...
долго снимать что то трудненькое)
Тогда продолжай контент какой ты думаеш лудше.
Спасибо!
Всегда пожалуйста
Здравствуйте. Как скрыть кнопку, когда скрытый контент закончится?
добавить еще один метод для ее скрытия
Помогите пожалуйста, напишите если не сложно пример
А как сделать проверку что контент закончился и свернуть все автоматически?
Подумать логически и допилить теми же методами что и мы делали)
Ну это не совсем корректное Lazy Load. В ASP этот прием используется, потому что фреймворк или нода, не может выдать большую часть контента разом. А зачем использовать этот прием для красивостей не очень ясно. Спасибо конечно.
Блин, думал будут аякс-запросы, а тут анимашечки.
Сделаем
ЗБС
Название не соответствует содержанию. Загрузка при прокрутке не реализована, а тупо повешена на кнопку. Здесь скорее демонстрация метода slideDown() и не более. Второе. Контент уже загружен и он просто скрыт (невидим), т.е. один фиг время потрачено. В общем на Lazy load не тянет... Там где говоришь Мы создадим такую простую функцию, можно упомянуть,что делается аналог $('doument').ready() или сказать,что данная функция будет выполнена после полной загрузки страницы.
Хочу урок по такой же штуке только с php и сменой страниц пагинации, как на Розетке, например
Спасибо, обойдемся без пхп
А как сделать так чтобы при полном развороте всех блоков скрыть кнопку? КАК сделать галерею изображений чтобы они загружались к примеру по 3 штуки не горизонтально а вертикально?
Спасибо за ответ
$(function() {
$(".work-container").slice(0,1).show();
$(".load").on('click', function(e) {
e.preventDefault();
var elementId = $(".work-container:hidden");
if (elementId.length > 1) {
$('.work-container:hidden').slice(0,1).slideDown();
}
else {
$('.work-container:hidden').slice(0,1).slideDown();
$(".load").fadeOut();
}
});
}); //Кнопка пропадает как только все блоки с классом .work-container у которых дисплей:none заканчиваются
Это разве lazyLoad? При загрузке страницы ведь все прогружается, но просто не показывается, разве нет?
Как можно отследить, что весь контент уже открылся?
Нашли ответ в итоге?
Зачем столько времени на css потратил, если суть была в jquery?
Можно было просто показать итоговый css
Бред... Это не Load more, это Show more. Слово Load подразумевпет загрузку. Вы ничего не грузите. Нельзя так делать подгрузку товаров. Такой способ крайне не профессионален. Грузить изначально 100500 товаров, скрывать их, чтобы потом по кнопке отображать... точно бред...
Блин, немного разобрался в нативном js, как же круто работают все эти препроцессоры и либы и другие фичи для js
Супер, очень круто:)
Спасибо
а как сделать загрузку контента с другой страницы, сделал через .load() , но в таком случае происходит замена существующего контента...
$('.show-btn').click(function(){
$('.show-content').load('page.html .contents > *');
})
Есть ли возможность сделать так, чтобы контент не заменял, а добавлялся к существующему? Спасибо)
И какой тут AJAX? Не обманывай подписчиков. Это show/hide метод на jquery. Ajax предполагает загрузку с сервера.
А кто говорил вообще про ajax?
Хорошие уроки, спасибо, молодец УЧИТЕЛЬ).
А вот с точки зрения скорости загрузки сайта, данный метод увеличит её? Допустим показать начало фото-галереи, а потом всё через lazy load.
Я так понимаю станица html всё-равно полностью загружается, а затем скрывается ненужный контент, или если ccs-style подключены сначала страницы то и контент(картинки) не подтягивается из-за этого увеличивается скорость загрузки?
а как сделать загрузку контента с другой страницы? Сделал через .load() , но в таком случае происходит замена существующего контента...
$('.show-btn').click(function(){
$('.show-content').load('page.html .contents > *');
})
Есть ли возможность сделать так, чтобы контент не заменял, а добавлялся к существующему? Спасибо)
а что если мне нужно применить это не к div а к class = ".... что то там". ?! я писал так "class-name" и ничего не работает, подскажите
Класс, а как сделать в автоматическом режиме при прокрутке в низ как в соц. сети ВК?
nikto tak ne delaet lazy load )))))))
Jack _ , расскажи
суть в понимании на практике. И да, все зависит от проекта)
I like it :)
sposibo bolshoe!
кем ты работаешь и где ?
Очень хорошие уроки, я думаю если бы ты делал больше подобных видео со всякими фичами, то ты бы быстро набрал большую аудиторию, просто не всегда люди в гугле находят то что есть на ютубе, например.. я не когда особо не задовался таким вопросом как подгружать блоки.. а теперь я это знаю.. и думаю что использую) Спасибо за уроки! Очень круто!
Рассказывайте друзьям о канале! Спасибо!
привет. не хватает проверки, когда все элементы уже показаны, а кнопка LoadMore все еще там... ее не должно быть
Странно, в видео тоже так?
там именно так
Получается, элементы просто скрыты от глаз, но все равно подгружаются сразу при открытии страницы?
Примерно так)
привет, расскажи пожалуйста как передавать переменные с одной страницы не другую.. какие варианты есть и как более правильно сделать.
Для каких целей?
да целей много, самое простое с раскрывающимся аккордеоном в зависимости от того по какой ссылке пришли.
я делаю примерно так. к ссылке URL добавляю чего нибудь, а на второй странице уже парсю URL, если в нем переменная такая-то ..то дальнейшие действия. думаю новичкам интересно будет. информации в видео почти не встречал.
Спасибо большое за урок! Все доходчиво объяснил)
То чувство, когда до тебя элементарное еле как доходит:с
Все нормально
а как с бд совмещать ? было бы лучше если с бд показал, а так спасибо!)
Я подумаю над этим
стоит ли изучать jquery ? или сразу писать на pure js?
ok, thanks
это то, что я долго искал, спасибо!
И обязательно делать ссылку а не кнопку (button)?
Можно же упростить все эти муки, например
$(function(
$("#loadMore").on('click', function(){
$("div:hidden").slice(0,4).show()
})
)}
И вам спасибо! Делаете как захотите)
Корзина для интернет магазина на Jquery!
Будет!!!
А с древовидными комментариями, как в этой ленте, прокрутка будет работать?
Не до конца понял вас
Спасибо, дружище! Внедрил код в свои древовидные комментарии Joomla.
Спасибо за видео.Благодаря тебе много чего уже узнал!
Спасибо! Радует!
а как можно сделать из полного описание товара краткое с ссылкой read more... ? и чтобы величина блока краткого текста была фиксированная
+PAUL KAMEL да кстати почти так же как в видео, только это все для блока с контентом прописывать
И оно должно будет само обрезать текст в нужном месте?
Спасибо. Если несложно приводи прототип нового метода из документации с лёгким объяснением в сплывающем окне в своих видео.
Не понял до конца что вы имеете ввиду(
Web Developer Blog Например пишешь метод slice и на 3 секунды появилось всплывающее сообщение .slice( start [, end ] )
Спасибо за уроки, у Вас приятный канал, желаю удачи!
Рассказывайте друзьям о канале!
спасибо!!! буду пробовать =)
Обязательно попробуйте самостоятельно написать
Ajax запросы , можно разобрать ?
Можем)
Web Developer Blog ,
Ждём)),
Только детально ,что бы была очень понятна суть ,пожалуйста.
5.11.17.
Что это за дата?
Блин, я думал что-нибудь интересное. Эти все не могут успокоиться. Нахрен сюда-то с этим бредом лезть.
Леха Ли ,
Жизнь это политика ,
Политика это жизнь,
Что может быть интересней жизни?
(Программирование это тоже часть жизни)) )
lazy load насколько мне известно это подгрузка контента, причем тут вообще прокрутка и lazy load.