Как предотвратить задержку «Flash» на странице, созданную фоновым изображением задержки загрузки?
Проблема в том, что на большинстве сайтов в Интернете есть фоновые изображения. Они требуют времени для загрузки. Обычно это не было бы проблемой, если изображения были оптимизированы, и достаточно маленькие. Однако на некоторых моих сайтах файлы JavaScript находят свой путь для загрузки перед чем-либо еще на странице, , хотя они в нижнем колонтитуле ! Это создает белую «вспышку» перед фоновым изображением нагрузок. Почему мой JavaScript загрузка сначала перед чем-либо еще? У меня эта проблема на многих сайтах, и я вижу это везде. Вот сайт, на котором я сейчас работаю:
http://www.bridgecitymedical.com/wordpress/
Спасибо!
TL; DR Как я могу отложить загрузку JavaScript на моих веб-сайтах, чтобы фоновое изображение загружалось перед чем-либо еще, тем самым предотвращая эту белую «вспышку» перед заканчивая загрузкой браузера.
1 ответ
Я имел ту же проблему и нашел это довольно странным, что об этом не говорят больше. Я все еще не нашел документации относительно этого, но прокомментируйте, находите ли Вы что-нибудь относительно RFC для css приоритетов загрузки фонового изображения, и т.д.
Так или иначе, единственная вещь, которую я нашел, состоит в том, что <img> загрузка сразу, в то время как фоновое изображение (), кажется, загружается на готовом dom.
, Таким образом, мое решение состояло в том, чтобы поместить <img> с display:none незадолго до <div> с фоновым изображением. Это загрузит изображение сразу, и затем оно сразу привыкает для фонового изображения.
<img src="my-image.jpg" style="display: none;" />
<div style="background-image: url('my-image.jpg');"></div>
- Одна вещь отметить состоит в том, что Вы могли все еще получить мерцание на изображениях, которые не оптимизированы. Таким образом для jpg's удостоверяются, что сжали их и установили "прогрессивный" атрибут при создании их.