浏览器默认是否延迟加载悬停图像

Question

似乎Chrome惰性仅在需要时才加载悬停图像。 例如，仅当将鼠标悬停在元素上时，才会加载:hover的图像。 这是预期的行为吗？ 它包含所有图像还是仅包含为伪类定义的图像？ 页面加载后，如何强制它加载所有图像？

Answer 1

Chrome浏览器不会“预加载”未实际显示的图像，这是一个令人希望的效果，所有现代浏览器都不应这样做。

要在需要时“强制”浏览器在缓存中准备好所有图像，可以采用不同的方法：

1）使用Javascript预加载所需的图片，您可以使用以下代码：

var prld = ["one.gif", "two.gif", "three.jpg", "..."];
var img = [];
for (i = 0; i < prld.length; i++) {
    img[i] = new Image();
    img[i].src = prld[i];
}

但是您可能会用不同的方式写，但这只是一个建议。

2）第二种方法有不同的方法，它基于这样的想法：使用经典的Javascript预加载，您无论如何都要发出与图像实际数量一样多的“调用”。 因此，具有预加载功能的10张图片会对服务器产生20次调用...这并不是一件很令人讨厌的事情，因为调用的“延迟”会减慢所有页面的加载...因此我们将多个图片放到一个文件中（例如“拼图”），而不是将图片作为背景（例如，空DIV的图片）通过背景CSS的不同位置进行放置。 无需为所有图像构建唯一的文件，例如，您将决定仅出于预加载目的而构建两个图像的多个镶嵌图； 因此：hover会“替换”背景，而不是进行替换。 此处介绍了该技术： http ： //www.w3schools.com/css/css_image_sprites.asp

这些方法都有其缺点，取决于情况。

总而言之，作为一般考虑，考虑到在移动体验上，基本上没有任何意义，我会避免“悬停”，这将导致避免移动“超载”的更多工作无用的内容

Answer 2

使用此选项为所有img 强制预加载

var prld = document.querySelectorAll('img');
var img = [];
for (i = 0; i < prld.length; i++) {
    img[i] = new Image();
    img[i].src = prld[i].src;
}

这不包括在一组图像div为背景的例子。