Как display: none для изображений влияет на скорость загрузки страницы

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

Работая с ресурсами наших клиентов мы стали замечать, что время загрузки изображений в три раза превысило средние значения, определяемые для сходных сайтов. Анализ кода показал, что большое количество изображений скрывалось с помощью медиа-запросов и CSS-свойства display: none.

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

Следует помнить, что свойство display: none, установленное для изображений или для контейнера, содержащего изображения, не блокирует загрузку этих изображений браузером.

Как это работает?

Как Вы заметили, свойство display: none влияет на изображения так же, как и на другие элементы: изображение не отображается, но остается на своем месте в объектной модели документа (DOM), хотя и не расходует ресурсы браузера.

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

Посмотрим на пример:

<!doctype html>
<html lang="en">
<head>
</head>
<body>
    <h2>Header</h2>
    <div>
        <img src="/images/img1.jpg" alt="image 1">
        <img src="/images/img2.jpg" alt="image 2">
        <img src="/images/img3.jpg" alt="image 3">
    </div>  
</body>
</html>

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

Однако, если мы посмотрим, какие сетевые ресурсы будут загружаться при обращении к этой HTML-странице, мы увидим, что браузер обращается и к скрытым изображениям. Такой же результат получится и в том случае, когда свойство display: none будет установлено для каждого элемента img.

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

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

Решение

  1. Вместо использования display: none Вы можете исключить изображения из состава HTML-документа, а значит и из DOM, и добавить их при необходимости. Сделать это очень легко, как в случае, когда Вы используете в своем проекте различные JS-фреймворки или библиотеки (например: Angular или React), так и в случае, когда можно воспользоваться только Vanilla JS. Во всех этих случаях вывод изображений можно заблокировать с помощью известного всем условного оператора
    if    .
  2. Изображения, которые нужно скрыть, можно использовать как background-image, так как фоновые изображения для скрытых элементов не загружаются.

Заключение

Если Вы используете для изображений CSS-свойство display: none, они все равно будут загружены.

Существуют как минимум два способа (перечисленных выше) для решения этой проблемы. Если Вы не собираетесь вносить изменения в объектную модель документа (DOM), необходимо использовать вариант с фоновыми изображениями (2).

Спасибо за внимание.

Перевод статьи Santiago García da Rosa “How CSS display:none Affects Images on Page Load”.

Display None — это что такое? Свойства и использование :: SYL.ru

Удобная обувь, ортопедические стельки и вечерний уход: как победить мозоли

8 причин, почему тянет на женатиков. Не каждая женщина сама их понимает

Мощный коктейль от выпадения волос: семена льна, подсолнечника и тыквы

Переход на веганство: модные привычки женщин, замедляющие метаболизм

Юбки из тюля — яркий хит летнего стритстайла 2023: как их стилизовать в образе

Фосфор — важнейший минерал. Восемь продуктов, богатых фосфором, на каждый день

«Ногти омбре»: как сделать модный маникюр в домашних условиях

Ничего не добилась в жизни! Что делать с сожалением о своей несостоятельности

Важность нити разговора: как научиться друг друга слушать и слышать

Что, и фрукты нельзя? 3 полезные привычки, вредные для печени

Автор

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

Как скрыть элементы при помощи CSS

Существует два наиболее распространенных способа спрятать элемент, который находится в HTML-коде. Один из них — использовать свойства display или visibility. На первый взгляд эти два свойства могут показаться одинаковыми, но у каждого из них есть свои особенности, о которых вы должны знать. Давайте внимательнее рассмотрим отличия личия между visibility: hidden и display: none.

Свойство изменения видимости

Первый вариант прячет элемент от браузера, но эта скрытая часть кода по-прежнему занимает место на веб-странице. Другими словами, он делает элемент невидимым, но все еще остается на месте и занимает пространство, которое он бы занимал, если бы был видимым. Если вы разместите тег div на странице и используете CSS, чтобы задать ему размеры, свойство visibility: hidden сделает так, что блок не будет показываться в окне браузера, но текст после него будет вести себя так, как будто этот блок все еще присутствует.

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

Свойство display: none и его применение в CSS

В отличие от свойства visibility, которое оставляет элемент в потоке, второе свойство CSS, использующееся для сокрытия элементов, позволяет спрятать блок так, будто его и не было. Для div, display none работает таким образом, будто полностью удаляет этот элемент из документа. Он не занимает никакого пространства, хотя в исходном коде HTML все равно остается. Элемент не появится на вашем сайте, и не будет никаких видимых доказательств его существования. При том, что окружающие элементы будут рассматривать его как пустое пространство и смещаться, в зависимости от собственных свойств. Так происходит потому, что он выпадает из потока. Это свойство может применяться удачно или не очень, в зависимости от намерений верстальщика. В любом случае злоупотреблять им не стоит.

Использование свойства при верстке

Верстальщики часто используют свойство display: none при тестировании страницы. Обычно так происходит в случае, если какую-то область необходимо спрятать на некоторое время, чтобы можно было протестировать другие области страницы. В этом случае следует использовать display: none. Важно помнить, что элемент должен быть возвращен обратно на страницу до фактического запуска сайта. Дело в том, что что элемент, который удаляется из потока при помощи этого метода, становится невидимым для поисковых систем и программ чтения с экрана, даже если он продолжает оставаться в разметке HTML.

В прошлом этот метод использовался, чтобы попытаться повлиять на рейтинги в поисковых системах. Но теперь элементы, которые не отображаются, могут быть помечены красным флагом Google, чтобы понять, почему используется этот подход. Один из способов, как с пользой использовать display: none — создание сайтов с адаптивным дизайном. При написании кода для таких веб-страниц часто необходимо создавать элементы, которые доступны для отображения только в определенном разрешении, но скрыты для других вариантов. Вы можете использовать display: none в CSS, чтобы скрыть этот элемент, и затем включите его снова позже. Это приемлемое использование этого свойства, потому что нельзя заподозрить верстальщика в попытке скрыть что-либо ради влияния на рейтинг в поисковых системах.

Отображение свойства в JavaScript

Свойство display является важным свойством CSS, но оно же обычно используется в JavaScript для сокрытия и отображения элементов без их удаления и повторного создания. Для того чтобы переключить отображение элемента div, можно использовать не только CSS, но и JavaScript. В этом случае используется следующий код: <div>. Еще один вариант — воспользоваться библиотекой jQuery. Как и свойство CSS display: none для div, метод jQuery» hide () также скрывает выбранные элементы. Скрытые части кода не будут отображаться вообще.

Программы чтения с экрана и видимость элементов

Программы для чтения с экрана, так называемые «читалки», меняют свое поведение, когда находят в содержимом элемент, скрытый при помощи display: none. Скрытое содержание, как правило, не сообщает о себе читателям, если в нем не прописаны атрибуты label. Есть ситуации, когда разработчики могут захотеть, чтобы контент был скрыт визуально, но раскрыт пользователям программы чтения с экрана. Например, дизайн может потребовать двусмысленных фраз, таких как «больше», где контекст визуально очевиден, но может быть потерян для пользователей программы чтения с экрана. Чтобы обойти это, разработчик может сделать следующее: написать правило CSS c display block или none и добавить разметку с описанием этого элемента.

Проблемы с программами чтения с экрана

Проблема в том, что сокрытие контента с display: none также скрывает содержимое от пользователей, которые читают с экрана. Чтобы обойти это, разработчики стали позиционировать содержимое с помощью нескольких методов, например, абсолютное позиционирование с заданными шириной и высотой элемента и свойством overflow: hidden. При использовании разметки с описанием в этом случае, контекстная информация не отображается на экране, но объявляется пользователям программы чтения с экрана. Но если провести проверку сайтов на доступность, чаще всего находятся элементы, которые неправильно скрыты при помощи свойства display: none. Наиболее распространенным примером являются ссылки, предназначенные для помощи пользователям клавиатуры и программ чтения с экрана. Ирония заключается в том, что эти благие намерения сходят на нет и делают ссылки бесполезными из-за использования display: none.

Основные правила для решения проблемы доступности

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

Вот несколько правил, которые должны помочь определить, когда и как скрывать элементы визуально:

  1. Если необходимо скрыть содержимое визуально, но оставить его доступным для программ-читалок, не используйте для text display: none.
  2. Если скрываемый вами контент может быть полезен только для пользователей, использующих программы для чтения с экрана, подумайте, нужно ли его скрывать. Если все же решили скрыть его, убедитесь, что он становится видимым при фокусировке.
  3. Если вы хотите скрыть что-то временно и отобразить его в результате взаимодействия с пользователем, display: none может оказаться как раз тем, что нужно. Важным фактором в этом случае является то, что, поскольку скорее вы будете использовать JavaScript, чтобы сделать содержимое видимым, изменив значение display-свойства, вы должны иметь в виду, что скрывать его нужно будет и для пользователей, у которых нет JS.

При работе с визуализацией содержимого все сводится к осознанию того, что display: none скрывает содержимое от всех, кто использует CSS для браузера.


Похожие статьи

  • Как подключить ноутбук к телевизору: пошаговая инструкция
  • Самые лучшие смартфоны по всем характеристикам: рейтинг, список и отзывы
  • Как в WhatsApp прочитать чужую переписку? Простой способ взлома WhatsApp
  • «Синий экран смерти»: что делать? Windows 7 — коды ошибок, решение проблем. Переустановка Windows 7
  • Что такое ММС и как ими пользоваться? Настройки ММС
  • Как скачивать музыку из «ВК» на айфон: программы, инструкции
  • UEFI — что это? Загрузка, установка, преимущества, особенности настройки

Также читайте

Скрыть или показать элементы в HTML с помощью свойства отображения

следующий → ← предыдущая

HTML является основой веб-страниц и используется для структурирования веб-сайтов и веб-приложений.

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

Атрибут отображения стиля скрывает и показывает содержимое HTML DOM при доступе к элементу DOM с помощью JavaScript/jQuery.

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

document.getElementById(«элемент»).style.display = «нет»;

Измените атрибут отображения стиля на «блок», чтобы проиллюстрировать элемент.

document.getElementById(«элемент»).style.display = «блок»;

Методы демонстрации работы свойства отображения стиля:

1. Создайте несколько разделов, присвойте им идентификатор или класс, а затем стилизуйте их следующим образом:

<дел> <дел> <дел>

2. Ширина и высота определяют ширину и высоту содержимого, 50% создает круг, радиус границы 0% создает квадратную рамку, а 25% создает закругленную форму, а элементы div располагаются с плавающей запятой, а поле справа разделяет их. с зазором справа.

<тип стиля="текст/CSS"> .круглый { радиус границы: 25%; плыть налево; ширина: 140 пикселей; высота: 140 пикселей; поле справа: 60px; } .круг { радиус границы: 50%; плыть налево; ширина: 140 пикселей; высота: 140 пикселей; поле справа: 60px; } .квадрат { радиус границы: 0%; плыть налево; ширина: 140 пикселей; высота: 140 пикселей; поле справа: 60px; }

3. Background-color указывает цвет фона div.

#округленный { цвет фона: #F15412; } #круг { цвет фона: #EB1D36; } #квадрат { цвет фона: #F73D93; }

4. document.getElementById выберет div с указанным идентификатором.

<тип сценария="текст/javascript"> document.getElementById(«круг»).onclick = функция()

5. Когда мы нажимаем на div, style.display = «none» заставит его исчезнуть.

.style.display = «нет»;

Применение функции style. display:

<голова>Азбука…. <тип стиля="текст/CSS"> .круглый { радиус границы: 25%; плыть налево; ширина: 140 пикселей; высота: 140 пикселей; поле справа: 50px; } .круг { радиус границы: 50%; плыть налево; ширина: 140 пикселей; высота: 140 пикселей; поле справа: 60px; } .квадрат { радиус границы: 0%; плыть налево; ширина: 140 пикселей; высота: 140 пикселей; поле справа: 60px; } #округленный { цвет фона: #F15412; } #круг { цвет фона: #EB1D36; } #квадрат { цвет фона: #F73D93; } <тело> <дел> <дел> <дел> <тип сценария="текст/javascript"> document.getElementById («округленный»). onclick = функция () { document.getElementById(«округленный»).style.display = «нет»; } document.getElementById(«круг»).onclick = функция() { document.getElementById(«круг»).style.display = «нет»; } document. getElementById(«квадрат»).onclick = функция() { document.getElementById(«квадрат»).style.display = «нет»; }

Вывод:

После нажатия квадрат исчезнет:

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

Аналогичным образом, нажатие на закругленную фигуру приводит к ее исчезновению:

Следующая темаКак добавить форму входа в изображение с помощью HTML и CSS

← предыдущая следующий →

Правильный способ переключения отображения с помощью JavaScript

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

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

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

Фото Марин Вандевурде

Быстрый и грязный JavaScript, чтобы показать/скрыть вещи

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

 const toggleDisplay = target => target.style.display =
  (target.style.display == 'нет')?
    'блокировать' :
    'нет'

Выше показан традиционный способ показать или скрыть любой элемент HTML с помощью простого JavaScript. Он ищет свойство CSS display в DOM и обновляет его в соответствии с базовой логикой переключения всякий раз, когда нажимается триггер.

Проще говоря, он берет ссылку на элемент, а затем переключает его отображение между «блок» и «нет». Прикрепим его к нажатию кнопки.

 <дел>...
<кнопка
 >
    Переключить отображение

Выше приведен базовый HTML-код, необходимый для реализации метода toggleDisplay .

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

Проблема

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

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

Исправление

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

 константа
  toggleDisplay = (триггер, цель, defaultDisplay = 'блок') => {
  ...
}

Как обсуждалось выше, добавление отображения по умолчанию в качестве встроенного CSS устраняет первую проблему. Еще один способ сделать это — добавить отображение по умолчанию с объектом стиля DOM.

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

 const toggleDisplay = (триггер, цель, defaultDisplay = 'блок') => {
    target.style.display = дисплей по умолчанию
  trigger.addEventListener('щелчок', e => {
    target.style.display =
      (target.style.display == 'нет')?
        по умолчаниюДисплей:
        'никто'
  }) 
}

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

Расширенное переключение отображения JavaScript

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

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

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

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

 пусть defaultDisplay =
    window.getComputedStyle(target).getPropertyValue('display')

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

  const toggleDisplay = (цель, триггер) => { 
  пусть defaultDisplay =
    window.getComputedStyle(target).getPropertyValue('display')
    trigger. addEventListener('щелчок', e => {
    target.style.display =
      (target.style.display == 'нет')?
      по умолчаниюДисплей:
      'никто'
  })
}

Посмотреть живую демонстрацию

Дальнейшие улучшения

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

 const toggleDisplay = (цель, триггер) => {
    if(!target || !trigger) вернуть 
  пусть defaultDisplay =
    window.getComputedStyle(target).getPropertyValue('display')
  trigger.addEventListener('щелчок', e => {
    target.style.display =
      (target.style.display == 'нет')?
      по умолчаниюДисплей:
      'никто'
  })
}

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

 console.
No related posts.