我正在显示这样的图像:
<img src="placeholder.jpg" data-url="/get_image/{{image.id}}/" />
/get_image/{{image.id}}返回一些带有实际图像 URL 的 JSON，然后我替换 src <img> 的属性使用 jQuery 标记。
我遇到的问题是图像只有在完全下载后才会显示在浏览器上。对于大图像，这可能需要一段时间，一些用户认为图像永远不会加载，尽管 placeholder.jpg说“正在加载...”
如果替换占位符的图像能够真正明显地加载(例如像大多数 JPEG 一样从上到下加载)而不是在所有下载完毕后突然显示，那就太好了。
显示进度条的方法会更好。
有人有建议吗？
最佳答案
您可以使用预加载器，但仍应等待图像完全加载。
其他解决方案取决于您保存图像的方式。
您可以在 photoshop 等应用程序中打开图像，并在保存文件时单击 PROGRESSIVE 选项(Progressive 选项将使图像可见，即使它没有完全加载)。
在 Photoshop 中:
- 打开图片
- 单击文件 -> 保存为 Web ...(或在以前的版本中为 Web 和设备保存)
- 在打开的对话框的右上角，选择“JPEG”格式
- 你会看到一些选项，选择“Progressive”
- 保存
此选项会使文件稍大一些，但浏览器会在加载图像时显示图像。
关于javascript - 更改 <img> 的 src 属性并在加载时显示新图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19924001/