0

我有一个页面，我将在其中加载几个不同尺寸的主图像；虽然不是所有的大图像都会一次加载。

剧情是这样的。。

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

默认的大图像在页面加载时加载，但其他大图像仅在用户单击该图像的缩略图时才会加载，然后我将大图像的 src 替换为这样..

function changeMainImage(image) {

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

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

}

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

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

这将允许我减少 http 请求的数量，1 * amount of pics并在单击拇指后立即加载大图像。

我唯一关心的是试图弄清楚如何为浏览器提供正确的尺寸，以便图像缩放到正确的比例，以及如果页面有 12 个图像；这样，当用户甚至对查看全部 12 张图片都不感兴趣时​​，我就可以让用户一次下载全部 12 张大图片。

两个版本都有优点和缺点 - 有什么建议在这里做什么？

4

1 回答 1

3

你目前的方法是我更喜欢做的。加载可见的内容。

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

第二种是在大版本下载时显示缩略图。如果您的缩略图大小合适，这可以让用户获得点击有效的视觉反馈，并且在合适的连接上，图像将很快被下载。

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

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

于 2012-11-30T17:34:27.083 回答