前端学习笔记68-背景练习
这个背景练习时两个,背景本身不难,我就不多说了,里面提到了一个图片加载的问题。
看下面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按钮</title>
<style>
a:link{
display: block;
width: 93px;
height: 29px;
background-image: url(../exercise/img/08/link.png);
}
a:hover{
background-image: url(../exercise/img/08/hover.png);
}
a:active{
background-image: url(../exercise/img/08/active.png);
}
</style>
</head>
<body>
<a href="js"></a>
</div>
</body>
</html>
这个代码的作用是当我鼠标移入时换一张图片,当我鼠标点击时再换一张图片。
视频提到的一个问题是,浏览器第一次进入页面时,只加载网页和link图片,另外两张图片还没有加载,导致我鼠标第一次移入时,需要加载那张移入的图片,加载是要时间的,所以如果加载很慢,会看到显示区域会出现短暂的空白。
出现这个问题是因为图片是外部资源,外部资源需要浏览器单独发送请求加载,且是按需加载的,所以鼠标未移入时,没有加载对应的图片,只有第一次移入时,才加载。