firefox-5.x关于img标签的load事件、svg、ff5.4audio标签显示的适配tip
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哦。
firefox-5.x关于img标签的load事件、svg、ff5.4audio标签显示的适配tip的更多相关文章
- DOM标签操作与事件与jQuery查找标签
目录 DOM之操作标签 创建标签对象 标签对象的属性 innerText与innerHTML 标签内部追加内容 属性操作 事件 常用事件 事件绑定 事件案例 jQuery简介 查找标签 基本选择器 属 ...
- PHP判断图片是否存在和jquery中load事件对图片的处理
在公司的图片服务器中,同一个产品一般会存在对应的大图和缩略图.因此,我们在开发手机端的web网站时,默认使用的是产品图片的缩略图,查询数据库时获取的是缩略图的路径.但是,不知什么原因,时不时的,测试的 ...
- 如何用按钮的click事件去触发a标签的click事件
在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...
- 前端09 /jQuery标签操作、事件、补充
前端09 /jQuery标签操作.事件.补充 目录 前端09 /jQuery标签操作.事件.补充 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文 ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
- HTML load事件和DOMCOntentLoaded事件
JS高程 p14 “异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行” 普通script标签会阻塞DOM的解析 DOMcontentLoa ...
- [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...
- DOMContentLoaded 和 Load 事件 区别(待补充)
javascript会阻塞dom的解析.当解析过程中遇到<script>标签的时候,便会停止解析过程,转而去处理脚本,如果脚本是内联的,浏览器会先去执行这段内联的脚本,如果是外链的,那么先 ...
随机推荐
- 分手是祝愿:dp
Description Zeit und Raum trennen dich und mich. 时空将你我分开. B 君在玩一个游戏,这个游戏n个灯和n个开关组成,给定这n个灯的初始状态,下标为从1 ...
- 我跟上家老板说过的最后一句话:转.NET Core吧
最近几天浩子终于刚刚脱离了令人发指工作,一者是年底了,一者是不要向生活低头,就在这时我选择了第二者. 上家是做物联网的,人数不多,七八名开发人员,感觉都还可以,都很年轻没有秃顶,糊里糊涂就选择了入职. ...
- 「BZOJ1576」[Usaco2009 Jan] 安全路经Travel------------------------P2934 [USACO09JAN]安全出行Safe Travel
原题地址 题目描述 Gremlins have infested the farm. These nasty, ugly fairy-like creatures thwart the cows as ...
- Vue基础系列(二)——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- mariadb数据类型
MariaDB 数据类型: MariaDB数据类型可以分为 数字,日期和时间以及字符串值. 使用数据类型的原则:够用就行,尽量使用范围小的,而不用大的 常用的数据类型: a. 整数:int, bit ...
- vue学习笔记(五)条件渲染和列表渲染
前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...
- 替换"marquee",实现无缝滚动
js的marquee标签,可以实现元素循环滚动,但是不能无缝连接,要实现“无缝滚动”的效果必须使用js(借鉴百度),思路是使要滚动元素相对位置不断改变,上下滚动就相对top或者bottom,左右滚动就 ...
- spark集群搭建(三台虚拟机)——spark集群搭建(5)
!!!该系列使用三台虚拟机搭建一个完整的spark集群,集群环境如下: virtualBox5.2.Ubuntu14.04.securecrt7.3.6_x64英文版(连接虚拟机) jdk1.7.0. ...
- 力扣(LeetCode)找不同 个人题解
给定两个字符串 s 和 t,它们只包含小写字母. 字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母. 请找出在 t 中被添加的字母. 示例: 输入: s = "abcd&quo ...
- Relation-Shape Convolutional Neural Network for Point Cloud Analysis(CVPR 2019)
代码:https://github.com/Yochengliu/Relation-Shape-CNN 文章:https://arxiv.org/abs/1904.07601 作者直播:https:/ ...