预加载/加载大图像的最快方法 [英] Fastest way to preload/load large images

问题描述

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

Preload may not be the correct term...

我有一个页面可以加载非常大的图像.我想等待大图片完全加载后再在页面上显示给用户.

I have a page which loads a very large image. I wanted to wait for the large image to completly load before displaying on the page for the user.

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

At the moment, I have a loading gif and i'm using javascript to wait for the image to load and then replace the loading gif src with the image:

<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方式或强制浏览器首先下载此资产的方式.上面的代码显然位于期望加载图像的位置.所以上面和下面都有代码.

I'm wondering if there are quicker ways to load this image such as a pure CSS way or some way to force the browser to download this asset first. The code above is obviously positioned in the location where the image is expected to load. So there is code above and below.

我认为一个CSS选项是将图像放置在屏幕之外，并在加载后执行src替换.

One CSS option I thought was to position the image off the screen and once it's loaded, perform the src replace.

我的服务器正在运行http2，因此应该很快.我只想知道是否有更好的方法，然后我现在正在做什么，以确保对所有主要浏览器都以最快的方式加载大图像.

My server is running http2, so it should be pretty quick. I just want to know if there is a better way then what i'm doing now to ensure the large image is loaded the quickest way possible for all major browsers.

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

I should add, i've already done plenty of optimisation of the image file already. I'm working with high resolution photography.

谢谢！

推荐答案

您可以使JPG渐进，然后让其加载.浏览器将逐渐模糊显示图像，然后加载更多细节.

You can make the JPG progressive and then just let it load. Browsers will progressively display the image first blurry and then load more details.

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

This is the best way because user can see the image even before it's fully loaded.

在Linux上，使用 jpegtran ，在Windows上使用Photoshop或 RIOT

On linux use jpegtran, on Windows use Photoshop or RIOT

这篇关于预加载/加载大图像的最快方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！