Как предотвратить изменение размера изображения в реальном времени (при загрузке страницы) - PullRequest
0 голосов
/ 22 апреля 2019

Когда я захожу на домашнюю страницу своего сайта, изображение заголовка вверху страницы загружается на 90% ширины, а затем увеличивается до 100% ширины, так как страница продолжает загружаться. Если вы прокрутите вниз, это будет выглядеть как все элементы, которые предназначены для полной ширины, первоначально загружаются примерно на 90% от их полной ширины, а затем продолжают расширяться.

Я пытаюсь определить, где в коде это происходит. Я думал, что это может быть в таблице стилей CSS, но мне не повезло найти его. Мое лучшее предположение - какая-то загрузка оболочки перед расширением изображения?

Для получения дополнительной информации изображение извлекается с помощью плагина WPBakery Visual Composer. Я попытался отключить параллакс изображения, который полностью удалил изображение.

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

Я не уверен, что является причиной проблемы, но исходный код можно посмотреть здесь: https://dev -nurseregistry.pantheonsite.io /

1 Ответ

0 голосов
/ 22 апреля 2019

Кажется, что-то из Javascript загружается после начальной загрузки страницы. Если вы перейдете на Инструменты разработчика Google Chrome -> Источники -> Затем (с правой стороны) выберите Точки останова прослушивателя событий и в Мутация DOM проверка DOMContentLoaded и перезагрузите страницу, она будет загружать DOM шаг за шагом. На начальной загрузке элементы имеют немного другой стиль - ваш div.site-inner не на всю ширину.
Когда вы нажимаете эту маленькую синюю кнопку воспроизведения на экране, она переходит к другому шагу. После 4 или 5 шагов содержимое становится полным. Если вы посмотрите на вкладку сети (также в инструментах разработчика), вы увидите, что widgets.js и platform.js были загружены, а после них также некоторые изображения. Я бы сказал, что вы должны искать в своих файлах js что-то, что вы загружаете после начальной загрузки страницы.
При сравнении загруженной страницы и частично загруженной из стороны в сторону она показывает vc_section hide-mobile как display: block и vc_section hide-desktop как display: none.

Редактировать
Просто прочитайте комментарий Hungerstar - он показывает немного больше причины. Я только что нашел результат этой причины. Надеюсь, это поможет.

...