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

为什么需要预加载页面直接引用的图像？当请求解析页面的源时，会遇到它们的引用。

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

Answer 2

1）一般来说，您想要预先加载重要的图像，并且应该立即看到。巨大的图片背景似乎不需要马上加载。

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

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

Answer 3

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

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

但是 - 用户特别注意到不是平滑的悬停过渡，所以这些都在优化。

JavaScript图像预加载

3 个答案: