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

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从服务器进行传输。