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悬停图片 - 当用户悬停并且悬停图像不可用并且必须加载时，用户看不到任何闪烁/加载发生。

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

但是是 - 用户特别注意不光滑的悬停转换，所以这些都在进行优化。

Answer 2

为什么你需要预加载直接由页面引用图像？他们将被请求作为页面的源被解析遇到他们的引用。

预加载可能会用于显示的图像，例如，鼠标悬停在其他元素上。预加载意味着图像已经被请求，并且图像下载时不会有延迟。这可能是为什么你没有在HTML中看到预加载的图像。

Answer 3

1）通常情况下，您想要预先加载重要的图像，并且应该马上看到。巨大的图片背景似乎并不需要马上加载。

2）这是可能的，它确实取决于你的具体情况，不管它是否实用。

3）发展商，然后从他在JavaScript中创建的，而不是使用HTML的images数组引用图像（例如，<img src="...