firefox-5.x关于img标签的load事件、svg、ff5.4audio标签显示的适配tip
来源:互联网 发布:淘宝装修模板复制 编辑:程序博客网 时间:2024/06/03 19:19
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哦。
阅读全文
0 0
- firefox-5.x关于img标签的load事件、svg、ff5.4audio标签显示的适配tip
- img标签的onerror事件
- img标签的onerror事件
- 图片(img标签)的onerror事件
- 图片(img标签)的onerror事件
- 图片(img标签)的onerror事件
- 图片(img标签)的onerror事件
- 关于<img>标签的一点理解
- svg的path标签
- HTML5 的 Audio 标签
- Img标签的去除
- <IMG>标签的方方面面
- img标签的使用
- <img>标签的方方面面
- 网络安全(2) -- 关于一次XSS攻击-图片(img标签)的onerror事件
- 关于<img>标签无法显示名字中带有中文的图片的问题
- Firefox关于Audio事件的bug及解决方案
- [置顶] img标签在firefox下图片不显示
- 大公司最喜欢问的Java集合类面试题
- 主题:shell 判断某扩展名文件是否存在
- 【最大流 模板题 EdmondsKarp】HDU
- 自定义视差特效
- Python快速入门1–基本命令
- firefox-5.x关于img标签的load事件、svg、ff5.4audio标签显示的适配tip
- JSBOM
- 中国剩余定理模版
- Unity3D
- 使用打包工具打包,生成了xxx.apk和xxx_signed.apk,将xxx.apk删除且xxx_signed.apk重新命名为xxx.apk
- MFC控件公共属性和常用函数
- Ambari-2.2.2.0文档翻译--安装(2)
- 25个经典的Spring面试问答
- 【数据结构】递归