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

最新推荐文章于 2023-04-19 20:38:13 发布

VIP文章拿饭盒当烟灰缸

最新推荐文章于 2023-04-19 20:38:13 发布

阅读量451

点赞数

分类专栏： Debug 文章标签： firefox img audio 适配

本文链接：https://blog.csdn.net/sisierda/article/details/77267604

版权

需求是根据图片加载后的大小宽高比，调整图片显示的宽高。

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

关注