loading – 百吉のOnlyFuns

印象中看過「css的link標籤不論放在哪（head or body）都會先載入」的這個說法，不過今天卻發現當Chrome在某些情況時，結果似乎會有點非預期。

首先我在head與body最後都各放一個link標籤，並且在onload時跳出alert

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<script>
	function cssLoaded () {
	alert('css loaded!')
	}
	</script>
	<link rel="stylesheet" href="style.css" onload="cssLoaded()">
	</head>

	<body>
	<div class="row">
	<div class="col">1</div>
	<div class="col">2</div>
	</div>
	<link href="bootstrap.min.css" rel="stylesheet" onload="cssLoaded()">
	</body>
	</html>

view raw css_loading.html hosted with ❤ by GitHub

在這個case，第一次alert時瀏覽器還是空白畫面，而第二次alert時，畫面上的row, col已被正確render了。看起來link不論放在哪都會先載的這個說法是成立的。

但奇怪的事情來了。當我把head裡的link拿掉時，chrome會呈現一個不穩定的結果。

標籤: loading