JavaScript 图像预加载

Question

我正在查看网站 DoNothingFor2Minutes使用 JavaScript 预加载图像，这引起了一些问题。我注意到该网站没有预加载所有图像。事实上，您可能在网站上看到的一些第一张图像并未预加载，包括背景图像(大海和阳光)和标题图像(上面写着“2 分钟内什么都不做”)

1) 您是否有理由不预加载页面上立即使用的图像？

2)这有意义吗？甚至可以预加载背景图像吗？

3) 当我查看页面源代码时，我看到许多未预加载的图像，但没有看到预加载的图像(spread-the-calm.png 除外)。是否有某种原因导致页面源中没有预加载的图像？

感谢您的帮助。我是个新手

var preload = function(sources) {
          var images = [];
          var length = sources.length;
          for(var i = 0;  i < length; i++) {
            images[i] = new Image();
            images[i].src = sources[i];
          }
        }

        preload(['facebook.png', 'facebook-hover.png', 'twitter.png', 'twitter-hover.png', 'like-background.png', 'spread-the-calm.png', 'tewy.png', 'tewy-hover.png', 'coderholic.png', 'coderholic-hover.png', 'box.png', 'box-hover.png', 'email-capture.png']);

Answer 1

我猜测该网站只是预加载将用于 CSS 悬停的图像 - 这样用户在悬停时不会看到任何闪烁/加载发生，并且悬停图像不可用且必须加载。

网站所有者认为，对于所有其他图像，可以将它们作为正常周期的一部分加载。

但是，是的 - 用户特别注意到悬停过渡不平滑，因此正在对其进行优化。