<img> onload handler無法觸發dataURI

我在使用dataURI加載<img>的src屬性時無法啓動onLoad處理程序。 Here is the jsFiddle。<img> onload handler無法觸發dataURI

這似乎是瀏覽器兼容性問題。

處理程序在Firefox中按預期啓動。
處理程序在Chrome中僅觸發一次。
處理程序在IE中按預期啓動。

我想每次將dataURI加載到<img>時，即使正在加載的dataURI與先前的dataURI相同，也會觸發該處理程序。

我懷疑這與Google Chrome中的緩存有關。使用「普通圖片加載」時，可以通過在URL中添加?refresh={timestamp}來解決此問題（like here）。

任何想法如何迫使Chrome實際加載dataURI，即使它被緩存？

澄清：

在Firefox & IE符合我的要求的行爲。我希望Chrome展示相同的行爲...

來源

2014-01-20 Ivo Renkema

檢查我的答案，更新它 – Ergec

對不起，但爲什麼你需要在同一圖像上多次觸發加載事件？這可能會導致未來許多開發人員的混淆。任何圖像修改都會改變結果base64。考慮改變你的邏輯或請解釋你的動機 – veritas

1.爲什麼你需要多次更新相同的uri相同的''？ 2.爲什麼即使使用'.load'也需要監聽？這聽起來像是一個設計問題。 – Fresheyeball

使用Chrome可以使用

<button onclick="$('#copy').attr('src', '');$('#copy').attr('src', $('#original').attr('src'));">copy image</button>

http://jsfiddle.net/AnsME/16/

對於瀏覽器

的jsfiddle給出了錯誤的jQuery。它根本不加載。嘗試在常規的html文件中測試代碼。

來源

2014-01-23 20:56:28 Ergec

謝謝，就是這樣！（問題出現在Chrome中;在FF和IE中運行良好。） –

-1

就Chrome/Safari問題而言，您的事件代理僅適用於第一個存在的元素。看到這個更新小提琴：http://jsfiddle.net/AnsME/11/

var count = 0; 
$('button').click(function() { 
    var $original = $('#original'); 
    var $clone = $original.clone(); 
    $clone.load(function() { 
     $('body').append('on load firing number ' + ++count + '<br>'); 
    }); 
    $original.after($clone); 
});

來源

2014-01-20 13:51:01

這改變了行爲，這是**不**需要什麼。我不想創建第3或第4項。關鍵是''必須保持原狀。 dataURI需要多次複製到同一個元素中;如我原來的小提琴中所示。 –

<img> onload handler無法觸發dataURI

回答

相關問題