firefox-5.x关于img标签的load事件、svg、ff5.4audio标签显示的适配tip
2024-09-01 17:12:20
1.firefox中img标签的load事件后获取图片宽高错误。
需求是根据图片加载后的大小宽高比,调整图片显示的宽高。
在chrome浏览器下,使用jquery的load方法监听img标签的“加载完成”事件。在其回调里,即可获得加载完成后的图片的宽高,代码如下:
$('img').load(function() {
//输出图片宽高,firefox将输出img标签原来的高度,而不是加载完成后图片的高度。
console.log($(this).height());
//...do some thing
});
上边这段代码在firefox中就不能顺利的运行了。原因是firefox的load事件实现与chrome不同。firefox的load事件回调时,img标签的宽高并没有调整为加载后图片的宽高。
这里需要介绍另外一个img标签的属性:complete。complete也是用来判断图片是否加载完成了的。firefox在complete为1的时候可以确定img标签的宽高已经调整完成。所以,代码进行了一些修改:
$('img').load(function() {
let $th = $(this);
//输出图片宽高,firefox将输出img标签原来的高度,而不是加载完成后图片的高度。
console.log($th.height());
let timer = setInterval(function() {
if ($th[0].complete) {
clearInterval(timer);
console.log($th.height());
//...do some thing...
}
}, 50);
});
2.关于firefox对svg图的支持问题。
firefox对svg是支持的,但是支持的力度还是有一些低的。比如一个svg格式的文件,直接扔到ff里可以显示。但是当使用base64编码的时候就不能显示了。
经过查找发现,使用base64编码的时候,svg内部标签不能使用cmyk格式的颜色表示,只能使用rgb的。还有不太兼容defs标签。
3.ff5.4的audio标签不见啦?
经过仔细排查发现,在ff5.4下,audio标签的height设置低于40px,则标签会自动隐藏,丢失不见。所以要想audio标签不丢失,记得把它的高度设置大于40px哦。
最新文章
- bat 结束进程
- Ubuntu 14.04 下安装google的浏览器——Chrome
- Communication System(dp)
- springMVC+jpa配置之简单案例
- achartengine andorid图像引擎入门
- codeforces 519A. A and B and Chess,
- win下vm10+mac os 10.9安装遇到问题
- 【ThinkingInC++】66、pointer Stash的使用
- Maven搭建springMVC+spring+hibernate环境
- [Java自学第二天]
- Slf4j+Log4j日志框架入门
- HDU 2147 kiki's game (奇偶博弈)
- sencha touch Demo(示例)(2014-6-25)
- Spark(十三)SparkSQL的自定义函数UDF与开窗函数
- LeetCode 80. 删除排序数组中的重复项 II
- KVC &; KVO 入门
- Transformer中引用iqd作为数据源导入报错TR1907与TR3312
- 转:VB用ADO连接SQLServer数据库
- UTF-8 与 BIG-5 转码
- .net 编译原理
热门文章
- [UWP] 为WinRT组件创建Nuget包
- 第六篇 视觉slam中的优化问题梳理及雅克比推导
- [开源]基于goapp+xterm实现webssh-网页上的SSH终端(golang)
- DFS深度优先算法学习
- VueRouter爬坑第一篇-简单实践
- [WPF] Caliburn Micro学习一 Installation
- [JQuery] JQuery学习笔记
- [高效工作软件] Capslock+的使用笔记 (快捷键)
- nyoj 10 skiing (DFS)
- 【并发编程】synchronized的使用场景和原理简介