更改<img>的src属性并取消支付新映像_as it loads_的费用
我展示的图像如下：
<img src="placeholder.jpg" data-url="/get_image/{{image.id}}/" />/get_image/{{image.id}}返回一些带有URL的JSON到实际图像，然后我使用jQuery替换<img>标记的JSON。
我遇到的问题是，图像只有在完全下载后才会显示在浏览器上。对于大型图像，这可能需要一段时间，一些用户认为图像永远不会加载，尽管placeholder.jpg说“加载.”
如果替换占位符的图像能够明显地加载(例如，像大多数JPEG一样从上到下)，而不是在下载完所有内容时突然显示出来，那就太好了。
一个显示进度条的方法会更好。
有人有暗示吗？
回答 3
Stack Overflow用户
发布于 2013-11-12 08:39:57
您可以使用预加载程序，但仍然应该等待图像完全加载。
其他解决方案取决于您如何保存映像。
您可以在应用程序(如photoshop )中打开图像，在保存文件时，单击渐进式选项(渐进选项将使图像即使未完全加载也可查看)。
在Photoshop中：
- 打开图像
- 点击文件->保存网页.(或在早期版本上为Web和设备保存)
- 在打开对话框的右上半部分，选择“JPEG”格式
- 你会看到一些选项，选择‘进步’
- 保存
此选项将使文件稍大一些，但浏览器将在图像加载时显示它们。
Stack Overflow用户
发布于 2013-11-20 13:44:25
相反，您可以将图像属性'title‘或'alt’值添加为'Loading .‘
当标题或alt属性显示给用户时，如果图像即将加载。
在使用Javascript加载图像之后，您可以更改alt或title值。
这是一个基本的解决办法。你可以用它，直到你找到适当的解决办法。
Stack Overflow用户
发布于 2015-10-02 06:28:39
您的问题非常类似于my question，在那里我发现了一个对我有用的solution。但是还不清楚它是否对您有效，因为评论者建议它依赖于在启用渐进式选项的情况下保存的图像。
对于我的情况，最初的映像总是显示在加载时，所以我的解决方案似乎利用了这一点。对于您的情况，如果您首先以测试用例的形式加载您的大文件，并且它是在下载时出现的，那么我怀疑我的解决方案也适用于您。
https://stackoverflow.com/questions/19924001
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号