多个图像大小与浏览器图像大小调整/缩放

Question

我有一个页面，我将加载几个不同大小的主图像;虽然并非所有大型图像都会立即加载。

情景就是这个......

我有一个滑块，其中包含所有较大图像的拇指;这些都是在页面加载时加载的。

当页面执行时会加载默认的大图像，但只有当用户点击该图像的缩略图时才会加载其他大图像，然后我将大图像的src替换为..

function changeMainImage(image) {

    // Set big image
    var big_image = image + '-big.png'

    // Update main image url
    jQuery('#main_image').attr('src', big_image);

}

现在因为当页面没有加载大图像时，这会导致显示大图像的小延迟，这是不可取的。

现在我想我只用一块石头就可以杀死两只鸟，只需加载大图像而没有拇指，只需让浏览器将大图像缩放成缩略图即可;我只是有点畏缩这样做，因为我一直讨厌使用这种方法用于拇指的网站，但在我的情况下它似乎是有效的，因为我需要加载大图像。

这样我就可以减少1 * amount of pics的http请求数量，并且一旦点击了拇指，我就会立即加载大图像。

我唯一关心的是试图弄清楚如何为浏览器提供正确的尺寸，以便图像缩放到正确的比例，以及如果页面有12个图像的事实;通过这种方式，当用户甚至没有兴趣查看所有12个大图像时，我一次下载所有12个大图像。

两个版本都有专业版和专业版。缺点 - 任何建议在这做什么？

Answer 1

您目前拥有的方法是我喜欢做的。加载可见的内容。

现在，为了改善用户体验，许多网站都使用了几种技术。第一个是预加载下一个或两个图像。如果你有一个类似幻灯片的显示器，并且很清楚图像的显示顺序，那就很好。

第二种是在下载大版本时显示缩略图。如果您的缩略图尺寸合适，这可以让用户获得他们的点击工作的视觉反馈，并且在良好的连接上，图像将很快下载。

最后，我建议使用渐进式JPEG（如果您的图像是照片），以便在加载时进行增强。

有关尺寸（以及任何其他元数据）的数据，请将其保存在JavaScript对象数组中，或存储图像数据的任何位置。您可以轻松地使用JSON从服务器传输。