Чем заняться лентяю

Как побороть лень - 10 действенных методов от бывалого лентяя. Много видео

И лень одолела бы мир, но ей тоже — лень. Леонид Сухоруков

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

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

Что нужно понять, прежде чем бороться с ленью?

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

Статья о лени: Что такое лень

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

Как побороть лень

Этот список советов о том, как побороть лень, поможет вам заставить себя взяться за выполнение отложенного задания:

Не хотите выполнять задания, которые не успеваете сдать к сроку? Не вопрос! Расположитесь на диване, расслабьтесь и… Пролежите так около часа. Запретите себе включать плеер или телевизор, заходить в социальные сети — просто полежите так какое-то время, наблюдая пейзаж за окном или трещины. Минут через десять вы начнете мысленно составлять список вариантов занять себя. Через полчаса вы обдумаете все невыполненные задания и придумаете несколько способов выполнения каждого из них. А через час у вас просто зачешутся руки в предвкушении какой-либо работы. Смысл всего вышеизложенного — ВООБЩЕ НИЧЕГО НЕ ДЕЛАЙТЕ! ВООБЩЕ!
Представьте, что ваша цель — это результат работы, которую вы намеренно тормозите. Результат — это конечная остановка, а лень — пропасть, в которую вы добровольно съезжаете, прерывая свой маршрут. Хотелось бы вам вместо положенных двух часов провести в поезде, скажем, пять? Да еще и только потому, что машинист — отчаянный лентяй? Очень вряд ли.
Попробуйте оттолкнуться от обратного и сосредоточиться не на устранении лени, а на своих целях. Думайте о приятных прогулках с друзьями, о полезных разговорах, о создании проектов и о генеральной уборке дома. Подключите фантазию и вы сможете увидеть много вариантов развития событий в вашей жизни, зависимых от вовремя принятого решения или сделанного рабочего задания. Не мешайте себе преодолевать трудности и переходить на новый уровень.
Переборите страх перед трудностями и негативными эмоциями, которые с ними связаны. Ведь лень это еще и своеобразная защита от неприятных переживаний, возникающих по мере решения проблем. Но отгородившись от своих дел и заданий вы все равно не избавитесь от негатива — чувство вины за невыполненную работу и отмененную встречу еще долго будет вас мучить. Не бойтесь побороть лень и столкнуться лицом к лицу с проблемами, которые рано или поздно настигнут.
Составьте план дел на день или неделю и строго придерживайтесь его. За невыполнение какого-либо пункта вы можете лишить себя вкусного обеда или прослушивания нового альбома любимой группы. А за своевременное решение задачи, описанной в плане — наградить себя новой покупкой или побаловать чем-нибудь другим. Так вы постепенно научитесь воспитывать и дисциплинировать себя.
Обратитесь за помощью к друзьям или родственникам — расскажите им о своей проблеме и попросите проконтролировать процесс работы. Например, ваш друг может несколько раз в день интересоваться успехами вашего курсового проекта. Довольно стыдно будет признаться, что лень помешала вам выполнить хотя бы малую часть работы. Зная, что кто-то из близких обязательно спросит вас об успехах с тем или иным делом, вы постараетесь хоть как-то в этом деле продвинуться.
Постоянно напоминайте себе о главной, глобальной цели, к которой вы движетесь. Может, это диплом об окончании университета или серьезное повышение на работе? Каждая выполненная задача — это еще один маленький шаг, приближающий вас к давней мечте.
Разделите большой объем работы на части — попробуйте растянуть его на несколько дней или недель. Это позволит вам не опускать руки. Ведь, думая о предстоящей работе, вы будете каждый день представлять какую-то одну конкретную ее часть. Но этот способ борьбы с ленью подействует только в том случае, если вы достаточно дисциплинированы для регулярного выполнения запланированного.
Комбинируйте разные виды деятельности на протяжении своего дня. Но не полагайтесь на импровизацию — бездумно чередуя все занятия, не уделяя достаточно времени ни одному из них, вы только собьете свой рабочий настрой.
Трезво оценивайте задачи, которые стоят перед вами. Распределите все отложенные дела на несколько категории — например так — срочные, и те, которые можно отложить на неопределенный срок.

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

Читаем далее: как бороться с ленью и апатией.

Мотивация о времени или как побороть лень

Видео 5 простых советов

Как побороть лень за 5 дней

Секреты от Евгения Дейнеко

17 Здоровые и практичные стратегии

Нужен ленивый день? Это случается с лучшими из нас. В это напряженное время не просто устраивать ленивый день, а очень нужно.

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

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

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

«Как мне перестать лень?» Ответ может быть не таким резким, как вы ожидали. Хотя некоторые люди могут быть более ленивыми, чем другие, даже очень продуктивным людям иногда бывает сложно добиться цели.

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

1. Сделайте свои цели управляемыми.

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

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

2. Не ожидайте, что вы будете совершенны.

Перфекционизм растет, и это наносит психологический урон.

Одно исследование 2017 года, в котором изучались студенты колледжей в период с 1989 по 2016 год, показало, что с годами перфекционизм растет.Исследователи отметили, что «молодые люди [теперь] сталкиваются с более конкурентной средой, более нереалистичными ожиданиями и более тревожными и контролирующими родителями, чем предыдущие поколения».

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

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

3. Используйте позитивный вместо негативного разговора с самим собой

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

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

4. Составьте план действий

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

5. Используйте свои сильные стороны

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

6. Признавайте свои достижения на этом пути

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

7. Обратиться за помощью

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

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

8. Не отвлекайтесь

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

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

9. Делайте утомительные дела веселыми

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

10. Вознаграждайте себя

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

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

1. Ешьте продукты с высоким содержанием белка

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

Греческий йогурт
миндаль
яйца
тунец

2. Избегайте сладких и жирных продуктов

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

3. Упражнение

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

4. Сон и отдых

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

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

5. Управляйте стрессом

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

6. Носите воду с собой

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

7. Бросить курить

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

Бросить курить может быть сложно, но ваш врач может помочь вам составить индивидуальный план действий.

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

Психические расстройства

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

Медицинские условия

Медицинские условия могут вызвать изменения в вашем энергетическом уровне и помешать вам нормально функционировать.Примеры:

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

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

языковых функций - Как проводить ленивую оценку в Dart?

Переполнение стека

Около
Продукты
Для команд

Переполнение стека Общественные вопросы и ответы
Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии Программирование и связанные с ним технические возможности карьерного роста
Талант Нанимайте технических специалистов и создавайте свой бренд работодателя

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

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

Согласно последним данным HTTP-архива, средний размер страницы на настольных компьютерах составляет 1511 КБ. Изображения составляют почти 650 КБ этого размера, примерно 45% от общего размера страницы.Теперь, поскольку мы не можем отказаться от изображений, нам нужно заставить наши веб-страницы быстро загружаться с ними.

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

Получите это руководство в виде электронной книги. Прямо в ваш почтовый ящик!

Содержание

Что дает отложенная загрузка

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

Что такое отложенная загрузка изображений?

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

Слово «ленивый» в английском языке часто связывают с уклонением от работы как можно дольше.

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

Технику отложенной загрузки можно применить практически ко всем ресурсам на странице.Например, в одностраничном приложении, если JS-файл понадобится позже, лучше не загружать его изначально. Если изображение не требуется заранее, загрузите его позже, когда его действительно нужно просмотреть.

Зачем вообще нужна отложенная загрузка изображений?

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

Он имеет два основных преимущества.

1. Повышение производительности

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

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

2. Снижение затрат

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

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

Какие изображения можно загружать лениво?

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

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

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

Ленивая загрузка важна не только для хорошей производительности, но и для удобства пользователей.

Способы отложенной загрузки изображений

Изображения на веб-странице можно загружать двумя способами - с помощью тега или с помощью свойства CSS `background`. Давайте сначала рассмотрим наиболее распространенный из двух тегов, , а затем перейдем к фоновым изображениям CSS.

Общая концепция отложенной загрузки изображений в теге

Ленивая загрузка изображений может быть разбита на два этапа:

Шаг первый - предотвратить загрузку изображений заранее. Для изображений, загруженных с использованием тега , браузер использует атрибут src тега для запуска загрузки изображения.Независимо от того, является ли это 1-м или 1000-м изображением в вашем HTML и находится вне экрана, если браузер получит атрибут src , он запустит загрузку изображения.

Таким образом, чтобы отложить загрузку таких изображений, поместите URL-адрес изображения в атрибут, отличный от src . Допустим, мы указываем URL изображения в атрибуте data-src тега изображения. Теперь, когда src пуст, браузер не запускает загрузку изображения

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

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

Чтобы проверить, когда изображение входит в область просмотра, есть два способа:

Инициировать загрузку изображения с помощью событий Javascript

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

Когда происходит какое-либо из этих событий, мы находим все изображения на странице, которые должны быть загружены лениво и еще не загружены.По этим изображениям мы проверяем, какие из них сейчас находятся в области просмотра. Это делается с помощью смещения верхнего края изображения, верхнего края прокрутки текущего документа и высоты окна. Если он вошел в область просмотра, мы выбираем URL-адрес из атрибута data-src и помещаем его в атрибут src . Это вызывает загрузку изображения. Мы также удаляем класс lazy , который определяет изображения, которые нужно отложить для загрузки для событий, которые запускаются позже. После загрузки всех изображений мы удаляем прослушиватели событий.

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

Вот рабочий пример такого подхода.

Если вы заметили, первые 3 изображения в примере загружаются заранее. URL-адрес присутствует непосредственно в атрибуте src вместо атрибута data-src . Это важно для хорошего взаимодействия с пользователем. Поскольку эти изображения находятся вверху страницы, их следует сделать видимыми как можно скорее.Мы не должны ждать, пока событие или выполнение JS загрузят их.

Использование Intersection Observer API для запуска загрузки изображений

Intersection Observer API - это относительно новый API в браузерах. Это позволяет очень просто определить, когда элемент входит в область просмотра, и выполнить действие, когда это произойдет. В предыдущем методе нам нужно было привязать события, не забывать о производительности и реализовать способ вычисления, был ли элемент в области просмотра или нет. API-интерфейс Intersection Observer делает это действительно простым, помогает избежать математических вычислений и обеспечивает отличную производительность.

Пример использования Intersection Observer API для ленивой загрузки изображений:

Мы прикрепляем наблюдателя ко всем изображениям для ленивой загрузки. Как только API обнаруживает, что элемент вошел в область просмотра, используя свойство isIntersecting , мы выбираем URL-адрес из атрибута data-src и перемещаем его в атрибут src , чтобы браузер запустил загрузку изображения. Как только это будет сделано, мы удаляем ленивый класс из изображения, а также удаляем наблюдателя из этого изображения.

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

Однако поддержка Intersection Observer API доступна не во всех браузерах.Следовательно, нам нужно вернуться к методу прослушивателя событий в браузерах, где API-интерфейс Intersection Observer не поддерживается. Мы учли это в приведенном выше примере.

Native Lazy Loading

В своем последнем обновлении Google добавила поддержку собственной отложенной загрузки в последней версии браузера Chrome - Chrome 76.

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

На самом деле, для этого не нужно даже быть разработчиком. Некоторых базовых знаний HTML достаточно для реализации атрибута «загрузка», что делает эту функцию доступной для многих других администраторов веб-сайтов.

Итак, код теперь будет выглядеть так -

Атрибут загрузки поддерживает следующие значения:

lazy - Откладывание загрузки ресурсов до достижения определенное расстояние от области просмотра.
нетерпеливый - загрузка ресурсов сразу после загрузки страницы, независимо от того, где они расположены на странице, выше или ниже сгиба страницы.
auto - Это значение запускает отложенную загрузку по умолчанию. По сути, это то же самое, что не включать атрибут загрузки.

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

Обновление (источник: web.dev)

Чтобы предотвратить переформатирование окружающего контента при загрузке лениво загруженного изображения, обязательно добавьте атрибуты height и width к элементу или укажите их значения непосредственно во встроенном стиле:

Источник: Web.dev - http://web.dev/native-lazy-loading/#load-in-distance-threshold

Получите это руководство в виде электронной книги.Прямо в ваш почтовый ящик!

Ленивая загрузка фоновых изображений CSS

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

С фоновыми изображениями CSS все не так просто. Чтобы загрузить фоновые изображения CSS, браузеру необходимо построить дерево DOM (объектная модель документа), а также дерево CSSOM (объектная модель CSS), чтобы решить, применяется ли стиль CSS к узлу DOM в текущем документе.

Если правило CSS, определяющее фоновое изображение, не применяется к элементу в документе, то браузер не загружает фоновое изображение. Если правило CSS применимо к элементу в текущем документе, браузер загружает изображение.

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

Вот рабочий пример ленивой загрузки фонового изображения CSS.

Следует отметить, что код Javascript для отложенной загрузки все тот же. Мы используем метод API Intersection Observer с откатом к слушателям событий. Уловка заключается в CSS.

Элемент с идентификатором bg-image имеет фоновое изображение , указанное в CSS. Однако, когда к этому элементу добавляется класс lazy , в CSS мы переопределяем свойство background-image и устанавливаем его значение none.

Поскольку правило, объединение # bg-image с классом .lazy имеет более высокое предпочтение в CSS, чем просто # bg-image , браузер изначально применяет свойство background-image: none к элементу . Когда мы прокручиваем вниз, Intersection Observer (или прослушиватели событий) обнаруживает, что изображение находится в области просмотра, и удаляет класс lazy . Это изменяет применимый CSS и применяет фактическое свойство background-image к элементу, запускающему загрузку фонового изображения.

Лучшее взаимодействие с пользователем за счет отложенной загрузки изображений

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

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

Как мы можем решить такие проблемы, связанные с пользовательским интерфейсом, с отложенной загрузкой изображений?

1. Использование правильных заполнителей изображения

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

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

Взгляните на некоторые примеры лучших заполнителей для наших изображений:

a) Заполнитель доминирующего цвета

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

Этот метод уже довольно давно используется в результатах поиска изображений Google и Pinterest.

Образец изображения, взятого из Manu.ninja

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

Используя ImageKit, заполнитель доминирующего цвета можно получить с помощью последовательного преобразования в ImageKit, как показано здесь:

Пример URL-адреса изображения-заполнителя доминирующего цвета с использованием ImageKit

Размер изображения-заполнителя составляет всего 661 байт по сравнению с исходным изображением, которое 12700 байт, что делает его 19x меньше . И это обеспечивает более приятный переход от заполнителя к фактическому изображению.

Вот видео, демонстрирующее, как этот эффект работает для пользователя:

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

b) Заполнитель изображения низкого качества (LQIP)

Мы можем расширить приведенную выше идею использования заполнителя доминирующего цвета.

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

Эту технику использовали Facebook и Medium.com для изображений на своих веб-сайтах и в приложениях.

Пример URL-адреса изображения LQIP с использованием ImageKit

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

Вот видео, демонстрирующее, как этот эффект работает для пользователя:

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

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

2.Добавление некоторого времени буфера для загрузки изображения

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

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

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

Решение
Вместо загрузки изображения, когда они точно входят в область просмотра, загружайте изображения, когда они, скажем, на расстоянии 500 пикселей от входа в область просмотра.Это обеспечивает дополнительное время между триггером загрузки и фактическим входом в окно просмотра для загрузки изображений.

С помощью Intersection Observer API вы можете использовать параметр root вместе с параметром rootMargin (работает как стандартное правило полей CSS), чтобы увеличить эффективную ограничивающую рамку, которая, как считается, находит «пересечение».

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

В этом примере для загрузки изображений используется порог в 500 пикселей.

Как видно из видео ниже (отслеживайте сетевые запросы, которые четко отображаются внизу), во время прокрутки, когда отображается третье изображение, загружается 5-е изображение. Когда в поле зрения появляется 4-е изображение, загружается 6-е изображение. Таким образом мы даем достаточно времени для полной загрузки изображений, и в большинстве случаев пользователь вообще не увидит заполнитель.

Если вы еще не заметили, во всех наших примерах третье изображение (image3.jpg) всегда загружается впереди, даже если он находится за пределами области просмотра. Это также было сделано по тому же принципу - загружать немного заранее, а не точно на пороге для лучшего взаимодействия с пользователем.

3. Предотвращение смещения контента при отложенной загрузке

Это еще один тривиальный вопрос, который, если будет решен, может помочь сохранить хорошее взаимодействие с пользователем.

Проблема
Когда изображение отсутствует, браузер не знает размеров содержимого, которое должно отображаться во вложенном контейнере.И если мы не укажем его с помощью CSS, включающий контейнер не будет иметь размеров, то есть 0 x 0 пикселей. Итак, когда изображение загружается, браузер изменяет размер охватывающего контейнера, чтобы он соответствовал изображению.
Это внезапное изменение макета заставляет другие элементы перемещаться, и это называется смещением содержимого. Как показано в этой статье и видео о перемещении контента из журнала Smashing Magazine, это довольно неприятный опыт для пользователя, поскольку контент внезапно перемещается при загрузке изображения.

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

4. Не ленитесь загружать все изображения

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

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

a) Любое изображение, которое присутствует в области просмотра или в начале веб-страницы, должно загружаться лениво , а не . Это относится к любому изображению заголовка, рекламному баннеру, логотипам и т. Д., поскольку пользователь должен увидеть их, как только страница загрузится.

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

b) Любое изображение, которое немного выходит за пределы области просмотра, не должно загружаться лениво. Это основано на том, что обсуждалось ранее - загрузите немного заранее.Итак, скажем, любое изображение размером 500 пикселей или одно прокрутка снизу области просмотра также может быть загружено вперед.

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

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

Javascript-зависимость отложенной загрузки

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

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

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