设置了背景图，但是第一次hover会闪烁，该如何解决？？？？？

铁打的营盘流水的兵

当下有这么一个需求，鼠标经过图片的时候，切换显示的图片

思索许久，倒也有了那么两三个解决方案

• 方案一、动态切换显示的组件
• 方案二、动态切换背景图的路径

基于以上的两种方案，分别给个简单的🌰：
方案一：
html:

<div>鼠标经过，切换背景图</div>
<comp1 v-if="isHover" :imgSrc="isHover? imgSrc1 :imgSrc2" />
<comp1 v-else :imgSrc="isHover? imgSrc1 :imgSrc2" />

js:

data(){
	return {
		  isHover: false,
	      imgSrc1:
	        "http://touxiangkong.com/uploads/allimg/20203301301/2020/3/MzUfQ3.jpg",
	      imgSrc2:
	        "http://touxiangkong.com/uploads/allimg/20203301301/2020/3/YNVjqi.jpg"
	    };
	}
}

如此就可以进行组件的切换，展示不同的图片
比较简陋，也比较low

方案二：
html:

<div class="p10">鼠标经过，切换背景图</div>
<p />  <!-- 这里就是显示图片的容器 --> 

css:

p {
  width: 300px;
  height: 300px;
  background-image: url("http://touxiangkong.com/uploads/allimg/20203301301/2020/3/MzUfQ3.jpg");
  background-size: 100%;
  &:hover {
      background-image: url("http://touxiangkong.com/uploads/allimg/20203301301/2020/3/YNVjqi.jpg");
    }
}

但是发现一个问题，每当首次hover的时候，总会莫名的闪烁，给人的体验感并不是特别好。那么，该如何悄悄地搞掉这个闪烁的过程呢？

可以发现，该案例中使用的img路径是网络图片，用来表示用CDN进行托管的图片

经过资料的查阅已经实践，发生闪烁这是页面加载数据的问题. 页面加载完成之后，这张背景图所以并没有被加载出来，因为这是在css中写的样式，而当你hover的时候这张图片才开始加载资源，所以首次会进行闪烁

如图所示：

找到了原因，那么就可以找到对应的解决办法。
能不能不要在切换的时候进行请求，而是在hover之前进行这一操作呢？

Of course I can !!!

修改css，如下：
css:

p {
  width: 300px;
  height: 300px;
  background-image: url("http://touxiangkong.com/uploads/allimg/20203301301/2020/3/MzUfQ3.jpg");
  background-size: 100%;
  
  &::after {
    display: none;
    content: "";
    width: 300px;
    height: 300px;
    background-image: url("http://touxiangkong.com/uploads/allimg/20203301301/2020/3/YNVjqi.jpg");
    background-size: 100%;
  }
  &:hover::after {
    display: block;
  }
}

可以看到，是利用了伪元素after进行加载并隐藏显示。

在该模块加载的时候，进行图片信息网络资源的请求，只需要在hover的时候改变after的显示状态即可。

如此，即可完美的解决首次hover会产生闪烁的问题！

重点推荐第二种~
毕竟第一种不仅low，而且代码量复杂。能用css解决的时候，为什么要用js+css进行解决呢？

记得 点赞 + 收藏 + 关注三连哦～