require图片和background加载图片区别

鼠标滑过更换hover图：
1，用div+css的background方式更换，会在首次hover的时候明显闪动（过程是：初始状态图片消失，变成hover状态图）；
2，用img的src引入的方式，根据hover状态require图片，过度丝滑，不会有闪动现象；
请问这是为什么

第一种方式只有样式生效时才会发起图片请求，这段请求时间内会有空窗期，出现题中的闪烁。
第二种方式一开始就require所有图片，所以图片已经被下载下来保存在运行内存中，所以使用的时候不需要请求，替换速度很快。
补充一点，第一种方式可用雪碧图解决闪烁问题

“Devil组”引证GPT后的撰写：

• 这种情况可能是由于使用div+css方式更换hover图时，浏览器需要首先下载并渲染hover状态的图片，才能在hover事件触发时立即显示。这可能会导致闪烁的效果，因为在切换图片之前，原始图片已经被隐藏了，但是新的图片尚未完全准备好。

• 相比之下，使用img的src引入的方式，浏览器在加载初始页面时就会下载所有的图片资源，包括hover状态的图片。因此，在触发hover事件时，浏览器只需要在缓存中获取并显示hover状态的图片，不需要再次下载或处理图片资源，从而可以实现更流畅的过渡效果，避免闪烁的现象。

• 总之，对于需要切换图片的hover效果，可以考虑使用img的src引入的方式，以获得更好的用户体验。如果必须使用div+css方式，可以尝试使用CSS预加载技术或其他优化方法，以提高图片加载速度和响应时间，减少闪烁的现象。

感谢您的解答！还有两个疑惑点。1，如图，初始状态页面只使用的数组polygonList每项的img值，只有在hover状态才会使用activedImg值，即使这样也会在页面初始化时下载activedImg的图片吗

2，如图，这是我测试hover时的chrome截图，size选项并没有提示from memory cache等从缓存加载，这是为什么