ты ее прицепил к документу. Как только ты ее отцепишь браузер сразу выкинет "внутренности" картинки.
На SSR браузер получает готовый html видит там картинки, видосики и айфреймы загружает их как будто это обычный хтмл. Затем загружается JS файл с твоим бандлом и вызывается гидрация, пусть это будет вторая секунда когда юзер уже смотрит на готовую страницу. Гидрация берет отцепляет все ноды от дома - картинки пропадают, состояние видоса пропадает, айфреймы свой браузерный стейт тоже теряют. А затем гидрация сразу же прицепляет это все обратно. В итоге все что браузер уже сделал, он начинает делать заново. Грузит src видосов, картинок и айфреймов.
Вопрос зачем гидрация отцепляла ноды от дерева?
https://drive.google.com/file/d/1GeDHFSAyolu27uyg7k0DzO6ZF-HcuFNq/view?usp=sharing пример записал такого поведения, но только с айфреймом ютуб. svelte/sapper. До этого был лейзиоад на айфрейм, но реклама не показывается при таком подходе в айфрейме - у них google полиси по поводу рекламы в автоплей режиме (лейзи был реализован через thumb на котором по клику грузился iframe)
спасибо =) вот и тот несуществующий узкий кейс с видосом ютюба как основным контентом страницы
а картинки у вас справа они тоже под свелтом или нет? Что будет если снять с них height?
если речь о src https://static.zentrum-der-gesundheit.de/img/df912d304392cfce8a050d21f26dc94e?width=100&height=100 то на сервере крутится imgproxy в который через nginx эти параметры передаются, если убрать высоту то загрузится c оригинальным аспект ретио и заданной шириной https://static.zentrum-der-gesundheit.de/img/df912d304392cfce8a050d21f26dc94e?width=100, а если убрать ширину тоже, то загрузится с полной шириной картинки
это классно, но я хотел посмотреть как браузер поведет себя если у него не будет инфы о высоте картинки, там возможно надписи схлопнутся и обратно расхлопнутся
а у него и нет атрибута, я пока вам видео записывал, себе в блокнот добавил, что нужно прописать, чтобы не скакало
ну знач у него стили видимо жестко установлены?
не совсем понял вопрос
в CSS стилях этой картинки задана высота?
задана только ширина через w-24 у родителя, высота определена через .image.is-square {padding-top: 100%;}, а как раз в примере на странице рецептов я правило на фигуру написал неправильно .image-square - которого не существует в tailwind
да вот если паддинг топ удалить из стилей и посмотреть как она будет гидрироваться, то там будет мерцание?
как раз на видео раздел рецептов с правилом неправильным и паддинга нет - ничего не мерцает
Обсуждают сегодня