Загружается ли фоновое изображение у скрытого блока?

Ссылка скопирована
CSS HTML PHP
27 марта 2026 1 ответ

Есть блок .screen со свойством display: none. У псевдоэлемента этого блока задано фоновое изображение.

.screen {     display: none; }  .screen::before {     background: url("../img/bg-desktop.jpg") center top no-repeat; }

.screen { display: none; } .screen::before { background: url("../img/bg-desktop.jpg") center top no-repeat; }

Загружается ли это фоновое изображение у псевдоэлемента скрытого блока?

Дополнительно:

Нет, не загрузится. Это буквально 20 секунд, чтобы посмотреть в профайлере :)

  • Я посмотрел во вкладке sources, но не был уверен)
  • ymfront, смотри во вкладке "Network" куда уходят запросы. Можно выбрать фильтр по "Media". К слову, если я не путаю, картинка не загрузится даже если задан display, но не задан content в псевдоэлементе
  • По-моему все равно загрузится но отображаться не будет, поэтому в плагинах на ленивую загрузку URL указывается другим параметром что то из серии data-url="" и его потом подставляют и наче какой в этом смысл.... Но вообще я бы перепроверил с помощью огромной картинки...
  • Уставшая Вишенка, 1. data-url используют для тегов img, потому что они таки загружаются даже скрытые.
    2. Зачем проверять огромной картинкой? Запрос вы увидите в любом случае.
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Елена Вебер Ответ

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

При использовании CSS свойства background-image для задания фонового изображения элемента, это изображение будет загружено в любом случае, даже если элемент скрыт с помощью display: none; или visibility: hidden;. Однако, есть важный момент - браузер может оптимизировать загрузку фоновых изображений для скрытых элементов, чтобы повысить производительность страницы.

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

1. Использование lazy loading: можно отложить загрузку фонового изображения до момента, когда элемент станет видимым для пользователя. Это можно сделать с помощью JavaScript библиотек, таких как LazyLoad или Intersection Observer API.

2. Загрузка фонового изображения динамически: вместо простого присваивания background-image через CSS, можно добавить это свойство к элементу динамически только в момент, когда он становится видимым.

Пример использования lazy loading с помощью JavaScript:

const lazyImages = document.querySelectorAll('.lazy-image');
 
const lazyLoad = target => {
  const io = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.getAttribute('data-src');
 
        img.setAttribute('src', src);
        observer.disconnect();
      }
    });
  });
 
  io.observe(target);
};
 
lazyImages.forEach(lazyLoad);

const lazyImages = document.querySelectorAll('.lazy-image'); const lazyLoad = target => { const io = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; const src = img.getAttribute('data-src'); img.setAttribute('src', src); observer.disconnect(); } }); }); io.observe(target); }; lazyImages.forEach(lazyLoad);

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

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

Вам также может быть интересно

Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ