Question

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

Answer 1

Chrome不会预先加载＆＃34;没有实际显示的图像，这是一个令人沮丧的效果，所有现代浏览器都不应该。

To＆＃34; force＆＃34;浏览器在需要时在缓存中准备好所有图像，您可以遵循不同的approuches：

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预加载，您无论如何都可以进行多次＆＃34;调用＆＃34;因为图像实际上是。所以10个带预载的图像会产生20个调用服务器......实际上并不是一个令人沮丧的东西导致了＃34;延迟＆＃34;调用将减慢所有页面加载... 因此，我们将多个图像放入单个文件（比如＆＃34;拼图＆＃34;），而不是将图像作为背景（例如，空DIV）通过CSS背景的不同定位。不需要为所有图像构建唯一的文件，例如，您将决定为预加载目的构建两个图像的几个马赛克;所以：悬停将＆＃34;替换＆＃34;背景而不是替代。此处描述了该技术：http://www.w3schools.com/css/css_image_sprites.asp

每个方法都有其缺点，这取决于具体情况。

总而言之，作为一般考虑，我避免＆＃34;徘徊＆＃34;总而言之，考虑到在移动体验方面，基本上没有任何意义......这将导致额外的努力，以避免移动＆＃34; extraload＆＃34;没用的比赛...

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设置为背景的图像。

浏览器懒惰是否默认加载悬停图像

2 个答案: