Search code examples
javascriptjquerydata-uri

<img> onload handler fails to fire for dataURI

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...

Solution

  • 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.