javascript - 预加载/加载大图像的最快方法

Question

预加载可能不是正确的术语...

我有一个加载非常大图像的页面。我想等待大图像完全加载，然后再显示在用户的页面上。

目前，我有一个正在加载的 gif，我正在使用 javascript 等待图像加载，然后用图像替换正在加载的 gif src:

<img src="loading.gif" id="image" />
<script>
img = 'very_large_image.jpg';
var newimg = new Image();
newimg.src = img;
newimg.onload = function(){
$('#image').attr('src',img);
}
</script>

我想知道是否有更快的方法来加载此图像，例如纯 CSS 方式或某种强制浏览器首先下载此 Assets 的方式。上面的代码显然是定位在图片期望加载的位置。所以上面和下面都有代码。

我认为的一个 CSS 选项是将图像定位在屏幕之外，并且在加载后执行 src 替换。

我的服务器运行的是 http2，所以它应该很快。我只想知道是否有比我现在正在做的更好的方法来确保以最快的方式为所有主要浏览器加载大图像。

我应该补充一点，我已经对图像文件做了很多优化。我正在使用高分辨率摄影。

谢谢!

Answer 1

您可以使 JPG 渐进，然后让它加载。浏览器将首先模糊地逐步显示图像，然后加载更多细节。

这是最好的方式，因为用户甚至可以在图像完全加载之前看到图像。

编辑: 在 Linux 上使用 jpegtran , 在 Windows 上使用 Photoshop 或 RIOT