我有一个页面，我将在其中加载几个不同大小的主图像；尽管不是所有的大图像都将被一次加载。
场景是这样的。。
我有一个滑块，它包含所有较大图像的拇指；当页面加载时，这些都会加载。
默认的大图像在页面加载时加载，但其他大图像只有在用户单击该图像的缩略图，然后我将大图像的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个都不感兴趣。
两个版本都有优点&缺点-有什么建议吗？
我更喜欢你目前使用的方法。加载可见的。
现在，为了让用户体验更好，许多网站使用了一些技术。第一种方法是预加载下一个或两个图像。如果你有一个类似幻灯片的显示，并且很清楚图像的显示顺序，这是很好的。
第二种是在下载大版本时显示缩略图。如果你的缩略图大小适中，这可以让用户获得视觉反馈，表明他们的点击有效，并且在连接良好的情况下，图像很快就会被下载。
最后，我建议使用渐进式JPEG(如果您的图像是照片)，以便在加载时增强它们。
对于大小数据(以及任何其他元数据)，请将其保存在对象的JavaScript数组中，或者存储图像数据的其他位置。您可以很容易地使用JSON从服务器进行传输。