尚硅谷前端基础 (91)

好，那么关于这个repeat的这个练习呢，我们就给他做完了，不再多说了，呃，要补充一点，就是我们刚才这个切图这块，对吧？所以切图就是我们从我整个一个大的设计图里面，大的图片里边，或者我们大的一个PSD文件里面，我们切出一个小图，一小块，这叫一个切图，那像刚才我们这个就是切图对吧？你要切的话，就是先用矩形框选中，然后点击我们这个图像，它是不是一个裁剪呀，一裁就剩这一块了，但是其实裁完了以后，你也会发现一个问题，我裁完以后其他部分是不是都没了呀？哎，别着急，怎么让他回来呢？在这儿有一个选项叫历史记录，看到了吗？哎，你这一点点，它就切换到了你想要的那个位置，也就是说图片不会没的，你通过历史记录一恢复，它就可以直接恢复到我们这个正常的一个状态了啊，还是自己需要再去熟悉一下啊，熟悉一点好，我们就不说了，然后接下来我们再来说一个练习，说什么练习呢？哎，还是在我这个图片里，我这啊。

有这么三个按钮，诶三个按钮你看啊，这是一个叫做link，诶这个叫做一个ho，这个叫做一个active，很明显这三个按钮啊，长得是诶一个样，但是又不太一样，你看这个就稍微的正常一点，这个好像就有点这个亮光，这个就有点这个凹下去这么一个效果，所以这个三个按钮实际上是一个按钮的不同状态，诶那我们就想呢，诶我能不能做一个超链接。这个超链接显示的状态就是这个按钮，在我没点击这个超链接的时候，它显示的是link，诶，当我鼠标移入到这个超链接的时候，它显示的是ho，当我去按一下超链接的时候，它是一个active，诶我们要做这么一个效果行不行呢？哎，我们来试一下，在这儿我们来新建一个文件，我们来一个零八，我们这个是一个我们的按钮练习，按钮练习呢，我们还是先把我们这个按钮啊给它粘进来，我们的零八这个练习，诶零八放哪了啊，没错，三个按钮，哎，中间那个先不管它，我们先说这三个，三个按钮整完了，然后我们这个页面写一下，那我们直接来一个，那这里边呢，既然是一个超链接，所以在这儿我们先要创建一个超链接，这因为SCIPT冒号一个分号，我不写class啊，因就一。

个，那这个超链接的话，我们说了默认情况下，你的超链接是没有办法去设置宽高的，对吧？所以这里边呢，我们写一个style标签，我们直接给它来一个A，诶A冒号一个这个link啊，A冒号一个link，那这里边注意了，很明显这个超链接我们肯定要去给它设置设置宽高，为什么？因为我们是不是需要把我们的这个按钮去给它设置成我这个超链接的一个背景图片啊，哎，你如果超链接没有宽高的话，这个背景图片可以正常显示吗？诶很明显示不行的，所以这个时候我们应该把超链接的宽高设置成和这个按钮的宽高是一样的，也就是93乘以29个像素，而我们超链接是个行内元素，它是不是不支持，诶不支持，我们就先给他来一个display block转换成矿元素，然后在Y93 hi是一个29，设置好一个93乘以29，那这。

背呀，是不是才有一个大小啊，那这时候你看一下background color background color，我们给它设置一个这个red，这时候是不是一个红色就有了呀？哎，当然你不能设置背景颜色，你应该设置是一个背景图片啊background image，我们直接来个URL，我们这是一个点斜杠下CSS下的一个，这是该零八下的一个，我们叫做一个link，点一个PG，那这样，哎，不是CSS啊，我们应该是点一个img，这样我们是不是就把这个link设置成这个超链接的背景图片了，哎，然后同理下边一样A冒号我们还有什么呀，还有一个叫做hover，鼠标移入，鼠标移入代码是一样的啊，码是一样的，只不过其实你就是把这个背景图片改一个，从link改成ho就行了，对吧，那这个是你再移入。

你看它是不是有一个等于有一个光斑这么一个效果啊，一入进去以后，是不是就亮了一下子，哎，亮了一下子啊，然后再看效果啊，CTRLCCTRLV这里边呢，还有一个我们叫做active，当我点击的时候，点击的时候我们要换成active，点一个PD，然后我们保存看效果这一刷新，然后呢，我这已经。点，诶你看是不是点的时候就有一个摁下去就一个黑色的效果了，哎，这个是我们说的一个三种效果啊，一个是另个现在这种情况，然后移入以后变成后，再点下去以后变成active，那这样我们通过这个背景图片就完成了一个动态的按钮效果，诶其实它是怎么实现这个动态的，其实就是当不同的状态被触发以后，它是不是切换成了不同的背景图片，诶就是切换成了背景图片，那这个候我们就达到这么一个按钮的效果，诶但是这时候我要问你问题了，有没有问题啊，有没有问题啊，哎，注意啊，你要看仔细，我先给你描述一下这个问题，我先给你描述一下问题，你看啊，现在我这儿运行的话是一点问题都没有的，但是如果你是第一次访问这个网页的话，上来显示是没问题的，但是当我一入进去以后，它是不应该显示的是那个。

这个图片啊，哎，那也就是说它是需要从这个link要切换到这个ho，对吧，要从link要切换到这个ho，但是当你是第一次访问的时候，这两个图片之间进行切换的时候，你会发现出现一个白的现象，会闪一下，同理在ho第一次向active切换的时候，也会出现一个白的现象，但是第二次就没有了，只是第一次会有，诶为什么我们先看看这个情况啊，先看情况怎么叫第一次了，我现在刷新一下啊，啊多刷新一下，那现在就变成第一次了啊看着啊，现在我移动。

哎，完蛋了，现在看不出来了，那怎么办呢？诶，那这个时候注意，由于浏览器有缓存，所以有的时候这个情况你不一定能看见，所以我可以干嘛呢？按你的CTRL加F5强制清空缓存去刷新啊，强制清空缓存刷新我们来再看啊再看看着啊现在正常。完蛋了，说了半天说的挺热闹，结果没看出，没看出效果来，那证明我们这个缓存呀，挺严重，我换一个浏览器看，比如说打开一压吧，换一个浏览器，哎，这回再不出来，我就把吃了是吧，把它吃了啊，再看效果啊，现在注意了。

完蛋了，真没出来是吧，那我也不能真吃啊，来，我重新打开一下。我这个再试一下，我再说是吧，诶这个就看见了啊，重新运行一下open啊，注意这个是我重新打开了一个全新网页，也就是说这个按钮我还没有点过呢啊现在看啊，我移动进去。看到了吗？哎，是不是刚才明显有一个白一下啊，诶如果你没看清楚是吧？把视频往回倒倒，再稍微看一下，它会明显有一个白的，包括我第一次去显演示的时候，它也会有这种情况，再看啊，现在我点我点看到了吗？诶是不是也会看到有一个闪的情况出现啊，但是现在就没有了啊，我一进去现在就没有了啊，只是第一次你把浏览器关了，再打开那一次会有剩下的就没有了，甚至我强制清空缓存刷新这时候都没有啊，就是只有第一次的时候会会出现，哎，我们不废话了，你回去你写完了以后啊，你自己试试啊，我直接给你解释一下它产生的一个原因，那注意图片，诶图片这些什么呢？这诶图片属于什么呢？诶，属于我们这个网页中的什么呢？网页中的外部资源啊，属于网页中的外部资源，像图片啊，像外部的CSS。

文件呀，诶像我们引入网页呀，诶像我们用f frame是吧，引入网页这些包括音频，包括视频，这些都属于网页的一个外部资源，那这些外部资源干嘛呢？诶外部资源都需要，诶浏览器单独干嘛呢？单独发送我的这个请求，然诶去什么呢？诶单独发送请求加载，诶也就是说这些外部资源注意了，我们像这里面。

假如说吧，我一个网页里边有一张图片，之前我提过这个问题啊，我的网页里有一张图片，那我浏览器需要发几个请求呢？需要发两个请求，第一个请求加载网页本身，第二个请求去加载这个图片，懂这意思吧，如果你有十个图片，那你就要发11个请求，一个是加载网页，另外十个是分别加载这个十十个图片，也就是说我的这些外部资源。它也是要一个一个的单独去加载的啊，单独加载的而注意了，那我们浏览器，浏览器加载外部资源时啊，外部资源时它是什么呢？诶是按需加载啊按需加载的，诶用则加载，诶不用则什么呢？哎则不加载，为什么这样，因为加载也需要耗费时间，耗费资源，你不用你就去加载它，耽误你事儿，反正你没用你加载它干嘛，对吧，你没用就不需要加载，用的时候才需要加载，所以像我们这三个图片，一个叫link，一个叫ho，一个叫active，那我问你了，我的超链接一上来是处在什么状态，哎，一上来它是处在link的状态，所以这个图片是不是一上来就使用了，所以注意这个图片肯定是一上来就加载，怎么看图片什么时候加载的啊，注意了，你打开你的开发者。

工具12，开发者工具里边有一个network network里边可以监视你发送请求的一个数量，但是现在我这网页已经访问过了，因为有缓存了，懂这意思吧，有缓存了，所以这个时候我重新打开一下，重新打开。然后还是F12打开控制台看这个啊，我重新刷新一下这个缓存是太可恶了，因为我一上来啊，我没有办法去，我看一下可粒一下。

啊，这个。现在的话，因为我这一上来的话，我这个浏览器的清除缓存，现在等于是是是没用，所以现在在我这儿它是它是看不出来这个效果的，我们看一下，点一个O试试，好在这儿能看到看着了啊们这一刷新，我们这一刷新，你看这个是表示我的这个浏览器发送的请求的一个次数，你看它这发了三个请求，这个不用管它，这个是我们的这个这个这个叫什么呀？我们这个浏览器，我们这个编辑器，它不是有一个自动刷新吗？这是那个东西不用管它，跟我们没关系，我们就看上边两个啊，这W34我们不管它，我们看上边两个，上边实际上发送两个请求，第一个请求表示什么呢？表示的是加载我们的网页啊网页，第二个请求表示加载我这个图片，你看现在我加载几个图片，我只加载了link有没有加载，Ho有没加载active没有加载，为什么没有加载？就是因为现在这两个图片是不是还没使用呢？没使用。

哦，就不加载啊，没使用就不加载，你看的时候你注意你把这个点成O，因为它里边会分请求的，对吧，如果你点的CSS就只看CSS别就不看了，所以这个时候我这刚刚现在只加载一个link.PND，那问题来了，什么时候加载ho当后需要使用的时候，什么需要，什么时候需要使用，我鼠标移入是不是就需要使用了，哎看着啊，我先把先清清除一下啊，然后我移入。是不是这个时候howork加载啊，哎，Work加载，那这里面active加没加载，没有加载，Active什么时候加载，用的时候什么时候用，我点它的时候是不是F5才加载的，哎，所以这个时候注意我们的图片是按需加载的啊，是按需加载的，哎，所以呢，用则加载，不用则不加载，那像。

哎，我们什么呢，这关掉啊，因为我们这自动刷新了，诶像我们这个上边的这个练习，诶第一个诶我们说link会什么呢？诶会首先加载，一上来就加载，因为上来就是link嘛，对吧？而什么呢？而我们这个ho和这个active，诶会在什么呢？会在我们这个指定的这个状态触发时才会下载。触发时才会下来，哎，不触发就不加载，也就是说我们后这个图片它是在我们鼠标一入的一瞬间去加载的，那这时候注意加载是不是就需要花费一定的时间呀，诶加载就要花费一定的一个时间，那花费时间，那就会出现一个什么呢？我鼠标一入以后变成后位状态，变成位状态它就要去显示这个背景图片，而这个时候背景图片还没有加载，那在我背景图片加载，还有这个状态切换的一个空隙之间，这个时候它没有这个图片显示，所以就会出现一个闪烁的情况，就会出现一闪，包括我一点一下，你看是不是会闪一下，诶会闪一下，那这种情况只会在第一次出现，你第二次再用就没有了，因为我们的浏览器是不是有有缓存呀，诶有缓存就可以去避免掉这个问题啊，所以只是第一次会出现啊，所以。

这个问题呢，我们说一下这种先说用户体验好不好并不好，它白一下闪一下，诶当然如果你不细心看，可能可能看不到，但是如果用户看到这个体验确实不特别好，所以我们就需要去解决这问题，诶那我们怎么能让用户有一个好的一个用户体验呢？哎，那这里我们先不说，我们先把这问题抛出来，你先理解为什么会闪啊，为什么会闪，然后你把这个练习写写，然后思考一下怎么解决这个问题，提示一下，利用我们的第四张图片去解决啊好，我们还是先停一下，你自己来处理一下。