我的网页在应用 CSS 样式之前呈现原始 html - 这真的很难看
GitHub 链接在这里:https://fishbite.github.io/draw/index.html
存储库链接在这里:fishbite.github.io/draw repository
样式表加载到页面的头部部分,JavaScript 加载在结束 body 标记之前。
当通过带有 Live Server 扩展和 Firefox 的 Visual Studio Code 在本地运行时以及在 GitHub 上托管时会出现此问题。
我已经查找了这个问题的类似(如果不是完全相同的话)复制品(FOUC(无样式内容的闪光))并且提供的解决方案似乎是我已经在做的:在关闭主体之前加载头部和 JS 中的样式表标签。
我最初有一个
onload="func()"
调用函数的起始正文标记中的参数。但是,删除它并没有帮助或解决问题。
这是我第一次认真尝试将完整的站点上传到 GitHub,我最初认为问题是由于上述开发环境导致的本地问题,所以我很失望地发现事实并非如此。
/*
****** main JavaScript for first menu button ******
****** code for the other buttons is not important ******
*/
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
/* Function to draw a square inside
a canvas with border around the square
*/
function square(a) {
// Set canvas size + a border width!
ctx.canvas.width = a * 1.1;
ctx.canvas.height = a * 1.1;
// Set line start point
let x = (ctx.canvas.width / 2) - (a / 2);
let y = (ctx.canvas.height / 2) - (a / 2);
// Draw first line of square setting line colour
ctx.beginPath();
ctx.strokeStyle = 'lightgrey';
ctx.moveTo(x + 0, y + 0);
ctx.lineTo(x + 0, y + a);
// Draw second, third & fourth line of square
ctx.lineTo(x + a, y + a);
ctx.lineTo(x + a, y + 0);
ctx.lineTo(x + 0, y + 0);
// Draw an outline around the shape
ctx.stroke();
}
let a = "";
let b = "";
// callSquare() passes the value of the input box to square()
function callSquare() {
let b = document.getElementById("inputBox").value;
// parseFloat converts the input string to a float
a = parseFloat(b);
document.getElementById('outputOne').innerHTML = "You typed: " + a;
if (a === 1) {
document.getElementById('outputTwo').innerHTML = "This is a square of " + a + " unit. Look closely! O.^.O";
square(a);
}
else if (a === 0) { document.getElementById('outputTwo').innerHTML = "A square of " + a + " units is technically not a square!";
square(a);
}
else if (a < 0) { document.getElementById('outputTwo').innerHTML = "Doh! That's a negative number. Not allowed!";
}
else if (a > 225) { document.getElementById('outputTwo').innerHTML = "Boom Shackalack! Number too high! 225 is the limit";
}
else if (a !== 1) {
document.getElementById('outputTwo').innerHTML = "This is a square of " + a + " units";
square(a);
}
}
/*
****** styles.css ******
*/
@import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono&display=swap');
body {
margin: 0;
background-color: rgb(34, 33, 32);
background-image: url("https://fishbite.github.io/draw/images/darknoise.png");
background-size: 25px;
background-attachment: fixed; /* fixes the background in place */
font-family: 'Share Tech Mono', monospace;
font-size: 14px;
}
h1 {
text-align: center;
color: #fc6500;
}
#canvas {
background: darkgreen;
}
#intro {
margin: 0px auto 30px auto;
padding: 5px 25px;
background: rgba(255, 255, 255, 0.85);
max-width: 550px;
border-radius: 2px;
}
#container {
margin: auto;
max-width: 250px;
background: rgba(255, 255, 255, 0.85);
padding: 5px;
border: solid black 2px;
border-radius: 6px;
}
#cell-1 {
text-align: justify;
}
#input-div {
text-align: center;
}
#inputBox {
width: 50px;
text-align: center;
}
#cell-2 {
text-align: center;
min-height: 150px;
}
/*
****** menu.css *******
*/
body {
height: 100%;
margin: 0;
}
#menu {
position: fixed;
left: -10em;
top: 25%;
width: 8em;
background: rgba(49, 49, 49, 1);
margin: -3em 0 0 0;
padding: 0.5em 1.0em 0.5em 2.5em;
border-radius: .0 0.5em 0.5em 0;
text-align: center;
border: 2px outset rgb(27, 27, 27);
border-left: 0;
}
#menu li{
list-style: none;
}
#menu-container {
display: flex; /* establish flex container*/
flex-direction: column; /* make main axis vertical*/
justify-content: center; /* center items vertically - in flex-column*/
align-items: center; /* center items horizontally - in flex column*/
}
#menu li a {
display: flex;
flex-direction: row; /* make main axis horizontal*/
height: 50px;
text-decoration: none;
align-items: center; /* center items vertically - in flex row*/
justify-content: center; /* center items horizontally - in flex row*/
text-align: center; /* center anything misbehaving - top & bot row of list*/
color: white;
background: linear-gradient(0deg,
rgb(27, 27, 27) 2px,
rgba(49, 49, 49, 1) 2px,
rgba(49, 49, 49, 1) 94%,
rgb(184, 238, 248));
padding: 5px 5px 5px 5px;
border-bottom: 2px solid rgb(46, 46, 46);
border-right: 1px solid rgb(77, 77, 77);
border-left: 1px solid rgb(30, 30, 30);
border-radius: 5px;
}
/* for accessibility with no mouse or touch screen*/
#menu a {
position: relative;
right: 0;
}
#menu a:focus {
/* move the <a> element out to the right*/
right: -8em;
background: rgb(30, 34, 43);
}
#menu a { transition: 0.2s }
#menu:hover a:focus {
/*ensures <a> element stays put when menu has focus with mouse*/
left: 0;
background: none;
}
/* back to using a mouse or touch screen!*/
#menu li a:hover {
text-decoration: none;
color: rgb(255, 241, 46);
border-bottom: inset 2px solid rgb(2, 3, 3);
border-right: 1px solid rgb(32, 32, 32);
box-shadow: inset 2px 2px 2px rgb(27, 27, 27);
}
#menu:hover {
left: 0;
}
#menu {transition: 0.2s;
}
<DOCTYPE! html>
<head>
<meta charset="utf-8">
<meta name="viewport", content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="styles/styles.css" rel="stylesheet">
<link href="styles/menu.css" rel="stylesheet">
</head>
<body>
<div id="menu-container">
<ul id=menu>
<h2>menu</h2>
<li><a href="index.html">Interactive Square</a>
<li><a href="fill-rect.html">Fill Rect</a>
<li><a href="fill-clear-stroke.html">Fill/Clear/Stroke Rect</a>
<li><a href="stroke-triangle.html">Stroke Triangle</a>
<li><a href="stroke-circle-triangle.html">Stroke Circle Triangle</a>
</ul>
</div>
<h1>JS App to Draw a Square</h1>
<div id="intro">
<p>Use of a canvas and JavaScript drawing elements:</p>
<ul>
<li>Take a user input value from an input element type of 'number'</li>
<li>Set the canvas size to the input value + 10%</li>
<li>Draw a square equal in dimension to the input value</li>
<li>Inject text into html <p> elements based on user input value</li>
</ul></div>
<div id="container">
<div id="cell-1">
<p>Type a <b>non-negative</b> number in the box to draw a square, or alternatively use the scrolly arrows.</p>
<div id="input-div">
<input type="number" id="inputBox" oninput="callSquare()">
<p id="outputOne">You haven't entered a number.</p>
</div>
</div>
<div id="cell-2">
<p id="outputTwo">Your square will be below.</p>
<div id="canvas-div">
<canvas width="0" height="0" id='canvas'></canvas>
</div>
</div>
</div>
<script src="scripts/main.js"></script>
</body>
我希望上面的 html 在呈现页面之前加载样式表并应用样式。
相反,它呈现原始 html,然后以视觉上不稳定的方式应用样式
最佳答案
代码可能无法在给定路径中找到样式表,或者这些文件中存在错误。
关于javascript - 为什么我的网页在应用 CSS 样式之前呈现原始 html - 既通过 Visual Studio Code 和 Firefox 在本地也托管在 github 上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57136406/