javascript - 更改src 属性并显示新图像_因为它加载_

Question

我正在显示这样的图像：

<img src="placeholder.jpg" data-url="/get_image/{{image.id}}/" />

/get_image/{{image.id}}返回一些带有实际图像 URL 的 JSON，然后我使用 jQuery 替换标记的src属性。<img>

我遇到的问题是图像仅在完全下载后才会显示在浏览器上。对于大图像，这可能需要一段时间，并且一些用户认为图像永远不会加载，尽管事实上显示placeholder.jpg“正在加载...”

如果替换占位符的图像实际上会明显加载（例如像大多数 JPEG 一样从上到下），而不是在所有图像都下载后突然显示，那就太好了。

显示进度条的方法会更好。

有人有建议吗？

score 2 · Accepted Answer

您可以使用预加载器，但仍应等待图像完全加载。

其他解决方案取决于您保存图像的方式。

您可以在 Photoshop 等应用程序中打开图像，并在保存文件时单击 PROGRESSIVE 选项（即使图像未完全加载，Progressive 选项也会使图像可见）。

在 Photoshop 中：

此选项将使文件的大小稍大一些，但浏览器将在加载图像时显示它们。

score 0 · Accepted Answer

相反，您可以将图像属性 'title' 或 'alt' 值添加为 ' Loading .... '

如果图像即将加载，则会向用户显示 title 或 alt 属性。

使用 Javascript 加载图像后，您可以更改 alt 或 title 值。

这是一个基本的解决方案。您可以使用它，直到找到合适的解决方案。

score 0 · Accepted Answer

您的问题与我发现对我有用的解决方案的问题非常相似。但尚不清楚它是否对您有用，因为评论者建议它取决于启用渐进式选项时保存的图像。

就我而言，初始图像总是在加载时显示，因此我的解决方案似乎利用了它。对于您的情况，如果您最初将大文件作为测试用例加载并且它在下载时出现，那么我怀疑我的解决方案也适用于您。

3 回答 3