<img> onload handler fails to fire for dataURI

Question

I am having trouble getting the onLoad handler to fire when an the src attribute of <img> is loaded with a dataURI. Here is the jsFiddle.

This appears to be a browser compatibility issue.

• Handler fires as expected in Firefox.
• Handler fires only once in Chrome.
• Handler fires as expected in IE.

I would like the handler to fire every time a dataURI is loaded into the <img>, even if the dataURI being loaded is identical to a previous dataURI.

I suspect this is related to the cache in Google Chrome. With 'ordinary image loads', this can be solved by adding a ?refresh={timestamp} to the URL (like here).

Any ideas how to force Chrome to actually load a dataURI, even if it is cached?

clarification:

The behavior in Firefox & IE meets my requirements. I would like Chrome to exhibit the same behavior...

Answer 1

For Chrome you can use

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

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

For Explorer

JSFiddle gives error for JQuery. It doesn't load at all. Try testing code in a regular html file.

Answer 2

As far as the Chrome/Safari issue, your event delegation was only being applied to that first existing element. See this updated fiddle: 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);
});