前端学习笔记68-背景练习

前端学习笔记68-背景练习


这个背景练习时两个,背景本身不难,我就不多说了,里面提到了一个图片加载的问题。
看下面代码


<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>

这个代码的作用是当我鼠标移入时换一张图片,当我鼠标点击时再换一张图片。
在这里插入图片描述
前端学习笔记68-背景练习_第1张图片
视频提到的一个问题是,浏览器第一次进入页面时,只加载网页和link图片,另外两张图片还没有加载,导致我鼠标第一次移入时,需要加载那张移入的图片,加载是要时间的,所以如果加载很慢,会看到显示区域会出现短暂的空白。

出现这个问题是因为图片是外部资源,外部资源需要浏览器单独发送请求加载,且是按需加载的,所以鼠标未移入时,没有加载对应的图片,只有第一次移入时,才加载。

你可能感兴趣的:(小白前端学习,html,css)