javascript - 显示低分辨率图像，几秒钟后显示高分辨率图像 (HTML)

Question

我想在 HTML 网页上显示大量图像，但希望首先显示低分辨率图像，然后在几秒钟后显示高分辨率图像。

原因是因为无法确定客户端互联网连接速度，所以我需要优化网站加载图像的方式。

我实际上已经浏览过 Stackoverflow 上的这个链接 Fast Image loading methods, low to high res with multiple backgrounds - javascript solution?

尝试运行答案中找到的示例 javascript 代码，但似乎不起作用。

然后我读到了 Progressive JPEG's ，但也不知道如何去做。

请提供任何帮助，我们将不胜感激。

Answer 1

这取决于您如何生成/创建图像，它们是否是渐进式的。如果您的图像不是渐进式的，并且安装了 ImageMagick(许多 Linux 都安装了)，您可以使用此命令将图像从非渐进式(也称为基线 JPEG)转换为渐进式，并在您的网站:

convert nonProgressive.jpg PJPEG:Progressive.jpg

ImageMagick 可免费用于 Windows、OSX、Linux，从 here .

最小化图像大小的另一种方法是使用 jhead，以下命令会从图像中删除所有 EXIF 信息以使其变小 - 删除的信息包括 GPS 坐标、图片拍摄的日期和时间等信息拍摄，相机型号和焦距和快门速度。

jhead -purejpg image.jpg

更新答案

为了回答您有关制作所有图像的进一步问题，我不是来告诉您该怎么做!这是您的网站 - 您可以按照您的意愿进行操作。我只是建议您在图像上尝试一下，看看您是否喜欢结果和性能。如果您想将所有图像应用到其中，这非常简单，可以使用标准工具，也可以使用 GNU Parallel，GNU Parallel 将使用您所有的 CPU 核心在很短的时间内完成这项工作。无论您做什么，我都会强烈建议您先进行备份，以防万一出现问题或者您后来认为渐进式、去除 EXIF 的 JPEG 不适合您。

因此，在进行备份后，假设您的网站位于/var/www 中，您可以执行以下选项之一:

find /var/www -iname "*.JPG" -exec convert "{}" "PJPEG:{}" \;

或者同样，使用 EXIF 剥离，以及颜色配置文件、剥离:

find /var/www -iname "*.jpg" -exec convert "{}" -strip "PJPEG:{}" \;

或者您可以使用 GNU Parallel，如下所示来使用所有 CPU 核心:

find /var/www -iname "*.jpg" | parallel convert "{}" -strip "PJPEG:{}"