Pull to refresh

Comments 8

Наличие на странице изображения, даже скрытого средствами CSS, приведёт к выполнению HTTP-запроса на его загрузку.

Интересно, что если изображение будет установлено css свойством background: url('...'), то оно загрузится только после удаления display: none
@media (min-width: 400px) {
  img[hidden] {
    display: block;
  }
}

Вот так точно не следует делать. Атрибут hidden нужно ставить/удалять с помощью JavaScript.


someDOMElement.hidden = false /* true */
Например, если элемент скрыт средствами CSS, и мы показываем этот элемент в некий момент работы со страницей, к этому моменту изображение уже будет загружено.


Странно, я думал, что это не так. Возможно, это потому, что у вас в примере на картинке не сам img имеет display: none, а div, в котором он расположен.
возможность редактирования стилей элемента пользователем — это интересно. про visibility дочернего элемента не знал (или знал, но забыл), пару раз требовалось нечто подобное (уже не помню решения). clip-path давно собираюсь поизучать, все никак руки не доходят)
Спасибо за статью, встретил интересные моменты. Не хватает свойства css для скрытия элемента:
transform: scale(0)

ну и отображения соответственно:
transform: scale(1)
Вот из-за этого свойства столкнулся сегодня с неприятным моментом. У меня форма обратной связи выводилась в модальном окне, которое как раз отображалось и скрывалось с помощью transform: scale. Вот только хоть модального окна с формой и не было видно на экране, ссылка с рекапчи была полностью кликабельна и она находилась прямо над кнопкой мобильного меню. В итоге при клике по кнопке меню происходил переход на сайт гугла. Пришлось добавлять visability: hidden, что решило проблему.
Ну я никогда модальные окна так не скрывал, каждому способу свое применение.
Хорошая статья, но не рассмотрен условный рендеринг при реактивном подходе.
Sign up to leave a comment.