Сними, как правильно вставлять в flex-контейнере (когда в блоке справа, например, а слева - блок с текстом, к примеру). Ещё можно снять про то, как оптимизировать для мобильных устройств скорость загрузки роликов с внешних ресурсов (чтобы была 90-100).
Раз уж используете foreach для NodeList , который IE не поддерживается, то проще было использовать intersectionobserver чтобы не загружать браузер отслеживанием скролла и мозг лишними вычислениями.
@@FreelancerLifeStyle Я думаю, что им следовало бы знать про intersectionobserver, а не по скроллу по миллиону раз чтобы браузер делал такие расчеты. За async/await и fetch респект, но вот пересечение с вюпортом элементов нужно делать с помощью intersectionobserver. Большой выигрыш в производительности и меньше голову забивать вычислениями никому не нужными. Да и lazy load библиотеки современные его используют.
Небольшой комментарий по поводу SEO-оптимизации: 1. Не добавляете ленивую загрузку для Ваших уникальных изображений. Им важно появиться в индексе. Это Ваш эксклюзив, это Ваш инструмент продвижения. Для копипасты можно смело поступать наоборот. 2. Не добавляйте ленивую загрузку для самых важных страниц сайта: Главной, Каталога (разводящий страницы в категории товаров), О нас итп. Для менее важных страниц делайте наоборот. Успехов!
Спасибо за видео! Только я бы эту проверку не проводил (if(img.dataset.src || img.dataset.srcset)): из за того что если где то не заполнен атрибут, (нет значения), массив lazyImagesPositions может получиться с другим количеством элементов чем lazyImages. А в LazyScrollCheck () мы используем индексы массива lazyImagesPositions для работы с lazyImages. Массивы должны быть одинаковой длинны для корректной работы.
Классно, но ты забыл добавить переопределение координат на событие resize, если этого не сделать, то при смене ориентации все это будет неправильно работать. Ну есть проблема, если страница грузится с позицией ниже картинок, то такой подход не сработает.
Для тех, кого заботит СЕО на сайте, советую это не использовать) Потратил пару часов на понимание всего этого дела, а в конце автор говорит что при таком способе отложенной загрузки картинки не видно поисковикам
А никто разве не заметил траблу, когда на десктопе в фул-скрин окна браузера подгрузка не корректно работает? Получается прогрузка срабатывает уже после того, как юзер проскролил блок со скрытым контентом. Начинаешь корректировать формулу - на моб перестает корректно работать.
Жека, привет, спасибо за контент! В твоем коде, который касается подгрузки картинок , есть один маленький недочет, если его можно так назвать. Если картинки имеют одинаковую позицию, то есть если в масиве lazyImagesPositions будет например [1200, 1200, 1200] ( типо картинки в ряд, ну как и было у тебя в видео), и мы будем медленно скроллить, то как только мы первый раз дойдем до картинок и остановимся, то в ряде подгрузится всего одна, потом если скрольнуть еще раз, то подгрузится еще одна и т.д . Это конечно вряд ли кто то заметит, потому что вряд-ли кто-то медленно скроллит. Но если так скроллить стрелочкой вниз на клавиатуре (да и мышкой тоже можно) , то можно попасть на момент, где из всех картинок в ряде торчит на четверть только одна(которая загрузилась), а остальные бесконечно грузятся, потом делаешь еще один скролл и появляется вторая картинка и так далее. А если в ряду будет например 5 картинок, то можно дойти до того, что последняя будет бесконечно грузиться, когда другие уже торчат на 3/4, либо полностью . Я поправил код, по ссылке можно посмотреть: pastebin.c om/eXdYRv5L.
Женя, почитай про класс IntersectionObserver. Всё что ты делал уже предусмотрено в одном классе, очень удобно юзается без лишних проверок и слушателей событий
Ха, зашел сюда чтобы тоже об этом API написать, но решил сначала глянуть комменты. Действительно, то, что предлагает Жека уже давно "вчерашний день". Англоязычные контент-мейкеры еще в 2019 выкладывали ролики о том, как юзать IntersectionObserver для подобных нужд. Также, недавно смотрел собеседование на джуна где тоже советовали использовать именно IntersectionObserver, а не обвешивать всё слушателями скролла, высоты или ширины окна.
Женя привіт. А не підкажеш чи можливо за допомогою input type="radio" змінювати фон sidebar в реальному часі без JS? Я робив ось так але нічого не відбувається: .pink-fon:checked ~ .sidebar { margin-right: 5px; background: linear-gradient(to bottom, #660641, #cf51a9, #e76fd7); border-radius: 8px; padding: 10px; }
коментарій для тих хто не знає як вставляти карту)) в картах гугл зліва надимаєм бургер, там є пункт вставити карту або поділитись, далі виходить віконце, вибираємо Вставити карту, і копіюємо html-код))
Да. Судя по коментам никто из просмотревших видео ничему из него не научился. Просто, видимо, скопипастили, посмотрели и всё. Наверное только я (как давний pythonista) пошёл на MDN смотреть что значит функция Element.getBoundingClientRect() и атрибут top возвращаемого ею объекта. Сразу стало ясно, что проверка видимости елементов сделана запутано и что никакой pageYOffset здесь не нужен. Учитесь правильно, детки, и ходите на MDN выяснять что значат те или иные функции, объекты и атрибуты JS. Тупой копипастинг и повторение за автором - это пустое.
@@ЖеняЗавірюха Нет, не нужен. getBoundingClientRect().top становится отрицательным, если верхний край объекта выше viewport и больше размера viewport, если верхний край элемента ушёл вниз экрана (или если вы ещё до него не доскроллили). Т. е. прямо по этому свойству можно определить доскроллили ли до скрытого элемента или нет - без подсчёта кол-ва прокрутки. Вообще, я хотел ещё и код сюда скинуть, но уже устал всяким мамкиным погромистам указывать на их говнокод. Можете и дальше говнокодить. :)
@@valkdev Метод Element.getBoundingClientRect().top возвращает количество пикселей (расстояние) от верхнего края элемента Element к верхнему краю Viewporta. Да, может становиться отрицательным (верхний край элемента Element выше за верхний край Viewporta). При первой загрузке страницы pageYOffset = 0 и в массив lazyImagesPositions попадает только img.getBoundingClientRect().top, но если пользователь немного проскролил вниз (не до скроливая к скрытому элементу) и перезагружает страницу, то в массив lazyImagesPositions кроме img.getBoundingClientRect().top нужно добавить количество проскроленных пикселей (pageYOffset). Если этого не сделать, то в функции lazyScrollCheck в условии pageYOffset > item - windowHeight, значение item будет меньше и это условие будет срабатывать раньше, то есть скрытие картинки будут подгружаться ещё до момента когда ми к ним доскрилили. Все это можно проверить в панели разработчиков (F12) во вкладке Network. Надеюсь объяснил понятно.
Евгений, у меня вопрос, если вдруг в какой-то из картинок не будет src и srcset, то соответствие индексов картинок в массиве lazyImages и их позиций в массиве lazyImagesPositions слетит и этот пример будет работать не корректно, разве я не прав?
Евгений, добрый день. Спасибо за видос. Всё круто. Но почему то этот код с заменой data-src не работает в Safary... Не могли бы подсказать, как можно это пофиксить? Спасибо.
Нужен совет, возможно примеры если есть. Мне нужно отображать огромное количество точек. Иза большого количества точек, хочу реализовать динамическую подгрузку. Также, если несколько точек лежат близко одна к одной, они при взгляде издалика(ну без приближение) обьединяються в одну точку(все объединение и тд уже реализовано на сервере, с этим париться не надо). Если что, этих обьединений может быть несколько(то есть обьединенные точки ище раз объединяются). Грубо говоря, у нас просто есть несколько типов точек(без объедение, с одним обьедедением...). Вот как такую подгрузку реализовать(Ангуляр). У меня есть идея, которая стоит в разбиении поля с точками на равные квадтраты(допустим 9 на 9). Тогда в каждом квадрате будет ище 9 квадратов (повторяем разбиение до нужного размера). Ну и если экран захватывает целый квадрат, то он не разбиваеться, а прогружаються точки верхнего уровня. Есть у кого лучше идеи? Ну или какое-то догадки как это в реальности написать.
Спасибо Женя, вчера вот со слайдером слик разбирался, там ты тоже lazy load, упоминал. А сегодня уже новый ролик и уже про карту и доп контент. Круто) Ты крутой учитель.
Видео хорошее, но иногда бесит, что ты любишь использовать технологии, про которые даже не делал видео и использовать там те термины, которые не понять человеку, смотрящему только твой контент. К примеру, откуда я должен знать, что за эдакая такая асинхронная функция, когда первый раз в жизни ее вижу. Я все понимаю, что иногда нужно использовать то, что еще не изучали, но тогда пожалуйста объясняй, что ты делаешь, а то приходится лезть в документацию.
Краще не юзати delete тому що реактивність яка була зроблена в ES6 стає в сотні тисяч разів менше! є багато цікавих статей в яких описується array holes і їх проблеми! Для подібного лендінгу - це не проблема, але краще уникати дир в массиві! найшвидше по новим стандартам оброблюються однотипні массиви Number[], String[], Object[] якщо масив змішаний він обробляється повільніше, а зовсім вся швидкість пропадає коли з'являються дири в массиві! В данному випадку краще зробити lazyImagesPositions.splice(imgIndex, 1) Все круто пояснюєш) Хоч все це знаю, але приємно дивитись!!!
Привет всем. Начал делать с урока всё тоже самое, но в скрипте вот это "pageYOffset" перечёркнуто и ничего не работает, картинки не грузятся. Печаль ) Опять, наверно, за год чот поменяли или я где-то не то жму. Женя - тебе успехов и спасибо в любом случае!
Здравствуйте. Извините, что не по теме видео. Что Вы думаете о "Дія Сіті" законопроект 4303? Интересно Ваше мнение. Может осветите это в каком-нибудь видео?
Скажи, пожалуйста, что нужно знать для создания сайтов на фрилансе(не самый минимум, у меня времени полно)? Я в гугле нашёл список: HTML и CSS; Gulp; jQuery; SASS; Bootstrap; Git; npm. Это пойдёт? Что добавить, а что лишнее? Я сейчас изучаю JS и заканчиваю CSS и HTML
Минусы такого лейзи-лодинга: 1-Нет использвания throttle-декоратора. А значит весь код будет отрабатывать очень много раз в секунду. 2-Функция lazyLoadCheck находит только первый подходящий элемент и обрабатывает только его, даже если таких элементов будет несколько, например идущие в горизонтальный ряд картинки. Впрочем, за счет минуса из п1. этот нивелируется ))
Вопрос в следующем. Предположим, что кто-то листает страницу с бесконечным скролом на слабом устройстве с небольшим размером оперативки. Что будет, когда память закончится? Сами браузеры это как-то решают, очищая предыдущие записи или в какой-то момент сайт просто повиснет? Я понимаю, что это уже редкость, устройства с 500Мб оперативки, но все же. Контент тоже разный бывает. Допустим, если это «бесконечная» фотогалерея, то память будет забиваться очень быстро.
Як на мій погляд, обчислення координат зайве, достатньо перевірити входження об'єкту в межі екрану і зберегти логічне значення в масив з потрібним індексом елемента. let indexesInBounds = []; ... const rect = obj.getBoundingClientRect(); ... indexesInBounds.push(rect.bottom > 0 && rect.top < windowHeight);
Жека привет) Нужна помощь. Захожу на апворк , портфолио есть, все готово, но там везде ВордПресс, натяжка и тд. С вёрсткой все отлично, учу js, боюс взять первый заказ, можешь дать совет? Когда видео по ВП? 😄✌️
Евгений, у меня возникает проблема при загрузке карты: карта подгружается в размере 300 x 150, грузится в левом верхнем углу, и при этом лоадер не исчезает. Как решить эту проблему?
Спасибо, годный контент. Я то знаю тут все, не бду до конца смотреть. Жека сказал, или нет, будьте аккуратны с данным плагином, не повсеместно его применяют, и в нем есть баги, картинки могу вообще не погрузиться! я всех нюансов с ходу не помню, лучше по гуглите. ну и вообще, имейте привычку гуглить на предмет возможных багов с тем или иным плагином! а то оно то все просто, ша посмотрели, завтра поперли везде его тыкать, даже там где он не надо... а потом попа боль...))))
Евгений, обожаю ваше видео. Долго думал как сделать календарь с проматыванием, но ту появились вы с slick slider и спасли мне кучу времени и нервов. Прошу вас сделайте прo php, mysqli и всё такое. Я думаю многим пригодиться. После вас не могу смотреть другие видео, слишком скучно не понятно для моего мозга, ведь мне 14)
Большое спасибо за видео! У меня вопрос: когда все элементы уже загружены и запускается функция LazyScroll(), не правильнее ли было бы удалять EventListener, вместо постоянных проверок длины массива при event "scroll"?
А что делать с индексацией изображений поисковыми роботами? по сути, при данной реализации, на страница картинки нужные отсутствуют,а появляются только в момент исполнения JS кода. Как роботы взаимодействуют с таким контентом? Тоже самое и с текстом. Его ведь не существует на странице, получается контента текстового нет для работов
Привет, очень бы хотелось видос в котором покажешь свайпер на практике, например как при активно слайде делатт его большим или же например как сделать слайдам флексбокс адаптивную высоту и так далее
Женя, привет!!! Как всегда показал качественный материал!!! Наберусь наглости, и попрошу ещё раз, завершить серию уроков по JS) Заранее спасибо огромнейшее!!!
Что еще снять?
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
A trick : watch series at Flixzone. Me and my gf have been using it for watching loads of movies lately.
@Calvin Rocco yup, I have been watching on flixzone for since december myself :)
Просьба снять видео о подключении баз данных, очень актуально!!!
Сними, как правильно вставлять в flex-контейнере (когда в блоке справа, например, а слева - блок с текстом, к примеру). Ещё можно снять про то, как оптимизировать для мобильных устройств скорость загрузки роликов с внешних ресурсов (чтобы была 90-100).
Евгений, вы - прекрасный человек! А ваши видео - превосходны!
P.S. Уже не знаю, какими словами восторгаться)
Спасибо большое!
Добрейший ты человек Женя ... низкий поклон тебе!
Спасибо!
@@FreelancerLifeStyle почему на Udemy платные курсы не запилишь?
@@boycovclub потому что у него не стандартный подход, именно поэтому он за полтора года обошёл всех коллег по количеству подписчиков)
@@Андрій-т8р ну я бы не сказал что его урок по галпу на столько хорош ))
Залетел на вечеринку одним из первых) Привет от ученика! Спасибо, что делаешь нас умнее)
Пожалуйста!
Раз уж используете foreach для NodeList , который IE не поддерживается, то проще было использовать intersectionobserver чтобы не загружать браузер отслеживанием скролла и мозг лишними вычислениями.
Я думаю что тем кто сейчас учится IE поддерживать уже не нужно
@@FreelancerLifeStyle Я думаю, что им следовало бы знать про intersectionobserver, а не по скроллу по миллиону раз чтобы браузер делал такие расчеты. За async/await и fetch респект, но вот пересечение с вюпортом элементов нужно делать с помощью intersectionobserver. Большой выигрыш в производительности и меньше голову забивать вычислениями никому не нужными. Да и lazy load библиотеки современные его используют.
@@FreelancerLifeStyle А вот чтобы loading="lazy" заработал, нужно указывать width и height для img. В вашем примере я этого не увидел.
@@xdevelx возможно, но кто будет прописывать размеры каждой картинке, плюс это скажется на адаптиве. Про intersectionobserver почитаю, спасибо
Ооо вот так доброе утро. Проснулся, а тут Жека топовый контент завозит 👍
Да да)
Отличная тема! Давно хотел разобраться. Обязательно к просмотру)
Я рад!
Небольшой комментарий по поводу SEO-оптимизации:
1. Не добавляете ленивую загрузку для Ваших уникальных изображений. Им важно появиться в индексе. Это Ваш эксклюзив, это Ваш инструмент продвижения. Для копипасты можно смело поступать наоборот.
2. Не добавляйте ленивую загрузку для самых важных страниц сайта: Главной, Каталога (разводящий страницы в категории товаров), О нас итп. Для менее важных страниц делайте наоборот.
Успехов!
Хорошая идея, спасибо!
Спасибо за видео! Только я бы эту проверку не проводил (if(img.dataset.src || img.dataset.srcset)): из за того что если где то не заполнен атрибут, (нет значения), массив lazyImagesPositions может получиться с другим количеством элементов чем lazyImages. А в LazyScrollCheck () мы используем индексы массива lazyImagesPositions для работы с lazyImages. Массивы должны быть одинаковой длинны для корректной работы.
А правда что автор отвечает??????
Говорят что правда)
День добрый, почему бы не использовать IntersectionObserver, это же куда проще?
Как реализовать отложенную загрузку Яндекс. Карты, Метрики?
Це найкращий освітній контент на тему верстки в ютубі !! Дякую за твою робту. Будь ласка не переставай цим займатись! Добра тобі :)
Классно, но ты забыл добавить переопределение координат на событие resize, если этого не сделать, то при смене ориентации все это будет неправильно работать. Ну есть проблема, если страница грузится с позицией ниже картинок, то такой подход не сработает.
Для тех, кого заботит СЕО на сайте, советую это не использовать) Потратил пару часов на понимание всего этого дела, а в конце автор говорит что при таком способе отложенной загрузки картинки не видно поисковикам
Как раз дошел до оптимизации, как же всё вовремя:)
Я рад!
А никто разве не заметил траблу, когда на десктопе в фул-скрин окна браузера подгрузка не корректно работает? Получается прогрузка срабатывает уже после того, как юзер проскролил блок со скрытым контентом. Начинаешь корректировать формулу - на моб перестает корректно работать.
З.Ы. и в "каруселях" странно работает: грузит картинку через одну.
Жека, привет, спасибо за контент! В твоем коде, который касается подгрузки картинок , есть один маленький недочет, если его можно так назвать. Если картинки имеют одинаковую позицию, то есть если в масиве lazyImagesPositions будет например [1200, 1200, 1200] ( типо картинки в ряд, ну как и было у тебя в видео), и мы будем медленно скроллить, то как только мы первый раз дойдем до картинок и остановимся, то в ряде подгрузится всего одна, потом если скрольнуть еще раз, то подгрузится еще одна и т.д . Это конечно вряд ли кто то заметит, потому что вряд-ли кто-то медленно скроллит. Но если так скроллить стрелочкой вниз на клавиатуре (да и мышкой тоже можно) , то можно попасть на момент, где из всех картинок в ряде торчит на четверть только одна(которая загрузилась), а остальные бесконечно грузятся, потом делаешь еще один скролл и появляется вторая картинка и так далее. А если в ряду будет например 5 картинок, то можно дойти до того, что последняя будет бесконечно грузиться, когда другие уже торчат на 3/4, либо полностью . Я поправил код, по ссылке можно посмотреть: pastebin.c om/eXdYRv5L.
Спасибо бро, тоже заметил этот баг, помимо косяков что ты описал, картинки могут не прогрузиться при резком скроллинге вниз.
Женя, почитай про класс IntersectionObserver. Всё что ты делал уже предусмотрено в одном классе, очень удобно юзается без лишних проверок и слушателей событий
Ага, есть такое
Ха, зашел сюда чтобы тоже об этом API написать, но решил сначала глянуть комменты. Действительно, то, что предлагает Жека уже давно "вчерашний день". Англоязычные контент-мейкеры еще в 2019 выкладывали ролики о том, как юзать IntersectionObserver для подобных нужд. Также, недавно смотрел собеседование на джуна где тоже советовали использовать именно IntersectionObserver, а не обвешивать всё слушателями скролла, высоты или ширины окна.
Женя привіт. А не підкажеш чи можливо за допомогою input type="radio" змінювати фон sidebar в реальному часі без JS? Я робив ось так але нічого не відбувається:
.pink-fon:checked ~ .sidebar {
margin-right: 5px;
background: linear-gradient(to bottom, #660641, #cf51a9, #e76fd7);
border-radius: 8px;
padding: 10px;
}
Как же я люблю тебя!!! Улыбка на лице как только вижу новый видос
Супер! Рад что полезно!
коментарій для тих хто не знає як вставляти карту)) в картах гугл зліва надимаєм бургер, там є пункт вставити карту або поділитись, далі виходить віконце, вибираємо Вставити карту, і копіюємо html-код))
Лучший учитель! Сначала вообще не понимал эту тему, а теперь хвастаюсь перед друзьями! Спасибо Дядя Женя!
Пожалуйста!
Да. Судя по коментам никто из просмотревших видео ничему из него не научился. Просто, видимо, скопипастили, посмотрели и всё.
Наверное только я (как давний pythonista) пошёл на MDN смотреть что значит функция Element.getBoundingClientRect() и атрибут top возвращаемого ею объекта. Сразу стало ясно, что проверка видимости елементов сделана запутано и что никакой pageYOffset здесь не нужен.
Учитесь правильно, детки, и ходите на MDN выяснять что значат те или иные функции, объекты и атрибуты JS.
Тупой копипастинг и повторение за автором - это пустое.
Все правильно, но pageYOffset нужен.
@@ЖеняЗавірюха Нет, не нужен. getBoundingClientRect().top становится отрицательным, если верхний край объекта выше viewport и больше размера viewport, если верхний край элемента ушёл вниз экрана (или если вы ещё до него не доскроллили). Т. е. прямо по этому свойству можно определить доскроллили ли до скрытого элемента или нет - без подсчёта кол-ва прокрутки. Вообще, я хотел ещё и код сюда скинуть, но уже устал всяким мамкиным погромистам указывать на их говнокод. Можете и дальше говнокодить. :)
@@valkdev
Метод Element.getBoundingClientRect().top возвращает количество пикселей (расстояние) от верхнего края элемента Element к верхнему краю Viewporta. Да, может становиться отрицательным (верхний край элемента Element выше за верхний край Viewporta).
При первой загрузке страницы pageYOffset = 0 и в массив lazyImagesPositions попадает только img.getBoundingClientRect().top, но если пользователь немного проскролил вниз (не до скроливая к скрытому элементу) и перезагружает страницу, то в массив lazyImagesPositions кроме img.getBoundingClientRect().top нужно добавить количество проскроленных пикселей (pageYOffset).
Если этого не сделать, то в функции lazyScrollCheck в условии pageYOffset > item - windowHeight, значение item будет меньше и это условие будет срабатывать раньше, то есть скрытие картинки будут подгружаться ещё до момента когда ми к ним доскрилили. Все это можно проверить в панели разработчиков (F12) во вкладке Network.
Надеюсь объяснил понятно.
часу немає, а подивитися так хочеться... і головне щось навчитися. Лайк, коментар і в список - переглянути пізніше)
Дякую!
Евгений, у меня вопрос, если вдруг в какой-то из картинок не будет src и srcset, то соответствие индексов картинок в массиве lazyImages и их позиций в массиве lazyImagesPositions слетит и этот пример будет работать не корректно, разве я не прав?
Дякую
Евгений, добрый день. Спасибо за видос. Всё круто. Но почему то этот код с заменой data-src не работает в Safary... Не могли бы подсказать, как можно это пофиксить? Спасибо.
Нужен совет, возможно примеры если есть. Мне нужно отображать огромное количество точек. Иза большого количества точек, хочу реализовать динамическую подгрузку. Также, если несколько точек лежат близко одна к одной, они при взгляде издалика(ну без приближение) обьединяються в одну точку(все объединение и тд уже реализовано на сервере, с этим париться не надо). Если что, этих обьединений может быть несколько(то есть обьединенные точки ище раз объединяются). Грубо говоря, у нас просто есть несколько типов точек(без объедение, с одним обьедедением...). Вот как такую подгрузку реализовать(Ангуляр). У меня есть идея, которая стоит в разбиении поля с точками на равные квадтраты(допустим 9 на 9). Тогда в каждом квадрате будет ище 9 квадратов (повторяем разбиение до нужного размера). Ну и если экран захватывает целый квадрат, то он не разбиваеться, а прогружаються точки верхнего уровня. Есть у кого лучше идеи? Ну или какое-то догадки как это в реальности написать.
все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье
Евгений, спасибо за видео!
Можете пояснить почему мы используем готовый JS lazyload с гитхаба, а делаем кастомный код?
Спасибо Женя, вчера вот со слайдером слик разбирался, там ты тоже lazy load, упоминал. А сегодня уже новый ролик и уже про карту и доп контент. Круто) Ты крутой учитель.
Я рад!
Видео хорошее, но иногда бесит, что ты любишь использовать технологии, про которые даже не делал видео и использовать там те термины, которые не понять человеку, смотрящему только твой контент. К примеру, откуда я должен знать, что за эдакая такая асинхронная функция, когда первый раз в жизни ее вижу. Я все понимаю, что иногда нужно использовать то, что еще не изучали, но тогда пожалуйста объясняй, что ты делаешь, а то приходится лезть в документацию.
У тебя код неправильный. pageYOffset не нужен.
О Круто! Давно подумываю о таком, но руки не доходят на изучение данной темы!
В следующем заказе как раз есть карта а пару картинок..
Круть!
Искал одно , нашел другое , более полезное, как говориться искал медь, нашел золото
У меня одного не работает подгружающийся текст? Даже при том, что скачал материал из выпуска
Скажи что думаешь о редакторе Brackets
Какой же я тупой) вчера сидел сам пытался это реализовать, но не допер как определить что объект виден) спасибо))
Лучший!
а будет ли отдельное видео, как подключать гугл карты?
Ну, если нужно будет
У вас очень классные видео. А могли бы вы снять про то как стилизировать видеоплеер на сайте
Нахуя грузить одно и то же бесконечно я не понимаю
А как сделать что бы контент в ленте был разный, а не одинаковый текст?
Краще не юзати delete тому що реактивність яка була зроблена в ES6 стає в сотні тисяч разів менше! є багато цікавих статей в яких описується array holes і їх проблеми! Для подібного лендінгу - це не проблема, але краще уникати дир в массиві! найшвидше по новим стандартам оброблюються однотипні массиви Number[], String[], Object[] якщо масив змішаний він обробляється повільніше, а зовсім вся швидкість пропадає коли з'являються дири в массиві!
В данному випадку краще зробити lazyImagesPositions.splice(imgIndex, 1)
Все круто пояснюєш) Хоч все це знаю, але приємно дивитись!!!
Привет всем. Начал делать с урока всё тоже самое, но в скрипте вот это "pageYOffset" перечёркнуто и ничего не работает, картинки не грузятся. Печаль )
Опять, наверно, за год чот поменяли или я где-то не то жму.
Женя - тебе успехов и спасибо в любом случае!
Свойство pageYOffset устарело, я заменил его на scrollY и все заработало. Видео отличное!
Жень, а как на это посмотрят поисковики, Гугл, Яндекс и прочее? Или они норм data-src кушают?
Погугли про sitemap если ещё не разобрался)
Здравствуйте. Извините, что не по теме видео. Что Вы думаете о "Дія Сіті" законопроект 4303? Интересно Ваше мнение. Может осветите это в каком-нибудь видео?
Будет тут ua-cam.com/channels/JNVBfLijFSa_tBcrNZKZag.html
Супер! Дякую автору за його стиль викладання складного матеріалу
Большое спасибо, вы даёте больше знание чем мой учитель)
Я рад!
Отличное начало дня, мне нравится!
взял себе на вооружение))
Спасибо!
Неужели нет для этого библиотеки. которая упростит это
Женя можешь пожалуйста сделать выпуск про адаптивные, красивые карточки для сайта
Да, было бы здорово! Особенно на примере карточки сайта недвижимости.
Скажи, пожалуйста, что нужно знать для создания сайтов на фрилансе(не самый минимум, у меня времени полно)?
Я в гугле нашёл список:
HTML и CSS;
Gulp;
jQuery;
SASS;
Bootstrap;
Git;
npm.
Это пойдёт? Что добавить, а что лишнее?
Я сейчас изучаю JS и заканчиваю CSS и HTML
Просто нет слов ! вы лучший всех. первый видеоурок которое на 100% понятно ! огромное спасибо!
Пожалуйста!
А можно вместо lazyImages.lenght > 0, написать просто lazyImages.lenght или !lazyImages.isEmpty ?
Бесценный контент! Большое спасибо!
Минусы такого лейзи-лодинга:
1-Нет использвания throttle-декоратора. А значит весь код будет отрабатывать очень много раз в секунду.
2-Функция lazyLoadCheck находит только первый подходящий элемент и обрабатывает только его, даже если таких элементов будет несколько, например идущие в горизонтальный ряд картинки.
Впрочем, за счет минуса из п1. этот нивелируется ))
осталось добавить проверку браузера, чтобы всех, кто не поддерживает webp, кормить какой-нибудь jpg например
Привет Женя. Хочу спросить.
На сегодняшний день бывают на фрилансе заказы чисто под html and css ???
Когда DOM ?
Скоро
Вопрос в следующем. Предположим, что кто-то листает страницу с бесконечным скролом на слабом устройстве с небольшим размером оперативки. Что будет, когда память закончится? Сами браузеры это как-то решают, очищая предыдущие записи или в какой-то момент сайт просто повиснет? Я понимаю, что это уже редкость, устройства с 500Мб оперативки, но все же. Контент тоже разный бывает. Допустим, если это «бесконечная» фотогалерея, то память будет забиваться очень быстро.
Можешь выпускать видео с разными типами анимаций с помощью javascript?
Як на мій погляд, обчислення координат зайве, достатньо перевірити входження об'єкту в межі екрану і зберегти логічне значення в масив з потрібним індексом елемента.
let indexesInBounds = [];
...
const rect = obj.getBoundingClientRect();
...
indexesInBounds.push(rect.bottom > 0 && rect.top < windowHeight);
Думаю, что нет смысла заколёбывать пользователей алертами при ошибках. Проще вывести ошибку прямо в html. Это мое ИМХО. Может я и не прав.
Жека привет) Нужна помощь. Захожу на апворк , портфолио есть, все готово, но там везде ВордПресс, натяжка и тд. С вёрсткой все отлично, учу js, боюс взять первый заказ, можешь дать совет?
Когда видео по ВП? 😄✌️
а почему не заюзать intersectionobserver ? но всё равно интересно. Вот так я еше не делал. Спасибо за ролик!
Оуу)) Практика по JS😏
Ага)
Дякую Жека!
Евгений, у меня возникает проблема при загрузке карты: карта подгружается в размере 300 x 150, грузится в левом верхнем углу, и при этом лоадер не исчезает. Как решить эту проблему?
Евгений, а почему переехали с Саблайма в VSCode?)
(p.s. каждому видео ставлю лайк, думаю это не нужно упоминать)
Ев_Гений!
Спасибо, годный контент. Я то знаю тут все, не бду до конца смотреть. Жека сказал, или нет, будьте аккуратны с данным плагином, не повсеместно его применяют, и в нем есть баги, картинки могу вообще не погрузиться! я всех нюансов с ходу не помню, лучше по гуглите. ну и вообще, имейте привычку гуглить на предмет возможных багов с тем или иным плагином! а то оно то все просто, ша посмотрели, завтра поперли везде его тыкать, даже там где он не надо... а потом попа боль...))))
Второй=)
Неплохо)
урок топ!
Женя, подскажи, пожалуйста, а будет работать ленивая загрузка в блоке с изображениями и скролом?
Привет бро. Хочу начать, но не знаю сперва с чего начать? JS? или все таки с HTML.CSS?
Евгений, обожаю ваше видео. Долго думал как сделать календарь с проматыванием, но ту появились вы с slick slider и спасли мне кучу времени и нервов. Прошу вас сделайте прo php, mysqli и всё такое. Я думаю многим пригодиться. После вас не могу смотреть другие видео, слишком скучно не понятно для моего мозга, ведь мне 14)
Полезная инфа, спасибо. Архивчик скачаю...уверен , что пригодиться.
Крутяк! Хотя скрипт можно (и нужно) доработать, чтобы не было повторов кода. ;-) DRY!
Сделай обучение на плагин fullpage.js
Первый :)
Сила!
Подскажите, как добавить себе символы, как на экране, между номером строчки кода и самим кодом. У меня там просто вайтспейсы
Привет. Подскажи, что нужно знать чтобы начать работать? Самый минимум.
Большое спасибо за видео! У меня вопрос: когда все элементы уже загружены и запускается функция LazyScroll(), не правильнее ли было бы удалять EventListener, вместо постоянных проверок длины массива при event "scroll"?
Первое ожидание было что будет использована js библиотека а тут уау! Женя пишет пример на чистом JS ))
Спасибо
Круто, но негативно скажется на seo оптимизации по изображениям
А что делать с индексацией изображений поисковыми роботами? по сути, при данной реализации, на страница картинки нужные отсутствуют,а появляются только в момент исполнения JS кода. Как роботы взаимодействуют с таким контентом? Тоже самое и с текстом. Его ведь не существует на странице, получается контента текстового нет для работов
Следует оптимизировать не критичный контент. В видео говорится об этом
@@FreelancerLifeStyle пропустил. спасибо за видео!
Хотел бы увидеть у тебя на канале курс по верстке и с подробными объяснениями)))
Надеюсь заметишь
Очередной шипучий коктейль полезной информации))
Спасибо большое)
С наступающим вас новым годом!!
Спасибо, нужная тема.
Пожалуйста!
Жека, какой программой пользуешься для создания ролика?
Женя на сколько хорошо вы знаете JavaScript
а как называется эффект когда листаешь сайт и текст как бы плавно появляется ну и не только текст?
Отлично!
Класс, давно ждал, приступаю к просмотру немедленно!
Я рад!
Привет, очень бы хотелось видос в котором покажешь свайпер на практике, например как при активно слайде делатт его большим или же например как сделать слайдам флексбокс адаптивную высоту и так далее
Это бомба! Спасибо! Чувствую что моя верстка будет становиться дороже)))))
Женя, привет!!! Как всегда показал качественный материал!!! Наберусь наглости, и попрошу ещё раз, завершить серию уроков по JS) Заранее спасибо огромнейшее!!!