我正在编写一个加载大量图像的 jquery 插件。
我宁愿先模糊地显示图片，如果它已满载，则完整。
Facebook 就是一个很好的例子。
这种技术是如何工作的？
问问题
914 次
3 回答
2
这取决于保存图像的格式。
JPG 图像通常从上到下加载（并因此显示）。但是，如果它们以逐行（也称为隔行）格式存储，那么它们将以颗粒格式加载整个图像并逐渐提高质量。Facebook 以渐进式格式保存他们的图像。
有一些实用程序可用于从第一种格式转换为第二种格式。这是一个众所周知的链接（ImageMagick）：ImageMagick
于 2012-12-30T10:14:00.613 回答
0
通常的做法是将缩略图版本的图像的宽度和高度设置为大图像的全尺寸，并在加载大图像时将缩略图替换为全图像。当您在缩略图上设置完整尺寸时，它会变得“模糊”，因为它被浏览器插入到更大的尺寸。
于 2012-12-30T14:04:01.143 回答
0
你只有两张图片：一张质量差，一张质量好。当您要显示图像时，您首先将 image.src 设置为质量差的图像，然后立即设置为良好的图像路径（延迟为 0 的 setTimeout 也可以）。
它可以工作，因为浏览器在完全加载之前不会替换 img 标签中的图像。质量差的图像加载速度比好图像快得多，因此用户在加载时首先会看到模糊图像和完全加载的图像。
例子
img.src = 'path/to/fuzzyImage.jpg';
setTimeout(function() {
img.src = 'path/to/fullImage.jpg';
}, 0);
于 2012-12-30T10:23:36.003 回答