更改 <img> 的 src 属性并在加载时显示新图像答案

【问题标题】：Changing an <img>'s src attribute and dispaying the new image _as it loads_更改 <img> 的 src 属性并在加载时显示新图像
【发布时间】：2013-11-24 07:06:53
【问题描述】：

我正在显示这样的图像：

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

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

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

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

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

有人有建议吗？

【问题讨论】：

demo.tutorialzine.com/2013/09/quick-tip-progress-bar
你用什么来获取这些数据？ <img src="" id="yourimage"/> 尝试 ajax 并使用 beforeSend : function(){ $("#yourimage").attr("src","url to your loading image"); } 并完成 complete : function(data){ $("#yourimage").attr("src","data"); }
@Vinh 这几乎就是我已经在做的事情......我的 placeholder.jpg 说“正在加载”。但是在加载图像时没有任何移动，然后突然出现。如果是 5 MB 的图像，在慢速连接上可能需要数十秒，并且用户认为出现问题。
我不知道，可能是您的加载是JPG 类型而不是GIF 类型然后这就是为什么。如果您使用 ajax，则无需将 data-url 放入 <img> 标签中。我使用的方式是：$.ajax({ url: "your url", global: false, type: "POST", data: {}, cache: false, beforeSend: function() { $("#yourimage").attr("src","loading.gif"); //loading.gif for ex }, success: function(data) { $("#yourimage").attr("src","data"); } }
使您的图像成为 渐进式 jpeg。

标签： javascript jquery html image jpeg

【解决方案1】：

您的问题与my question 非常相似，在那里我发现了一个对我有用的solution。但尚不清楚它是否适合您，因为评论者建议它取决于启用渐进选项的保存图像。

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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

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

在 Photoshop 中：

打开图片
单击文件 -> 为 Web 保存 ...（或在以前的版本中为 Web 和设备保存）
在打开的对话框的右上角，选择“JPEG”格式
您会看到一些选项，选择“渐进式”
保存

此选项会使文件稍微变大，但浏览器会在加载图像时显示它们。

【讨论】：