Самые лучшие и доходчивые уроки у вас, все предельно ясно и понятно, спасибо. На ваших уроках написал интернет магазин, постепенно добавляю в него интересные фишки, тоже из ваших уроков, ещё раз спасибо за такой труд 👍
Урок хороший, но автор забыл показать отключение слежки уже загруженных изображений, можно было дать класс img и по нему делать отслежку, после загрузки в функции loadImage удалять этот класс + observer.unobserve(image);
В своём решении я получаю все img с классом lazyload, потом выполняю всю слежку, не вижу смысла удалять например этот класс по которому был отбор, в моём случае lazyload, т.к это ни на что не влияет, а в Dev Tools может помочь другим, а насчёт unobserve вы правы, это обязательный момент.
Добрый день, спасибо за ваши уроки! На днях читал статью про Lazy loading. Там рассматривали метод, который вы используете и говорят о том, что этот метод не совсем то, что нужно. Убирая адрес картинки, поисковые роботы не индексируют изображения и плохо влияют на СЕО. РЕШЕНИЕ: оставлять атрибут src пустым, но источник картинки указывать не в data атрибуте, а использовать srcset. Таким образом, картинки будут индексироваться.
Прочитал про srcset, не совсем то, что нужно. Тут лучше подойдёт правильное заполнение alt из базы на сервере при первоначальном запросе для каждой "картинки". Павук прочитает alt и будет удовлетворён.
Сегодня обнаружил один нюанс, подстановка значения из атрибута data в src происходит бесконечное количество раз при прокрутке страницы и каждый раз изображение загружается (по крайней мере срабатывает событие load несколько раз на одно и тоже изображение). Не знаю насколько это грузит браузер, но я сделал доп проверку на значение в src, на всякий случай=)
Подскажите пожалуйста что делать, если используешь визуальный редактор? Там только атрибут src. То есть data надо каждой картинки вручную подписывать или с помощью скрипта?
( 14:15 ) Картинки передаются в последних строках кода методом observe(). Через этот метод мы указываем на элементы (в данном случае картинки), за которыми надо следить. Когда браузер запускает функцию handleImg , то в качестве первого аргумента передаётся список объектов, созданных на основе отслеживаемых элементов (а точнее объекты типа IntersectionObserverEntry, где свойство target является отслеживаемым элементом). Собственно, просто выведите myImg в консоль и всё станет ясно.
@@ptahrussia Некорректно ответили. Я так понимаю вопрос Ilya Sheva все таки из основ js. Александр надо было использовать opacity для более наглядного примера. То есть при прокрутке картика постепенно проявлялась. А так не понятно картика так там стоит или она появляется. Это не критика, просто урок был бы более интересным. И не надо так близко к сердцу принимать критику, вы же профессионал а тут много новичков. Спасибо за уроки, продолжайте!!!
@@ptahrussia Спасибо за ответ. Но у меня собственно вопрос, почему тогда в handeImg передача именно этого объекта в качестве первого аргумента? откуда handleImg получает информацию о том что взять нужно именно этот объект? Ведь мы всего лишь передаем какой-то аргумент, и назвать его можно как угодно. А handleImg уже знает что первый арг - конкретный объект. Извините за тупость если что!
@@ilyasheva276 Да не надо ей ничего знать. Просто при вызовах метода observe() браузер готовит массив объектов (как - не знаю, это уже внутренняя логика), назовём его условно list. и когда приходит пора (опять же это всё внутренняя логика) запускает функцию handleImg(list, observer), передавая первым аргументом подготовленный ранее массив list, а вторым объект intersectionObserver. Почему запускается именно handleImg? Потому что мы указали её имя при создании observer (строка 22).
@@slava_po opacity тут не подходит совсем, смысл видео в lazy load, загрузке по мере необходимости. При использовании opacity все изображения будут загружены сразу.
Александр ,здравствуйте Очень интересный и полезный видос.Хотелось бы спросить ещё ,будет ли продолжение курса по созданию интернет магазина Php +JQuery? Спасибо.
Александр, а можете сделать галерею? в смысле, чтобы как в карусели прокручивалась картинка (слева направо или справа налево), снизу маленькие thumbnail'ы. ну и тоже круто, если бы подгружалось лениво (lazy). хотя, догадываюсь, что это может быть на два-три видео тема. да и надо ли оно вам?
Спасибо за урок. Честно говоря не совсем понял вот какой момент. Мы вызываем handleImg без передачи параметров при создании объекта observer, а как в handleimg попадает на вход массив изображений myImg и где и как он вообще формируется?
Спасибо за урок. Но возникли трудности с встраиванием PHP, пытаюсь сделать загрузку новостей по мере прокрутки, всего блока, а не только картинки внутри него, только понять как это сделать не получается.
Гугл в помощь, ключевые слова XMLHttpRequest, ajax, fetch (первое самое старое, так, добавил чисто попонтоваться )) второе и третье актуальны). Смысл в двух словах: во время работы JS в определённый момент (когда ты захочешь, страница прокрутилась, пользователь нажал "ЕЩЁ") делается запрос на сервер (стандартный GET или POST), НО страница не перезагружается. На сервере, по определённому адресу, сидит обработчик такого запроса (на пыхе или ноджс не важно), принимает параметры (чо за пользователь, чо хотел), составляет ответ, и отправляет его, в респонс засовывает JSON объект с нужными данными. По приходу ответа вызывается твой JS код, который разбирает ответ и разпихивает что куда нужно. В настройках ajax или fetch ты указываешь куда стучать (адрес для запроса), как стучать (GET или POST), какие параметры передавать, какую функцию вызывать, когда придёт ответ.
Очень класно код написан. Повторил у себя на компе - все работает. Но не могу понять логики. Как созданый экземпляр объекта "observer" принимает парамет колбэк функцию "handleImg", в которой парамет этот же экземпляр объекта "observer"? Просто шарики за ролики заходят. Javascrip сведет меня с ума.
Большое спасибо!!! Интересно. А что если картинки добавлять по таймеру. 10% инфы ( вся инфа верху страницы) загрузить сразу, а остальную через пару сек, и то частями, по отношению к низу. Соц сетям это не подойдёт. Но статичным крупным страницам?!
Можно, но зачем тогда браузер отслеживает кучу событий? Реакция на события более гибкая и логичная. Например, чел начнёт быстро мотать, что тогда? Тупняки? Другой залипнет на первой картинке, а мы ему будем бесполезно грузить сотню снизу? Если бы инструментов не было, это одно.
Для тех кто поддержит ie const images = document.querySelectorAll('.image-item img'); if((navigator.userAgent).match('MSIE') || (navigator.userAgent).match('Trident')) { [].forEach.call(images, function(el){ loadImage(el); }) } а еще стрелочную функцию заменить на обычную.
Когда обратно наверх скролишь, уже загруженные картинки снова загружаются скриптом в Network. Видимо поэтому готовые Лейзи Лоад скрипты имеют намного больше кода...
Забыли добавить, поддержка 85%. Значит, желательно предусмотреть проверку, если intersectionObserver = undefined просто загрузить все картинки сразу, пусть и дольше, но сайт покажет все картинки. Если нет, то 15% пользователей просто не увидят картинки вообще.
Хороший вопрос, в смысле, правильный. Обычно JS-программистов не заботят вопросы оптимизации, то, что IntersectionObserver бесцельно будет продолжать устанавливать src уже показанным картинкам при прокрутке страницы. Я такое тоже не люблю. У IntersectionObserver есть два метода (читайте документацию, на англицком) unobserve(target) и disconnect(). Первый удаляет наблюдение за определённым элементом, второй за всеми. Для наших целей нужно при присвоении src очередной картинке вызывать unobserve(target), т.е. прекращать наблюдение за ней.
Уроки хорошие. Хорошо рассказываешь. Но я не понял зачем выдумывать и передавать в функцию новый параметр MyImg, если у тебя уже получена переменная images? Опытные поймут, но новичков очень запутывает. Если сделать вот так, то будет работать так же. function handleImg(images, observer) { images.forEach(img => { console.log(img.intersectionRatio); if (img.intersectionRatio > 0) { loadImage(img.target); } }) }
@@leaf5960 А ты мой комментарий внимательно прочитал? Я и говорю что разницы никакой нет, но в моём примере понятнее что откуда берется и передается. К тому же в комментариях люди уже писали что не понимают откуда он взял параметр MyImg
@@someguy567 ну так MyImg совсем другой объект, который передает в колбэк именно interserction observer с дополнительными полями. Это не объект images c квери листом, который мы получили с помощью querySelector. Какая разница как его называть? Тогда уже лучше назвать что-то типа как imagesObservers.
Тема интересная, но не до конца понятен один момент. Если взять к примеру стену в ВК, то там я так понимаю при прокрутке делается запрос к серверу ВК, который отдает нужный контент а JS на стороне клиента уже добавляет блоки. Или же на странице сразу выгружается весь нужный контент а потом при помощи JS он уже выстраивается?
@@Nomikama можно src="" можно display:none можно visibility:hidden можно opacity:0 можно удалять сами блоки, можно заменять картинку на дефолтную. Конкретное решение зависит от ответа на вопрос "зачем?". Это я и имел ввиду, когда спрашивал, что такое выгрузка? Зачем выгружать картинки, чего мы хотим добиться?
@@Nomikama я очень сомневаюсь, что это может стать проблемой, современные браузеры довольно умные. То, что картинка находится на странице, но вне области видимости, никак не отразится на производительности. Ну такое, надо, значит надо (если, конечно, это имелось ввиду). В функции колбэка нужно добавить проверку, если intersectionRatio == 0 то удалять src у этого элемента.
Вроде разговор был о браузерах, а не о кастомках маленькой инди-компании? Если сильно нужно, используйте полифилл или проверку на совместимость и альтернативные решения ( я предлагаю, если new IntersectionObserver undefined то грузить всё сразу).
Так локально будет названа переменная внутри функции handleImg, для конструктора обсервера, это будет функция callback, куда он должен будет передать массив отслеживаемых объектов. Откуда он их берет? Из цикла, что перебирает изображение и для каждого вызывает метод observe из экземпляра обсервера, ранее созданного, метод в свою очердь скорей всего является ссылкой на .push(), у массивов, таким образом элементы попадают в объект, который должен быть передан в функцию callback, то есть, ту, которая будет совершать какие либо манипуляции над массивом объектов. Как он в итоге попадает в обработчик? Это не очень очевидно, поскольку тут использована не явная особенность языка, если в callback передать только имя функции и не указать передаваемых параметров, то будет переданы все параметры, которые могут быть переданы, в ином случае будут передано число параметров соответствующее числу переданных в callback параметров, в том порядке в каком они поступили в родительскую функцию, но это не гарантированное поведение, поскольку оно может быть переопределено. Попробуйте выполнить данный код в консоли вашего браузера и должно стать немного понятней. a = (...args) => console.log('It comes from a', args); let e=4, d=5, f=6; b = (cb,...data)=>cb(data); b(a, [1,2,3], {e,d,f});
спасибо за интересное и полезное видео есть такой вопрос: как можно изменить код, чтобы картинка/блок при прокрутке скрывались. т.е. чтобы видно было только то, что начинает появляться в фокусе (а предыдущий контент чтобы скрывался)? напр.. как здесь - goloski-kruchi.com.ua/
@@simplewebdev1098 на некоторых сайтах есть такой эффект и реализован он с помощью Animate.css (напр.,блок выезжает слева в центр, а когда прокручивается страница далее, то этот блок снова скрывается за левой границей экрана) в данном примере после первого появления картинки остаются видны все, равно как и при зуме страницы (уменьшил масштаб - увидел все картинки)
@@UkraineAb0veAll это по сути 2 разных задачи. В Видео решается задача lazy load - отобразить страницу как можно быстрее, а потом по мере необходимости подгружать контент. Для такой задачи поведение адекватное - ну и хорошо, что при зуме видны ранее загруженный картинки. Твоя задача немного другая, можно сделать так: колбэк вызывается при каждом ПОЯВЛЕНИИ и СКРЫТИИ на указанный в threshold процент. Причем, срабатывание такого события на КАЖДОМ наблюдаемом элементе. Значит, в функции колбэка нужно отслеживать все эти варианты, у каждого элемента передаётся его степень видимости в момент срабатывания, строить логику на значениях этого показателя, что-то показывать, что-то скрывать, добавлять и удалять классы, чтобы вызвать анимацию. Раньше (и сейчас) это делалось контролем событий прокрутки, считыванием clientOffsetY (смещение клиентского окна от верха документа) и по определённым порогам ставились триггеры. В общем, если есть конкретная задача могу помочь, мне самому интересно.
@@simplewebdev1098 спасибо за ответ конкретной задачи нет - я просто самостоятельно изучаю JS, а подобный эффект мне понравился и потому захотел разобраться с его реализацией
зачем показывать лейзи лоад на примере инструмента который в данный момент не является частью стандарта языка, он только Working draft и не известно станет ли это вообще стандартом, хоть почти все браузеры его уже поддерживают. В проде такое лучше не юзать пока
Большое спасибо за Ваш труд. Вас всегда приятно смотреть. :)
Просто шикарный урок. Спасибо!
Очень доступно и интересно объясняете, спасибо!
Огромное спасибо за, Ваши, уроки. Записывать урок в 7:30 не каждый сможет :) , но мотивирует и Вас и меня двигаться по тернистому пути изучения Js.
Самые лучшие и доходчивые уроки у вас, все предельно ясно и понятно, спасибо. На ваших уроках написал интернет магазин, постепенно добавляю в него интересные фишки, тоже из ваших уроков, ещё раз спасибо за такой труд 👍
Привет, было очень трудно, но невероятно интересно. Я справилась. Спасибо большое. Это круто и гениально, и никого не слушайте - вы лучший.
Спасибо за ваши видео!
Спасибо! Очень интересный пример!
Круто, спасибо за ваши уроки!
Thanks ) всегда приятно интересно и понятно
контент на высоте, все понятно и круто!
Автор, спасибо вам большое! пример простой и очень доходчивый!
интересно бы было посмотреть что-то более сложное)
Спасибо за урок.
Доходчиво и понятно, спасибо.
Огонь, спасибо !
Очень доходчиво объясняете. Было бы неплохо увидеть мини курс по созданию телеграм бота на JS на или на Python.
Там все легко на js сам бот за 15м пишется остальное только твоя фантазия
Благодарю 🎉, как раз искал lazy load а тут у учителя оказывается все давно есть
Очень круто!
Дядька, спасибо тебе! Очень помог. Минус велосипед. Минус магия. 👍
Мне понравилось, лайк и комментарий!
хороший урок, не знал про этот интерфейс.обычно юзают плагин lazzyload, полезно!
Вот с музычкой в конце видео стало особенно классно!!!
Спасибо!
Годный контент
Круто!
Урок хороший, но автор забыл показать отключение слежки уже загруженных изображений, можно было дать класс img и по нему делать отслежку, после загрузки в функции loadImage удалять этот класс + observer.unobserve(image);
В своём решении я получаю все img с классом lazyload, потом выполняю всю слежку, не вижу смысла удалять например этот класс по которому был отбор, в моём случае lazyload, т.к это ни на что не влияет, а в Dev Tools может помочь другим, а насчёт unobserve вы правы, это обязательный момент.
I guess it's pretty randomly asking but does anybody know a good place to stream newly released series online ?
@Wayne Collin Flixportal :D
@Benicio Raylan thank you, signed up and it seems to work :) I appreciate it !!
@Wayne Collin You are welcome xD
Добрый день, спасибо за ваши уроки!
На днях читал статью про Lazy loading. Там рассматривали метод, который вы используете и говорят о том, что этот метод не совсем то, что нужно.
Убирая адрес картинки, поисковые роботы не индексируют изображения и плохо влияют на СЕО.
РЕШЕНИЕ: оставлять атрибут src пустым, но источник картинки указывать не в data атрибуте, а использовать srcset. Таким образом, картинки будут индексироваться.
Можно в src ложить base64 img , а из data подменять потом
Прочитал про srcset, не совсем то, что нужно. Тут лучше подойдёт правильное заполнение alt из базы на сервере при первоначальном запросе для каждой "картинки". Павук прочитает alt и будет удовлетворён.
Дякую!
Замечательный урок, пригодится в будущем. Спасибо
Скроллбар говорит о том, что при подгрузки первого изображения место резервируется сразу для всех но подгрузка идёт только при прокручивании.
Добавлю, что у IntersectionObserver не лучшая поддержка браузерами, надо обязательно использовать полифилл
Круто. Спасибо. жалко жалкий ie не поддерживает.
Сегодня обнаружил один нюанс, подстановка значения из атрибута data в src происходит бесконечное количество раз при прокрутке страницы и каждый раз изображение загружается (по крайней мере срабатывает событие load несколько раз на одно и тоже изображение). Не знаю насколько это грузит браузер, но я сделал доп проверку на значение в src, на всякий случай=)
Еще бы понимать как на СЕО отразятся картинки с пустым атрибутом src
За урок Спасибо!
Подскажите пожалуйста что делать, если используешь визуальный редактор? Там только атрибут src. То есть data надо каждой картинки вручную подписывать или с помощью скрипта?
Объясните пожалуйста, как js понимает, что myImg это ваши картинки, когда явного указания и задачи переменной не было? Спасибо за ответ!
( 14:15 )
Картинки передаются в последних строках кода методом observe(). Через этот метод мы указываем на элементы (в данном случае картинки), за которыми надо следить. Когда браузер запускает функцию handleImg , то в качестве первого аргумента передаётся список объектов, созданных на основе отслеживаемых элементов (а точнее объекты типа IntersectionObserverEntry, где свойство target является отслеживаемым элементом).
Собственно, просто выведите myImg в консоль и всё станет ясно.
@@ptahrussia Некорректно ответили. Я так понимаю вопрос Ilya Sheva все таки из основ js. Александр надо было использовать opacity для более наглядного примера. То есть при прокрутке картика постепенно проявлялась. А так не понятно картика так там стоит или она появляется. Это не критика, просто урок был бы более интересным. И не надо так близко к сердцу принимать критику, вы же профессионал а тут много новичков. Спасибо за уроки, продолжайте!!!
@@ptahrussia Спасибо за ответ. Но у меня собственно вопрос, почему тогда в handeImg передача именно этого объекта в качестве первого аргумента? откуда handleImg получает информацию о том что взять нужно именно этот объект? Ведь мы всего лишь передаем какой-то аргумент, и назвать его можно как угодно. А handleImg уже знает что первый арг - конкретный объект. Извините за тупость если что!
@@ilyasheva276 Да не надо ей ничего знать. Просто при вызовах метода observe() браузер готовит массив объектов (как - не знаю, это уже внутренняя логика), назовём его условно list. и когда приходит пора (опять же это всё внутренняя логика) запускает функцию handleImg(list, observer), передавая первым аргументом подготовленный ранее массив list, а вторым объект intersectionObserver. Почему запускается именно handleImg? Потому что мы указали её имя при создании observer (строка 22).
@@slava_po opacity тут не подходит совсем, смысл видео в lazy load, загрузке по мере необходимости. При использовании opacity все изображения будут загружены сразу.
Как добавить исключение?
Или сделать для отдельного div?
Урок -просто супер!!!Подскажите,пожалуйста,а почему после фигурных скобок стоят круглые скобки? В частности, в 15 и 26 строках!
Огонь!!!!!!!!!!!
Александр ,здравствуйте
Очень интересный и полезный видос.Хотелось бы спросить ещё ,будет ли продолжение курса по созданию интернет магазина Php +JQuery?
Спасибо.
Александр, а можете сделать галерею? в смысле, чтобы как в карусели прокручивалась картинка (слева направо или справа налево), снизу маленькие thumbnail'ы.
ну и тоже круто, если бы подгружалось лениво (lazy).
хотя, догадываюсь, что это может быть на два-три видео тема. да и надо ли оно вам?
Спасибо! А что делать, если я вставляю webp картинки через picture?
Спасибо за урок. Честно говоря не совсем понял вот какой момент. Мы вызываем handleImg без передачи параметров при создании объекта observer, а как в handleimg попадает на вход массив изображений myImg и где и как он вообще формируется?
Почитай про callback и потом поймешь)
Спасибо за урок. Но возникли трудности с встраиванием PHP, пытаюсь сделать загрузку новостей по мере прокрутки, всего блока, а не только картинки внутри него, только понять как это сделать не получается.
Гугл в помощь, ключевые слова XMLHttpRequest, ajax, fetch (первое самое старое, так, добавил чисто попонтоваться )) второе и третье актуальны). Смысл в двух словах: во время работы JS в определённый момент (когда ты захочешь, страница прокрутилась, пользователь нажал "ЕЩЁ") делается запрос на сервер (стандартный GET или POST), НО страница не перезагружается. На сервере, по определённому адресу, сидит обработчик такого запроса (на пыхе или ноджс не важно), принимает параметры (чо за пользователь, чо хотел), составляет ответ, и отправляет его, в респонс засовывает JSON объект с нужными данными. По приходу ответа вызывается твой JS код, который разбирает ответ и разпихивает что куда нужно. В настройках ajax или fetch ты указываешь куда стучать (адрес для запроса), как стучать (GET или POST), какие параметры передавать, какую функцию вызывать, когда придёт ответ.
Спасибо за урок. Только Вы не рассказали о поддержке браузерами, IE вообще не поддерживает данный объект.
Хорошо, что напомнил, а то я думал какой метод лучше. Выбрал без обсервера.
Сделайте подгрузку контента с ним. По подгрузке изображений много, а вот контента нет.
про обсервер подробнее!
Очень класно код написан. Повторил у себя на компе - все работает. Но не могу понять логики. Как созданый экземпляр объекта "observer" принимает парамет колбэк функцию "handleImg", в которой парамет этот же экземпляр объекта "observer"? Просто шарики за ролики заходят. Javascrip сведет меня с ума.
А ничего, что при обратном скролле срабатывает обзервер? Может стоило дописать observer.unobseve(MyImgSingle.target)
Большое спасибо!!!
Интересно. А что если картинки добавлять по таймеру.
10% инфы ( вся инфа верху страницы) загрузить сразу, а остальную через пару сек, и то частями, по отношению к низу.
Соц сетям это не подойдёт.
Но статичным крупным страницам?!
Можно, но зачем тогда браузер отслеживает кучу событий? Реакция на события более гибкая и логичная. Например, чел начнёт быстро мотать, что тогда? Тупняки? Другой залипнет на первой картинке, а мы ему будем бесполезно грузить сотню снизу? Если бы инструментов не было, это одно.
ссылка на сайт уже много дней не работает. вероятно и сайта самого уже нет за прошествием времени?
Для тех кто поддержит ie
const images = document.querySelectorAll('.image-item img');
if((navigator.userAgent).match('MSIE') || (navigator.userAgent).match('Trident')) {
[].forEach.call(images, function(el){
loadImage(el);
})
}
а еще стрелочную функцию заменить на обычную.
Обзервер, а не обсёрвер. Обзервер от английского to observe(наблюдать), а обсёрвер от обсёр
<
sarcasm>7 раз просмотрел видео - ничего не понял. Прочитал твой коммент - сразу стало всё понятно. Очень, очень полезная информация.<
/sarcasm>
Когда обратно наверх скролишь, уже загруженные картинки снова загружаются скриптом в Network. Видимо поэтому готовые Лейзи Лоад скрипты имеют намного больше кода...
Александр, а как быть если изображения все разных размеров...?
@@xOceanSpirit Понятно, благодарю
Забыли добавить, поддержка 85%. Значит, желательно предусмотреть проверку, если intersectionObserver = undefined просто загрузить все картинки сразу, пусть и дольше, но сайт покажет все картинки. Если нет, то 15% пользователей просто не увидят картинки вообще.
Спасибо за урок! Подскажите, как после загрузки картинки, отписаться от этого обзервера?
Хороший вопрос, в смысле, правильный. Обычно JS-программистов не заботят вопросы оптимизации, то, что IntersectionObserver бесцельно будет продолжать устанавливать src уже показанным картинкам при прокрутке страницы. Я такое тоже не люблю.
У IntersectionObserver есть два метода (читайте документацию, на англицком) unobserve(target) и disconnect(). Первый удаляет наблюдение за определённым элементом, второй за всеми. Для наших целей нужно при присвоении src очередной картинке вызывать unobserve(target), т.е. прекращать наблюдение за ней.
@@simplewebdev1098 , благодарю! Теперь тема для меня открыта полностью) Еще раз спасибо за Ваш труд!
@@Vadim_BBB пожалуйста. Только я не автор видео ))
это золотая инфа так как google page speed всегда любит и трребует с сайтов этот способ оптимизации
Уроки хорошие. Хорошо рассказываешь. Но я не понял зачем выдумывать и передавать в функцию новый параметр MyImg, если у тебя уже получена переменная images? Опытные поймут, но новичков очень запутывает. Если сделать вот так, то будет работать так же.
function handleImg(images, observer) {
images.forEach(img => {
console.log(img.intersectionRatio);
if (img.intersectionRatio > 0) {
loadImage(img.target);
}
})
}
лол, так ты же сделал тоже самое, как и на видео) Берешь images с аргумента) Только переименовал аргумент на images и это роли никакой не играет)
@@leaf5960 А ты мой комментарий внимательно прочитал? Я и говорю что разницы никакой нет, но в моём примере понятнее что откуда берется и передается. К тому же в комментариях люди уже писали что не понимают откуда он взял параметр MyImg
@@someguy567 ну так MyImg совсем другой объект, который передает в колбэк именно interserction observer с дополнительными полями. Это не объект images c квери листом, который мы получили с помощью querySelector. Какая разница как его называть? Тогда уже лучше назвать что-то типа как imagesObservers.
2:16 А вот ваабщета const не запрещает добавление новых элементов в массив))
Я вот тоже на этом моменте закрыл видос)))))
+
сложно, но вроде более менее понятно
А если картинки разного размера?
Тема интересная, но не до конца понятен один момент. Если взять к примеру стену в ВК, то там я так понимаю при прокрутке делается запрос к серверу ВК, который отдает нужный контент а JS на стороне клиента уже добавляет блоки. Или же на странице сразу выгружается весь нужный контент а потом при помощи JS он уже выстраивается?
конечно подгружается... Подгружается аяксом, с сервера приходят данные в фоне, а скрипт их отображает в верстке
аваст стоит чтобы показывать таргетированию рекламу?)
Кто-нибудь пробовал с целыми div'ами?
Выгрузка картинок которые не в зоне видимости, можно как-то реализовать?
Что значит выгрузка?
@@Nomikama можно src="" можно display:none можно visibility:hidden можно opacity:0 можно удалять сами блоки, можно заменять картинку на дефолтную. Конкретное решение зависит от ответа на вопрос "зачем?". Это я и имел ввиду, когда спрашивал, что такое выгрузка? Зачем выгружать картинки, чего мы хотим добиться?
@@Nomikama я очень сомневаюсь, что это может стать проблемой, современные браузеры довольно умные. То, что картинка находится на странице, но вне области видимости, никак не отразится на производительности. Ну такое, надо, значит надо (если, конечно, это имелось ввиду).
В функции колбэка нужно добавить проверку, если intersectionRatio == 0 то удалять src у этого элемента.
замечательное видео, спасибо! только IntersectionObserver не работает на ie 11 (((
Вроде разговор был о браузерах, а не о кастомках маленькой инди-компании? Если сильно нужно, используйте полифилл или проверку на совместимость и альтернативные решения ( я предлагаю, если new IntersectionObserver undefined то грузить всё сразу).
Я бы грузил все сразу на ослика и еще умножил на 10 чтобы юзер ослика страдал.
Непонятно, откуда взялось myImg и как код его понимает
Так локально будет названа переменная внутри функции handleImg, для конструктора обсервера, это будет функция callback, куда он должен будет передать массив отслеживаемых объектов. Откуда он их берет? Из цикла, что перебирает изображение и для каждого вызывает метод observe из экземпляра обсервера, ранее созданного, метод в свою очердь скорей всего является ссылкой на .push(), у массивов, таким образом элементы попадают в объект, который должен быть передан в функцию callback, то есть, ту, которая будет совершать какие либо манипуляции над массивом объектов. Как он в итоге попадает в обработчик? Это не очень очевидно, поскольку тут использована не явная особенность языка, если в callback передать только имя функции и не указать передаваемых параметров, то будет переданы все параметры, которые могут быть переданы, в ином случае будут передано число параметров соответствующее числу переданных в callback параметров, в том порядке в каком они поступили в родительскую функцию, но это не гарантированное поведение, поскольку оно может быть переопределено.
Попробуйте выполнить данный код в консоли вашего браузера и должно стать немного понятней.
a = (...args) => console.log('It comes from a', args);
let e=4, d=5, f=6;
b = (cb,...data)=>cb(data);
b(a, [1,2,3], {e,d,f});
@@Roma1995xx Спасибо огромное за Ваш развернутый ответ!!!
спасибо за интересное и полезное видео
есть такой вопрос: как можно изменить код, чтобы картинка/блок при прокрутке скрывались. т.е. чтобы видно было только то, что начинает появляться в фокусе (а предыдущий контент чтобы скрывался)? напр.. как здесь - goloski-kruchi.com.ua/
Видно будет только то, что в фокусе. )) Что вы хотите делать с контентом, уходящим с экрана, его же и так не видно?
@@simplewebdev1098 на некоторых сайтах есть такой эффект и реализован он с помощью Animate.css (напр.,блок выезжает слева в центр, а когда прокручивается страница далее, то этот блок снова скрывается за левой границей экрана)
в данном примере после первого появления картинки остаются видны все, равно как и при зуме страницы (уменьшил масштаб - увидел все картинки)
@@UkraineAb0veAll это по сути 2 разных задачи. В Видео решается задача lazy load - отобразить страницу как можно быстрее, а потом по мере необходимости подгружать контент. Для такой задачи поведение адекватное - ну и хорошо, что при зуме видны ранее загруженный картинки. Твоя задача немного другая, можно сделать так: колбэк вызывается при каждом ПОЯВЛЕНИИ и СКРЫТИИ на указанный в threshold процент. Причем, срабатывание такого события на КАЖДОМ наблюдаемом элементе. Значит, в функции колбэка нужно отслеживать все эти варианты, у каждого элемента передаётся его степень видимости в момент срабатывания, строить логику на значениях этого показателя, что-то показывать, что-то скрывать, добавлять и удалять классы, чтобы вызвать анимацию. Раньше (и сейчас) это делалось контролем событий прокрутки, считыванием clientOffsetY (смещение клиентского окна от верха документа) и по определённым порогам ставились триггеры.
В общем, если есть конкретная задача могу помочь, мне самому интересно.
@@simplewebdev1098 спасибо за ответ
конкретной задачи нет - я просто самостоятельно изучаю JS, а подобный эффект мне понравился и потому захотел разобраться с его реализацией
@@UkraineAb0veAll мне тоже, но без реальной задачи быстро надоедает ))
зачем показывать лейзи лоад на примере инструмента который в данный момент не является частью стандарта языка, он только Working draft и не известно станет ли это вообще стандартом, хоть почти все браузеры его уже поддерживают. В проде такое лучше не юзать пока
Если верить can i use работать это все будет только в хроме
Не совсем понимаю смысл этого всего
Судя по ремарке о const, автор привык к старому EcmaScript, и не понимает, что такое const в js.
Максимально убогий урок... Каждый день вижу сайты с 5 картинками в ряд, супер