169 похожих чатов

Возмем картинку, она загружает свой src когда? - только когда

ты ее прицепил к документу. Как только ты ее отцепишь браузер сразу выкинет "внутренности" картинки.

На SSR браузер получает готовый html видит там картинки, видосики и айфреймы загружает их как будто это обычный хтмл. Затем загружается JS файл с твоим бандлом и вызывается гидрация, пусть это будет вторая секунда когда юзер уже смотрит на готовую страницу. Гидрация берет отцепляет все ноды от дома - картинки пропадают, состояние видоса пропадает, айфреймы свой браузерный стейт тоже теряют. А затем гидрация сразу же прицепляет это все обратно. В итоге все что браузер уже сделал, он начинает делать заново. Грузит src видосов, картинок и айфреймов.

Вопрос зачем гидрация отцепляла ноды от дерева?

13 ответов

5 просмотров

https://drive.google.com/file/d/1GeDHFSAyolu27uyg7k0DzO6ZF-HcuFNq/view?usp=sharing пример записал такого поведения, но только с айфреймом ютуб. svelte/sapper. До этого был лейзиоад на айфрейм, но реклама не показывается при таком подходе в айфрейме - у них google полиси по поводу рекламы в автоплей режиме (лейзи был реализован через thumb на котором по клику грузился iframe)

Alexander-Ponomarev Автор вопроса
Дмитрий Тараканов
https://drive.google.com/file/d/1GeDHFSAyolu27uyg7...

спасибо =) вот и тот несуществующий узкий кейс с видосом ютюба как основным контентом страницы

Alexander-Ponomarev Автор вопроса
Дмитрий Тараканов
https://drive.google.com/file/d/1GeDHFSAyolu27uyg7...

а картинки у вас справа они тоже под свелтом или нет? Что будет если снять с них height?

Alexander Ponomarev
а картинки у вас справа они тоже под свелтом или н...

если речь о 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, а если убрать ширину тоже, то загрузится с полной шириной картинки

Alexander-Ponomarev Автор вопроса
Дмитрий Тараканов
если речь о src https://static.zentrum-der-gesund...

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

Alexander Ponomarev
это классно, но я хотел посмотреть как браузер пов...

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

Alexander-Ponomarev Автор вопроса
Дмитрий Тараканов
а у него и нет атрибута, я пока вам видео записыва...

ну знач у него стили видимо жестко установлены?

Alexander-Ponomarev Автор вопроса
Дмитрий Тараканов
не совсем понял вопрос

в CSS стилях этой картинки задана высота?

Alexander Ponomarev
в CSS стилях этой картинки задана высота?

задана только ширина через w-24 у родителя, высота определена через .image.is-square {padding-top: 100%;}, а как раз в примере на странице рецептов я правило на фигуру написал неправильно .image-square - которого не существует в tailwind

Alexander-Ponomarev Автор вопроса
Дмитрий Тараканов
задана только ширина через w-24 у родителя, высота...

да вот если паддинг топ удалить из стилей и посмотреть как она будет гидрироваться, то там будет мерцание?

Alexander Ponomarev
да вот если паддинг топ удалить из стилей и посмот...

как раз на видео раздел рецептов с правилом неправильным и паддинга нет - ничего не мерцает

Похожие вопросы

Обсуждают сегодня

Если у меня есть такой класс: Object = {} function Object:new(a_name, a_transform, a_color, a_mesh, a_material, a_shader, a_textures) local private = {} private.n...
Cuarno Vile
4
я не магистр хаскеля, но разве не может лейзи тип конвертнуться в не-лейзи запросив вычисление содержимого прям при инициализации?
deadgnom32 λ madao
100
зачем же переименовывать ? чтобы кол-во участников возросло или вдруг IBM от этого снова на свифте начнет кодить ? Я не понимаю что страшного в том что свифт гавно, если это т...
Oleh Nerzh
10
здравствуйте. совершаю вот такую вещь: strcpy(line, (char)current_number); где current number — неподписанный шорт, line — массив чаров. ругань следующая: main.c:29:30: error...
Roberto's Ширгозиев
13
@MrMiscipitlick А можешь макрос написать, который будет вычислять смещение относительно переданных меток? Просто .label1-.label2, и вернуть значение.
КТ315
35
А еще в перле можно уже @arr1 + @arr2?
Sergei Zhmylove
53
Добрый день! Подскажите, пожалуйста: какими компетенциями нужно обладать, чтобы претендовать на работу эрланг (отдельная благодарность, если про элексир тоже подскажете) разр...
via ☸️ led
20
Всем привет. Ребят подскажите пожалуйста. Вопрос по дизасемблировани. Начну с начала. У меня есть скомпилированная программа на ГО (я разработчик) - в ней есть защита лицензии...
Zloy
11
Можно попросить небольшое ревью кода? Тут немнога, я ничего интереснее не придумал, чем написать аналог tree в качестве практики с cmake. https://github.com/hrimov/tree-unix/...
Andrew Hrimov
11
Привет всем. появился вопрос. Разрабатываю сайт, в данный момент он запущен. Хостинг beget. Добавляю на сайт яндекс метрику с помощью полей client-settings (взято отсюда http...
Andrew
2
Карта сайта