Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 23.03.2023, 01:45   #1
aleksejs
Пользователь
 
Регистрация: 23.03.2023
Сообщений: 13
По умолчанию Рендеринг изображения на реакте: скачет картинка

Доброго дня, прошу совета по CSS. Который для меня, в общем, темный лес: обычно пишу логику, фронтенд - не моя стихия. Итак, по приложению (это пет-проект, просто чтоб руку набить на реакте).

Все вроде неплохо, кроме частного случая. Проблема дает о себе знать, только если соблюдены оба условия:

1) Просмотр веб-странички на мобильном устройстве.
2) В браузере мобильного устройства включен режим "Версия для ПК".

Суть траблы: при нажатии кнопки "Get Random Cat" (либо при первичной загрузке страницы) - html секунду/две скачет по ширине, пока рендерится картинка и браузер отрисовывает страничку. Не могу указать размеры картинки, которые каждый раз абсолютно произвольны. Добился того, что на ПК этой проблемы нет, нет и на смартфонах, если включен соответствующий режим просмотра. Но хотелось бы полностью устранить проблему, хотя бы в целях любопытства.

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

Последний раз редактировалось aleksejs; 23.03.2023 в 01:48.
aleksejs вне форума Ответить с цитированием
Старый 23.03.2023, 19:44   #2
Вадим Фролов
Пользователь
 
Аватар для Вадим Фролов
 
Регистрация: 02.05.2022
Сообщений: 81
По умолчанию

Цитата:
Сообщение от aleksejs Посмотреть сообщение
Доброго дня, прошу совета по CSS. Который для меня, в общем, темный лес: обычно пишу логику, фронтенд - не моя стихия. Итак, по приложению (это пет-проект, просто чтоб руку набить на реакте).

Все вроде неплохо, кроме частного случая. Проблема дает о себе знать, только если соблюдены оба условия:

1) Просмотр веб-странички на мобильном устройстве.
2) В браузере мобильного устройства включен режим "Версия для ПК".

Суть траблы: при нажатии кнопки "Get Random Cat" (либо при первичной загрузке страницы) - html секунду/две скачет по ширине, пока рендерится картинка и браузер отрисовывает страничку. Не могу указать размеры картинки, которые каждый раз абсолютно произвольны. Добился того, что на ПК этой проблемы нет, нет и на смартфонах, если включен соответствующий режим просмотра. Но хотелось бы полностью устранить проблему, хотя бы в целях любопытства.

У кого будет время и желание глянуть, заранее спасибо. Демка здесь.
Скрол появляется горизонтальный снизу на секунду где то при загрузке картинок, а так все нормально. Его можно отменить стилями думаю, для скрола оси X нужно скрыть его. Почему появляется не знаю)
Вадим Фролов вне форума Ответить с цитированием
Старый 25.03.2023, 20:15   #3
aleksejs
Пользователь
 
Регистрация: 23.03.2023
Сообщений: 13
По умолчанию

Цитата:
Сообщение от Вадим Фролов Посмотреть сообщение
...а так все нормально.
Не согласен. Насчет скролла знаю, но это фигня, сделаю, как руки дойдут. А описанную выше проблему - она есть, была то есть - удалось исправить. Попросту заменил лоадер (spinner) на родной из бутстрапа 5, и весь html перестал прыгать при загрузке картинки и показе спиннера. Хотите верьте, хотите нет, я сам не понимаю. Чертовщина....

Вот этот коммит.
aleksejs вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сохранения нарисованного изображения как картинка yukdima Общие вопросы C/C++ 2 29.05.2015 21:54
скачет скорость интеренета nikox12 Компьютерное железо 9 13.03.2014 10:30
[18+] Разная картинка предпросмотра и изображения TheyKilledKenny Свободное общение 11 03.02.2011 14:25
при наводке мышью на изображения поменялась картинка которая находиться в ImageList designer999 Мультимедиа в Delphi 1 17.02.2010 15:00
Рендеринг изображения - создание отражения BOBAH13 Gamedev - cоздание игр: Unity, OpenGL, DirectX 4 18.01.2009 16:27