非IE浏览器 img标签 src值为空时,2次请求问题

空src属性的请求问题
本文通过实验验证了当HTML标签中的src属性为空时,不同浏览器(IE、Firefox、Safari、Chrome)对img、embed、background-url、link、input type='image'、script和bgsound等标签产生的额外请求次数。
img src值为空时,2次请求

以前应该有同学遇到过类似的情况, 当有一个类似如 <img src=’’> 的标签时, 会对页面多出一次请求,

根据一篇文章的分析,我猜测是不是所有的会主动引入外部文件的标签都会存在此类问题, 如 embed, link等,

于是就以实验的方式加以验证.

以下是初步的结论:

 

 

标签/请求次数/浏览器

IE

FF,safari,chrome

 

Img

2

2

 

Embed

1

2

 

Background: url

1

2

 

Link

1

2

 

Input type=’image’

2

2

 

Script

1

2

 

bgsound

2

 

 

注:

1.       对于IE和firefox的2次请求, 两者请求的页面是不一样的.
IE: 请求的是被访问文件所在的目录, img标签时, 2次请求为 http://www.xxxx.cn/test/

FF,safari,chrome: 请求的是被访问的文件

2.       对于embed标签,上面所描述的情况是在 type 不为空的情况下, type为空时,FF请求1, IE根据type值不同情况不同.

3.       如果 以上的标签中 不包含 src=”” ,就不会发生二次请求.

### IE 浏览器无法解码 URL 处图像解决方案 当遇到IE浏览器无法解码URL处图像的问题,可以考虑以下几个方面来解决问题: #### 1. 检查服务器端返回的数据格式 确保服务器端返回给客户端的数据是以正确的Base64编码形式发送的。如果数据不是有效的Base64字符串,则可能导致某些浏览器(特别是较旧版本的IE)无法解析图片。可以通过调试工具查看实际响应内容并验证其合法性。 ```javascript $.ajax({ type: "post", url: base_url + "/getframe", dataType: 'json', data: "", success: function(d) { if (d.code == 1 && typeof d.data === 'string') { // 验证data字段是否为字符串类型 $("#imgId").attr("src", "data:image/jpg;base64," + d.data); if (flag) { showImage(); } } else { console.error('Invalid response format or content'); alert("播放失败"); } }, error: function(xhr, status, error){ console.log(status + ", " + error); alert("请求错误:" + xhr.responseText); } }); ``` #### 2. 使用Polyfill库增强兼容性 为了提高对老旧浏览器的支持度,在项目中引入一些polyfill库可能是必要的选择之一。例如`babel-polyfill`可以帮助处理ES6特性在低版本IE中的缺失;而对于特定场景下可能出现的问题也可以尝试使用专门针对这些问题设计的小型补丁脚本。 #### 3. 替代方案——预加载图片资源 考虑到部分情况下直接通过JavaScript动态设置`<img>`标签src属性的方式可能会触发缓存机制失效等问题,建议提前将所需显示的所有帧作为静态文件上传至CDN或其他存储服务,并采用预先定义好的路径列表来进行轮询展示。这样不仅能够有效规避因网络延迟造成的卡顿现象,同也减少了跨域资源共享(CORS)带来的麻烦[^1]。 #### 4. 更新或替换浏览器环境 鉴于微软已经停止了对Internet Explorer的技术支持和服务更新,强烈推荐用户尽快迁移至Edge或者其他主流现代浏览器上继续日常办公娱乐活动。这不仅能获得更好的用户体验,也能享受到更加安全稳定的互联网冲浪之旅[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值