Будет ли загружаться изображение, если для него задан CSS так, чтобы видимость была скрыта?

Будет ли загружаться изображение, если для него задан CSS так, чтобы видимость была скрыта?

Ответов (4)

Да, он по-прежнему будет загружаться и храниться в DOM. Тогда вы сможете быстро показать это с помощью JS!

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

Вы можете проверить это экспериментально :

  • Создайте два относительно больших изображения: a.jpg и b.jpg.
  • Поместите изображение на страницу с исходным файлом a.jpg
  • Напишите какой-нибудь javascript, чтобы изменить источник изображения на b.jpg при нажатии ссылки (например, эскиз b.jpg)
  • Загрузите страницу. Обратите внимание, что когда вы нажимаете ссылку, вам нужно дождаться загрузки b.jpg.
  • Теперь отредактируйте страницу так, чтобы b.jpg был включен на страницу в первую очередь, но имел атрибут CSS visibility: hidden
  • Перезагрузите страницу с помощью Ctrl + F5 . По завершении щелкните ссылку еще раз.
  • Обратите внимание, что теперь b.jpg загружается намного быстрее. Это потому, что он был предварительно загружен.
  • Разные браузеры могут вести себя по-разному.

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