用jQuery异步加载映像

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (86)

我希望使用jQuery异步地在我的页面上加载外部图像。我试过以下几点:

$.ajax({ 
   url: "http://somedomain.com/image.jpg", 
   timeout:5000,
   success: function() {

   },
   error: function(r,x) {

   }
});

但是它总是会返回错误,是否可以像这样加载图像?

我试着用.load方法,但我不知道如何在图像不可用时设置超时(404)。我该怎么做?

提问于
用户回答回答于

解决方案1

使用base 64图像数据和REST映像服务。如果你有自己的webservice,可以添加一个JSP/PHPREST脚本,该脚本提供base 64编码的图像。我偶然发现了一种很酷的图像编码新语法:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>

因此,你可以使用Ajax加载ImageBase 64数据,然后在完成后将base 64数据字符串构建到映像中!

$.ajax({ 
    url : 'BASE64_IMAGE_REST_URL', 
    processData : false,
}).always(function(b64data){
    $("#IMAGE_ID").attr("src", "data:image/png;base64,"+b64data);
});

解决方案2:

欺骗浏览器使用它的缓存。当资源在浏览器缓存中时,这给你提供了一个很好的fadeIn():

var url = 'IMAGE_URL';
$.ajax({ 
    url : url, 
    cache: true,
    processData : false,
}).always(function(){
    $("#IMAGE_ID").attr("src", url).fadeIn();
});   

然而,这两种方法都有其缺点:第一种方法只在现代浏览器上工作。第二种方法存在性能故障,并依赖于如何使用缓存的假设。

热门问答

对象存储, 版本控制,没有提供对象的历史版本列表的查询API吗?

serverless db 如何管理?

Richel码农
推荐
1.支持pg_dump,psql工具进行数据导入和导出。 2.本地CLI,可以使用postgresql的客户端psql,也可以使用dbeavr,navicate,pgadmin等工具访问。 3.支持操作DB ,要自己写逻辑 ... 展开详请

腾讯云何时会有域名交易系统?

腾讯云域名与DNS解析团队域名、解析产品经理
推荐

安卓APP使用免费版加固后,在Android11系统上运行闪退,是什么原因?

hello,目前已经适配了Android R Beta1,预计这周内上线移动应用安全在线版,请留意日志更新

配置 https 配置完后报错?

女淘日记

杭州吱吱吱科技 · 站长 (已认证)

推荐已采纳

请检查服务器是否安装了代理?如有请尝试移除代理再尝试

另外,curl访问https时候需要确保服务器已经保存了证书,可以通过 curl -k --tlsv1 过滤

mysql安装后修改默认密码问题?

推荐已采纳
您好,可以先配置免密登录数据库,将密码修改后再关闭免密登录即可,下面介绍简要步骤: 1. 获得服务器超级管理员权限,然后先停止mysql服务 2. 修改mysql启动参数文件,文件一般在 /etc/my.cnf (linux)在[mysqld]的段中加上一句:skip-gra...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券