Подгрузка картинок при прокрутке. Lazy load

[@rk_projects]

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

[@Локер-ю6н]

Большое спасибо за Ваш труд. Вас всегда приятно смотреть. :)

[@justpeace7852]

Благодарю 🎉, как раз искал lazy load а тут у учителя оказывается все давно есть

[@yakut54]

Дядька, спасибо тебе! Очень помог. Минус велосипед. Минус магия. 👍

[@MArt-lz9xu]

Огромное спасибо за, Ваши, уроки. Записывать урок в 7:30 не каждый сможет :) , но мотивирует и Вас и меня двигаться по тернистому пути изучения Js.

[@ДмитрийБудко-о5р]

Очень доходчиво объясняете. Было бы неплохо увидеть мини курс по созданию телеграм бота на JS на или на Python.

[@ГригорийШумихин]

Там все легко на js сам бот за 15м пишется остальное только твоя фантазия

[@marinaermilova7912]

Привет, было очень трудно, но невероятно интересно. Я справилась. Спасибо большое. Это круто и гениально, и никого не слушайте - вы лучший.

[@Алексей-с3я8е]

Добрый день, спасибо за ваши уроки! На днях читал статью про Lazy loading. Там рассматривали метод, который вы используете и говорят о том, что этот метод не совсем то, что нужно. Убирая адрес картинки, поисковые роботы не индексируют изображения и плохо влияют на СЕО. РЕШЕНИЕ: оставлять атрибут src пустым, но источник картинки указывать не в data атрибуте, а использовать srcset. Таким образом, картинки будут индексироваться.

[@rmnkot]

Можно в src ложить base64 img , а из data подменять потом

[@simplewebdev1098]

Прочитал про srcset, не совсем то, что нужно. Тут лучше подойдёт правильное заполнение alt из базы на сервере при первоначальном запросе для каждой "картинки". Павук прочитает alt и будет удовлетворён.

[@capy7773]

Очень доступно и интересно объясняете, спасибо!

[@ikatsulaia7468]

контент на высоте, все понятно и круто!

[@3dzbot]

Просто шикарный урок. Спасибо!

[@machete6045]

Урок хороший, но автор забыл показать отключение слежки уже загруженных изображений, можно было дать класс img и по нему делать отслежку, после загрузки в функции loadImage удалять этот класс + observer.unobserve(image);

[@4ITTonik]

В своём решении я получаю все img с классом lazyload, потом выполняю всю слежку, не вижу смысла удалять например этот класс по которому был отбор, в моём случае lazyload, т.к это ни на что не влияет, а в Dev Tools может помочь другим, а насчёт unobserve вы правы, это обязательный момент.

[@waynecollin6888]

I guess it's pretty randomly asking but does anybody know a good place to stream newly released series online ?

[@benicioraylan453]

@Wayne Collin Flixportal :D

[@waynecollin6888]

@Benicio Raylan thank you, signed up and it seems to work :) I appreciate it !!

[@benicioraylan453]

@Wayne Collin You are welcome xD

[@shinera-8504]

Доходчиво и понятно, спасибо.

[@MegaTesei]

Очень круто!

[@ilyasheva276]

Объясните пожалуйста, как js понимает, что myImg это ваши картинки, когда явного указания и задачи переменной не было? Спасибо за ответ!

[@ptahrussia]

( 14:15 ) Картинки передаются в последних строках кода методом observe(). Через этот метод мы указываем на элементы (в данном случае картинки), за которыми надо следить. Когда браузер запускает функцию handleImg , то в качестве первого аргумента передаётся список объектов, созданных на основе отслеживаемых элементов (а точнее объекты типа IntersectionObserverEntry, где свойство target является отслеживаемым элементом). Собственно, просто выведите myImg в консоль и всё станет ясно.

[@slava_po]

@@ptahrussia Некорректно ответили. Я так понимаю вопрос Ilya Sheva все таки из основ js. Александр надо было использовать opacity для более наглядного примера. То есть при прокрутке картика постепенно проявлялась. А так не понятно картика так там стоит или она появляется. Это не критика, просто урок был бы более интересным. И не надо так близко к сердцу принимать критику, вы же профессионал а тут много новичков. Спасибо за уроки, продолжайте!!!

[@ilyasheva276]

​@@ptahrussia Спасибо за ответ. Но у меня собственно вопрос, почему тогда в handeImg передача именно этого объекта в качестве первого аргумента? откуда handleImg получает информацию о том что взять нужно именно этот объект? Ведь мы всего лишь передаем какой-то аргумент, и назвать его можно как угодно. А handleImg уже знает что первый арг - конкретный объект. Извините за тупость если что!

[@ptahrussia]

@@ilyasheva276 Да не надо ей ничего знать. Просто при вызовах метода observe() браузер готовит массив объектов (как - не знаю, это уже внутренняя логика), назовём его условно list. и когда приходит пора (опять же это всё внутренняя логика) запускает функцию handleImg(list, observer), передавая первым аргументом подготовленный ранее массив list, а вторым объект intersectionObserver. Почему запускается именно handleImg? Потому что мы указали её имя при создании observer (строка 22).

[@simplewebdev1098]

@@slava_po opacity тут не подходит совсем, смысл видео в lazy load, загрузке по мере необходимости. При использовании opacity все изображения будут загружены сразу.

[@ВаноВано-л6р]

хороший урок, не знал про этот интерфейс.обычно юзают плагин lazzyload, полезно!

[@nikitajolobov4591]

Круто, спасибо за ваши уроки!

[@muhtoryusufjanov3946]

Thanks ) всегда приятно интересно и понятно

[@alexeska739]

Вот с музычкой в конце видео стало особенно классно!!!

[@swartex92]

Автор, спасибо вам большое! пример простой и очень доходчивый! интересно бы было посмотреть что-то более сложное)

[@dmitryivanov3200]

Спасибо за ваши видео!

[@divocean4085]

Добавлю, что у IntersectionObserver не лучшая поддержка браузерами, надо обязательно использовать полифилл

[@KirillKlimov_lds]

Спасибо! Очень интересный пример!

[@N5O1]

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

[@ИяИя-п2к]

Урок -просто супер!!!Подскажите,пожалуйста,а почему после фигурных скобок стоят круглые скобки? В частности, в 15 и 26 строках!

[@nikitajolobov4591]

Сегодня обнаружил один нюанс, подстановка значения из атрибута data в src происходит бесконечное количество раз при прокрутке страницы и каждый раз изображение загружается (по крайней мере срабатывает событие load несколько раз на одно и тоже изображение). Не знаю насколько это грузит браузер, но я сделал доп проверку на значение в src, на всякий случай=)

[@ruslan5481]

Спасибо!

[@ivanmaslow2137]

Мне понравилось, лайк и комментарий!

[@schroedingerscat6810]

Спасибо за урок.

[@Naryck]

Александр, а можете сделать галерею? в смысле, чтобы как в карусели прокручивалась картинка (слева направо или справа налево), снизу маленькие thumbnail'ы. ну и тоже круто, если бы подгружалось лениво (lazy). хотя, догадываюсь, что это может быть на два-три видео тема. да и надо ли оно вам?

[@alesiakolbik4710]

Спасибо за урок. Только Вы не рассказали о поддержке браузерами, IE вообще не поддерживает данный объект.

[@MegaTesei]

Хорошо, что напомнил, а то я думал какой метод лучше. Выбрал без обсервера.

[@romanmed9035]

ссылка на сайт уже много дней не работает. вероятно и сайта самого уже нет за прошествием времени?

[@heograf]

Очень класно код написан. Повторил у себя на компе - все работает. Но не могу понять логики. Как созданый экземпляр объекта "observer" принимает парамет колбэк функцию "handleImg", в которой парамет этот же экземпляр объекта "observer"? Просто шарики за ролики заходят. Javascrip сведет меня с ума.

[@PizekattoX]

А ничего, что при обратном скролле срабатывает обзервер? Может стоило дописать observer.unobseve(MyImgSingle.target)

[@SergMirny_yt]

Спасибо за урок. Честно говоря не совсем понял вот какой момент. Мы вызываем handleImg без передачи параметров при создании объекта observer, а как в handleimg попадает на вход массив изображений myImg и где и как он вообще формируется?

[@leaf5960]

Почитай про callback и потом поймешь)

[@WhoCat]

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

[@simplewebdev1098]

Гугл в помощь, ключевые слова XMLHttpRequest, ajax, fetch (первое самое старое, так, добавил чисто попонтоваться )) второе и третье актуальны). Смысл в двух словах: во время работы JS в определённый момент (когда ты захочешь, страница прокрутилась, пользователь нажал "ЕЩЁ") делается запрос на сервер (стандартный GET или POST), НО страница не перезагружается. На сервере, по определённому адресу, сидит обработчик такого запроса (на пыхе или ноджс не важно), принимает параметры (чо за пользователь, чо хотел), составляет ответ, и отправляет его, в респонс засовывает JSON объект с нужными данными. По приходу ответа вызывается твой JS код, который разбирает ответ и разпихивает что куда нужно. В настройках ajax или fetch ты указываешь куда стучать (адрес для запроса), как стучать (GET или POST), какие параметры передавать, какую функцию вызывать, когда придёт ответ.

[@gartwa7642]

Как добавить исключение? Или сделать для отдельного div?

[@Vadim_BBB]

Спасибо за урок! Подскажите, как после загрузки картинки, отписаться от этого обзервера?

[@simplewebdev1098]

Хороший вопрос, в смысле, правильный. Обычно JS-программистов не заботят вопросы оптимизации, то, что IntersectionObserver бесцельно будет продолжать устанавливать src уже показанным картинкам при прокрутке страницы. Я такое тоже не люблю. У IntersectionObserver есть два метода (читайте документацию, на англицком) unobserve(target) и disconnect(). Первый удаляет наблюдение за определённым элементом, второй за всеми. Для наших целей нужно при присвоении src очередной картинке вызывать unobserve(target), т.е. прекращать наблюдение за ней.

[@Vadim_BBB]

@@simplewebdev1098 , благодарю! Теперь тема для меня открыта полностью) Еще раз спасибо за Ваш труд!

[@simplewebdev1098]

@@Vadim_BBB пожалуйста. Только я не автор видео ))

[@dmytrolambru2984]

Огонь, спасибо !

[@setcoloursru]

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

[@AndrewMarsin]

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

[@panya_indastreet]

Спасибо! А что делать, если я вставляю webp картинки через picture?

[@виртуоз_ру]

Сделайте подгрузку контента с ним. По подгрузке изображений много, а вот контента нет.

[@nwrio]

2:16 А вот ваабщета const не запрещает добавление новых элементов в массив))

[@kulakofft4]

Я вот тоже на этом моменте закрыл видос)))))

[@DrZlad]

Большое спасибо!!! Интересно. А что если картинки добавлять по таймеру. 10% инфы ( вся инфа верху страницы) загрузить сразу, а остальную через пару сек, и то частями, по отношению к низу. Соц сетям это не подойдёт. Но статичным крупным страницам?!

[@simplewebdev1098]

Можно, но зачем тогда браузер отслеживает кучу событий? Реакция на события более гибкая и логичная. Например, чел начнёт быстро мотать, что тогда? Тупняки? Другой залипнет на первой картинке, а мы ему будем бесполезно грузить сотню снизу? Если бы инструментов не было, это одно.

[@SnitchShow]

Тема интересная, но не до конца понятен один момент. Если взять к примеру стену в ВК, то там я так понимаю при прокрутке делается запрос к серверу ВК, который отдает нужный контент а JS на стороне клиента уже добавляет блоки. Или же на странице сразу выгружается весь нужный контент а потом при помощи JS он уже выстраивается?

[@SergMirny_yt]

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

[@ДмитрийДенисов-г5о]

А если картинки разного размера?

[@someguy567]

Уроки хорошие. Хорошо рассказываешь. Но я не понял зачем выдумывать и передавать в функцию новый параметр MyImg, если у тебя уже получена переменная images? Опытные поймут, но новичков очень запутывает. Если сделать вот так, то будет работать так же. function handleImg(images, observer) { images.forEach(img => { console.log(img.intersectionRatio); if (img.intersectionRatio > 0) { loadImage(img.target); } }) }

[@leaf5960]

лол, так ты же сделал тоже самое, как и на видео) Берешь images с аргумента) Только переименовал аргумент на images и это роли никакой не играет)

[@someguy567]

@@leaf5960 А ты мой комментарий внимательно прочитал? Я и говорю что разницы никакой нет, но в моём примере понятнее что откуда берется и передается. К тому же в комментариях люди уже писали что не понимают откуда он взял параметр MyImg

[@leaf5960]

@@someguy567 ну так MyImg совсем другой объект, который передает в колбэк именно interserction observer с дополнительными полями. Это не объект images c квери листом, который мы получили с помощью querySelector. Какая разница как его называть? Тогда уже лучше назвать что-то типа как imagesObservers.

[@Виталий-е9д5е]

Александр, а как быть если изображения все разных размеров...?

[@Виталий-е9д5е]

@@xOceanSpirit Понятно, благодарю

[@rickgrimes7734]

Александр ,здравствуйте Очень интересный и полезный видос.Хотелось бы спросить ещё ,будет ли продолжение курса по созданию интернет магазина Php +JQuery? Спасибо.

[@aleksdobriy6941]

Еще бы понимать как на СЕО отразятся картинки с пустым атрибутом src За урок Спасибо!

[@ДмитрийВойтин-с4ч]

Годный контент

[@thisreal]

Выгрузка картинок которые не в зоне видимости, можно как-то реализовать?

[@simplewebdev1098]

Что значит выгрузка?

[@simplewebdev1098]

@@Nomikama можно src="" можно display:none можно visibility:hidden можно opacity:0 можно удалять сами блоки, можно заменять картинку на дефолтную. Конкретное решение зависит от ответа на вопрос "зачем?". Это я и имел ввиду, когда спрашивал, что такое выгрузка? Зачем выгружать картинки, чего мы хотим добиться?

[@simplewebdev1098]

@@Nomikama я очень сомневаюсь, что это может стать проблемой, современные браузеры довольно умные. То, что картинка находится на странице, но вне области видимости, никак не отразится на производительности. Ну такое, надо, значит надо (если, конечно, это имелось ввиду). В функции колбэка нужно добавить проверку, если intersectionRatio == 0 то удалять src у этого элемента.

[@vazgenaleksanyan2929]

Круто. Спасибо. жалко жалкий ie не поддерживает.

[@ВаноВано-л6р]

про обсервер подробнее!

[@simplewebdev1098]

Забыли добавить, поддержка 85%. Значит, желательно предусмотреть проверку, если intersectionObserver = undefined просто загрузить все картинки сразу, пусть и дольше, но сайт покажет все картинки. Если нет, то 15% пользователей просто не увидят картинки вообще.

[@ФанильЯунбаев-ь1ж]

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

[@uaplatformacomua]

Непонятно, откуда взялось myImg и как код его понимает

[@Roma1995xx]

Так локально будет названа переменная внутри функции 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});

[@uaplatformacomua]

@@Roma1995xx Спасибо огромное за Ваш развернутый ответ!!!

[@UkraineAb0veAll]

спасибо за интересное и полезное видео есть такой вопрос: как можно изменить код, чтобы картинка/блок при прокрутке скрывались. т.е. чтобы видно было только то, что начинает появляться в фокусе (а предыдущий контент чтобы скрывался)? напр.. как здесь - goloski-kruchi.com.ua/

[@simplewebdev1098]

Видно будет только то, что в фокусе. )) Что вы хотите делать с контентом, уходящим с экрана, его же и так не видно?

[@UkraineAb0veAll]

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

[@simplewebdev1098]

@@UkraineAb0veAll это по сути 2 разных задачи. В Видео решается задача lazy load - отобразить страницу как можно быстрее, а потом по мере необходимости подгружать контент. Для такой задачи поведение адекватное - ну и хорошо, что при зуме видны ранее загруженный картинки. Твоя задача немного другая, можно сделать так: колбэк вызывается при каждом ПОЯВЛЕНИИ и СКРЫТИИ на указанный в threshold процент. Причем, срабатывание такого события на КАЖДОМ наблюдаемом элементе. Значит, в функции колбэка нужно отслеживать все эти варианты, у каждого элемента передаётся его степень видимости в момент срабатывания, строить логику на значениях этого показателя, что-то показывать, что-то скрывать, добавлять и удалять классы, чтобы вызвать анимацию. Раньше (и сейчас) это делалось контролем событий прокрутки, считыванием clientOffsetY (смещение клиентского окна от верха документа) и по определённым порогам ставились триггеры. В общем, если есть конкретная задача могу помочь, мне самому интересно.

[@UkraineAb0veAll]

@@simplewebdev1098 спасибо за ответ конкретной задачи нет - я просто самостоятельно изучаю JS, а подобный эффект мне понравился и потому захотел разобраться с его реализацией

[@simplewebdev1098]

@@UkraineAb0veAll мне тоже, но без реальной задачи быстро надоедает ))

[@VirtexR]

аваст стоит чтобы показывать таргетированию рекламу?)

[@vazgenaleksanyan2929]

Для тех кто поддержит ie const images = document.querySelectorAll('.image-item img'); if((navigator.userAgent).match('MSIE') || (navigator.userAgent).match('Trident')) { [].forEach.call(images, function(el){ loadImage(el); }) } а еще стрелочную функцию заменить на обычную.

[@Кулити-к7ч]

Обзервер, а не обсёрвер. Обзервер от английского to observe(наблюдать), а обсёрвер от обсёр

[@simplewebdev1098]

< sarcasm>7 раз просмотрел видео - ничего не понял. Прочитал твой коммент - сразу стало всё понятно. Очень, очень полезная информация.< /sarcasm>

[@aleksandrstaetskiy5687]

замечательное видео, спасибо! только IntersectionObserver не работает на ie 11 (((

[@simplewebdev1098]

Вроде разговор был о браузерах, а не о кастомках маленькой инди-компании? Если сильно нужно, используйте полифилл или проверку на совместимость и альтернативные решения ( я предлагаю, если new IntersectionObserver undefined то грузить всё сразу).

[@suslikest3708]

Я бы грузил все сразу на ослика и еще умножил на 10 чтобы юзер ослика страдал.

[@sinaktenone9882]

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

[@DerAleksey]

сложно, но вроде более менее понятно

[@lisofsky8151]

это золотая инфа так как google page speed всегда любит и трребует с сайтов этот способ оптимизации

[@johhnybee]

Дякую!

[@gess1485]

Кто-нибудь пробовал с целыми div'ами?

[@АлександрБравис-с3о]

Не совсем понимаю смысл этого всего

[@ABCDEblya]

Судя по ремарке о const, автор привык к старому EcmaScript, и не понимает, что такое const в js.

[@gerz_og]

Огонь!!!!!!!!!!!

[@viktormoskalev2269]

Если верить can i use работать это все будет только в хроме

[@webprogrru3225]

+

[@some-js]

Максимально убогий урок... Каждый день вижу сайты с 5 картинками в ряд, супер