Не могу избавиться от FOUC на моем сайте

Я борюсь со вспышкой нестандартного контента на моем сайте. При первом посещении вы видите неустановленный контент до его фактической загрузки на экран:

Вы можете убедиться сами здесь: http://galaxynode.com/

Я не владею HTML, поэтому мне нужна подробная помощь:

Вот мой код:

<html lang="en">
<head>
    <title> Galaxy Node Server Hosting | Premium Minecraft Hosting For $2.99! </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css;">
    <meta name="Author" content="Steve">
    <meta name="Keywords" content="minecraft server hosting, dedicated server     hosting, cheap minecraft server hosting, best minecraft server hosts, minecraft dedicated server hosting, online server hosting, free minecraft server hosting, minecraft server hosts, best minecraft server hosting, dedicated servers hosting, galaxy node">
    <meta name="Description" content="Galaxy Node Server Hosting aims to provide the highest quality Minecraft servers at an extremely low price.
    We have the best customer service of all Minecraft server hosting providers! You will not be disappointed!">
    <body background="http://galaxynode.com/images/background.jpg">
    <link rel="stylesheet" href="galaxynodewebsite_g.css" type="text/css" media="screen,projection,print">  <!--// Document Style //-->
    <link rel="stylesheet" href="index_p.css" type="text/css" media="screen,projection,print">  <!--// Page Style //-->
</head>

<body>
// body content
</body>
</html>

Может ли кто-нибудь сказать мне точно, что я могу вставить сюда, чтобы не показывать вещи до полной загрузки? Любое исправление было бы замечательно! Я не знаю html, поэтому, пожалуйста, скажите мне, что именно я могу добавить сюда, или что-то, что я могу понять, не зная много о html или javascript.

1 ответ

Удалить <body background="http://galaxynode.com/images/background.jpg"> Вы создали другой <body> тег.

вы по сути загружаете свои таблицы стилей при загрузке тела. Вы видите вспышку, потому что свойства CSS не были применены. Когда дополнительный <body> тег удален, таблицы стилей будут частью <head> и загрузит первым.

если вы хотите сохранить этот фон, добавьте свойство в вашем CSS для тела. например

body
{
   background-image: url('http://galaxynode.com/images/background.jpg');
}
Другие вопросы по тегам