firefox-5.x关于img标签的load事件、svg、ff5.4audio标签显示的适配tip

本文主要探讨了Firefox浏览器在处理img标签的load事件、SVG图像支持以及audio标签显示时遇到的问题。针对Firefox中img标签的load事件获取宽高错误,建议使用complete属性判断。对于SVG支持问题,Firefox不支持base64编码的CMYK颜色和defs标签。最后,指出Firefox 5.4的audio标签高度小于40px会消失,需确保高度设置大于40px。
摘要由CSDN通过智能技术生成

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标签的宽高已经调整完成。所以,代码进行了一些修改:


                
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值