html - 在页面请求时更早地开始加载图像

Question

我有一个应用程序，加载图像的速度对于用户体验非常重要。

这是我在 firefox 的“网络”选项卡中看到的。图片是 intro-...:

首先我认为它是稍后加载的，因为它仅在 CSS 文件中描述(作为 background-image)。因此，我尝试使用 style="display: none" 在我的 HTML 主体的开头添加一个图像标签。

然而，令人惊讶的是，图像开始加载的点并没有改变，即使图像没有被隐藏也是如此。

更新

感谢@LOLKFC 的回答，我了解了图像预加载“行话”。我阅读了它并尝试了很多策略:创建一个图像(使用 jquery 或仅使用对象)，使用带有大负位置的 css 背景，使用 jquery get 等等。我发现速度足够快的唯一可接受的解决方案是这个:

xhr = new XMLHttpRequest()
xhr.open('GET', '/assets/intro-24108df7e2b69baf419efb3a4da9d994.jpg', true);
xhr.send('');

不过好像在解析css文件的时候又重新加载了图片，图片还是需要时间去渲染。

我在我的 HTTP header 上发送 Expires = Thu, 31 Dec 2037 23:55:55 GMT，但似乎尽管如此，图像仍会根据样式再次加载，而不是有效地预加载图像。

所以现在我正在做以下事情:

  xhr = new XMLHttpRequest()
  xhr.open('GET', '/assets/intro.jpg', false);
  xhr.send(null);
  var image = btoa(unescape(encodeURIComponent(xhr.responseText)));

将图像设置为背景的以下行不起作用:

     document.getElementById('intro').style.background = 'url(data:image/jpeg;base64,'+image+') no-repeat bottom center scroll';

如何修复这条线？

Answer 1

使用 Javascript，你可以做这样的事情 http://jsfiddle.net/HU7BR/ ，脚本在 html 的开头:

// 1. One way you could make performance better is by pre-caching the image:
(new Image).src = "http://www.massachusetts-prenuptial-agreements.com/wp-content/uploads/2011/05/Sunset-1.jpg"; // pre-cached!


// 2. Another thing you could do is make an image element with the source of your big file and when it loads, dynamically make the background of your body that picture:
var img = document.createElement('img');
img.style.display = "none";
img.src = "http://www.massachusetts-prenuptial-agreements.com/wp-content/uploads/2011/05/Sunset-1.jpg";

img.onload = function() { // when the image loads, do this
    document.body.style.background = "url(http://www.massachusetts-prenuptial-agreements.com/wp-content/uploads/2011/05/Sunset-1.jpg)";
};
// that way, the image will be fully loaded before the body gets its new background image


// now delete!:
img = null;