Как избежать фоновой вспышки при загрузке веб-страницы?

Question

У меня есть сайт (с использованием PHP). Основной фон имеет зеленый цвет, а область содержимого - белый. При переключении на одну страницу на другую (так как на это уходит несколько миллисекунд), фоновый цвет мигает, прежде чем белый захватывает его. Я думаю, это из-за того, как элемент dom рисуется / создается. Я пытался использовать ob_start(); и ob_flush();, но не сильно помог.

Есть ли способ избежать этого?

Спасибо JJ

Answer 1

Вы можете попробовать явно установить размер (высоту и ширину) или минимальную высоту для области содержимого. Вы также можете использовать фоновое изображение с белой областью. Если фон имеет сплошной цвет (или горизонтальный градиент), вы можете использовать GIF размером 1 пиксель, который будет иметь очень маленький размер файла. Но вы все еще можете моргнуть, прежде чем фон загрузится в первый раз.

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

Answer 2

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

Старый коллега познакомил меня с малоизвестным тегом Internet Explorer <meta> ... который позволяет вам, среди прочего, переход с плавным переходом между страницами, например

<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">

Это только для IE.

Answer 3

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

<script type="text/javascript">//This is necessary to avoid flickering of not stylized items in IE</script>

Answer 4

Просто предположение, но в вашем CSS поместите два правила в один файл CSS, затем сначала объявление стиля области содержимого и убедитесь, что этот файл CSS загружается раньше других.