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哦。