FadeIn图像像Facebook（如果没有完全加载，显示模糊）

Question

我正在编写一个加载大量图像的jquery插件。

我希望首先将图片显示为模糊，如果已完全加载，则完全显示。

Facebook就是一个很好的例子。

这种技术如何运作？

Answer 1

这取决于保存图像的格式。

JPG图像通常从上到下加载（并因此显示）。然而，如果它们以渐进（也称为隔行扫描）格式存储，则它们将以粒状格式加载整个图像并逐渐提高质量。 Facebook以渐进格式保存图像。

有可用于从第一种格式转换为第二种格式的实用程序。这是一个众所周知的链接（ImageMagick）：ImageMagick

Answer 2

你只有两张图片：质量差，质量好的图片。 当您想要显示图像时，首先将image.src设置为质量不佳的图像，然后立即将图像路径设置为良好的图像路径（带有0延迟的setTimeout也会起作用）。

它有效，因为浏览器在完全加载之前不会替换img标记中的图像。质量差的图像加载速度比良好的图像快得多，因此用户在加载图像时会首先看到模糊图像和满载图像。

实施例

img.src = 'path/to/fuzzyImage.jpg';
setTimeout(function() {
    img.src = 'path/to/fullImage.jpg';
}, 0);

Answer 3

通常的做法是将图像的缩略图版本的宽度和高度设置为大图像的完整大小，并在加载大图像时将缩略图替换为完整图像。当您在缩略图图像上设置完整尺寸时，它会变得“模糊”，因为浏览器会将其内插到更大的尺寸。